min

@mintysky·2 public vizzes

World Countries Tree

A hierarchical tree visualization displays the world’s countries, grouped first by continent and then by subregion, using a left-to-right layout. The D3 v5 code loads a JSON file and applies the `tree` and `hierarchy` layouts to position nodes, while `linkHorizontal` generates the connecting paths. Text labels, with font sizes decreasing by depth, are drawn for every node, and a zoom interaction via `d3.zoom` allows users to pan and scale the SVG graphic.

Oct 18, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn inside an SVG using D3.js v5. The code creates the face’s head, eyes, and mouth with `select`, `append`, and `arc` for the smile path. Eyebrows are rectangles whose vertical position animates in a loop via chained `transition().duration()` calls, moving up and down. The example demonstrates fundamental DOM manipulation and data-driven shape generation without external data, relying solely on the D3 library.

Oct 18, 2019