Skip to main content
Log in
C

charkaoui

@Charkao·7 public vizzes

Loading thumbnail…

Fork of map with legend

This example visualizes Indian states as a choropleth map, where each state’s color encodes its `AREA_` property using a sequential rainbow interpolator. The map is rendered with React and D3 v6, using `d3.geoMercator` projection and `d3.geoPath` to draw SVG paths from TopoJSON data loaded from a GitHub gist. A color legend is declared via `d3-legend` but is not actually rendered. The visualization updates reactively when the geometry state loads, filling each polygon based on the computed color scale.

Jun 22, 2021
Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates a minimal HTML page rendered through React, displaying the text “Hello HTML” styled with CSS. It uses no external data or visualization libraries, relying solely on vanilla HTML, CSS, and JavaScript. The page’s inline script logs “Hello JavaScript!” to the browser console, while the body’s font-size is set to 13em via a style block. The code highlights the basic structure of a web page, including a title and a centered layout, without any interactive or data-driven features.

Jun 22, 2021
Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML” at a massive font size, centered on the page. It demonstrates a minimal setup using plain CSS for styling and a JavaScript `console.log` statement that outputs “Hello JavaScript!” to the browser’s developer tools. The page uses no external libraries or frameworks, relying solely on the standard HTML DOM and JavaScript APIs from the starter template.

Jun 22, 2021
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates a smiley face built with D3.js, whose eyebrows animate in a continuous loop. An SVG circle forms the yellow head, with additional circles for eyes and a path created with the `arc` function for the mouth. The animation is driven by chained `transition()` calls on the eyebrows group, which move the eyebrows down and back up over a two-second interval each way. The code uses d3 v5 and relies on the `select`, `append`, and `attr` methods to manipulate the SVG DOM elements directly.

May 31, 2021
Loading thumbnail…

hello HTML

This example displays a minimal SVG scene containing a single circle centered within a 960 by 500 canvas. The page uses embedded CSS to remove default body margins and hide overflow. The markup directly employs the HTML `<svg>` element for vector rendering, with an HTML `<h1>` heading. The circle is defined with explicit `cx`, `cy`, and `r` attributes, demonstrating basic SVG shape creation without additional JavaScript libraries or external data sources.

May 31, 2021
Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates a minimal HTML page rendered through React, displaying the text “Hello HTML” styled with CSS. It uses no external data or visualization libraries, relying solely on vanilla HTML, CSS, and JavaScript. The page’s inline script logs “Hello JavaScript!” to the browser console, while the body’s font-size is set to 13em via a style block. The code highlights the basic structure of a web page, including a title and a centered layout, without any interactive or data-driven features.

May 31, 2021
Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML” at a massive font size, centered on the page. It demonstrates a minimal setup using plain CSS for styling and a JavaScript `console.log` statement that outputs “Hello JavaScript!” to the browser’s developer tools. The page uses no external libraries or frameworks, relying solely on the standard HTML DOM and JavaScript APIs from the starter template.

May 31, 2021