Skip to main content
Log in
L

LaurentVuillon

@LaurentVuillon·6 public vizzes

Loading thumbnail…

Let's make a face with D3.js!

A smiley face composed of SVG shapes appears centered in the viewport. Its rectangular eyebrows animate upward and back down in a looping motion, while a curved mouth path follows the same transformation. The code uses D3.js v5 functions like `select`, `arc`, and chained `transition` calls to move elements. The example demonstrates fundamental DOM manipulation with SVG primitives, including circles for the head and eyes, rectangles for brows, and a path built from an arc generator.

Dec 25, 2019
Loading thumbnail…

Let's make a face with D3.js!

This interactive visualization builds a smiling face with D3.js, using SVG shapes for the head, eyes, eyebrows, and mouth. It demonstrates fundamental DOM manipulation and chained transitions by animating the eyebrows and mouth up and down in a looping sequence. The code leverages D3’s `select`, `append`, and `attr` methods to construct the scene, while the `transition().duration()` API drives the two-second animated movements. A static yellow circle, black-stroked head, and arc-based mouth are also defined using D3’s `arc` helper, all rendered on a 960-by-500 SVG canvas.

Dec 25, 2019
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent, sized circles, using a square-root scale to encode population values with circle radius. Natural Earth projection and geospatial paths render the sphere, graticules, landmasses, and country boundaries from TopoJSON data, styled in dark grays and greens. City coordinates come from a CSV dataset, projected via `d3.geoPath` to SVG circles, with React managing the component state and D3 utilities handling data loading and scaling.

Dec 24, 2019
Loading thumbnail…

Sized Points on a Map

This example displays a world map with city points sized by population, using a square-root scale to encode population values as circle radii. The visualization combines geographic context from World Atlas TopoJSON data with city data from Simplemaps, rendering both through React and SVG. The code uses d3.geoNaturalEarth1 for projection, d3.geoPath for country boundaries and graticules, and d3.scaleSqrt for sizing, with translucent Cornsilk circles overlaid on dark landmasses and green borders.

Dec 24, 2019
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent, sized circles, using a square-root scale to encode population values with circle radius. Natural Earth projection and geospatial paths render the sphere, graticules, landmasses, and country boundaries from TopoJSON data, styled in dark grays and greens. City coordinates come from a CSV dataset, projected via `d3.geoPath` to SVG circles, with React managing the component state and D3 utilities handling data loading and scaling.

Dec 24, 2019
Loading thumbnail…

Face with D3 js

This example renders an empty red SVG canvas with a prepared black outline for a face shape, using D3 v5 to select the SVG element and apply a background color. The face is drawn through CSS-styled path elements with rounded, red stroke lines, though the JavaScript does not generate the path data itself. It demonstrates D3’s basic selection and styling capabilities within an HTML page, paired with the SVG rendering approach. The visualization highlights how D3 can manipulate SVG styles and attributes, with the face design provided by static markup and CSS.

Dec 24, 2019