rcumani

@rcumani·3 public vizzes

Let's make a map with D3.js!

This example displays a world map using D3.js, rendering countries as interactive SVG paths with hover effects that turn them red. The visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw the globe and country boundaries from TopoJSON data loaded from the World Atlas. A `d3.zoom` behavior enables pan and zoom, while country names are joined from TSV data using `Promise.all`. The map is styled with CSS classes, featuring a blue sphere and light green countries.

Jul 9, 2019

Loading thumbnail…

Making a face

A yellow circle face with two eyes and eyebrows is rendered in SVG, with the right eyebrow animating upward and downward over two seconds. The mouth is drawn as a half-circle arc using the `d3.arc` helper. Built with D3 v5, the code uses `select`, `attr`, and chained `transition` calls to control the animation, positioning elements via SVG transforms.

Jul 4, 2019

Loading thumbnail…

Let's make a face with D3.js! Now

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face with moving eyebrows. The page renders an SVG canvas with a red background, and the face is constructed using D3 selection methods. The code uses `d3.select` to target the SVG element, while `bundle.js` likely contains additional logic for animating the eyebrows. The example showcases how D3’s data-binding and attribute manipulation work in a playful, visual context, with the SVG serving as the primary rendering surface for the interactive facial features.

Jul 3, 2019