youer

@youerning·4 public vizzes

make a tree path with D3

This example shows how to construct a tree-like path structure using D3’s SVG rendering. It depicts a branching visualization where nodes are positioned on a grid and connected by curved Bézier paths. The code uses `d3.path` and `bezierCurveTo` to draw smooth edges, with `d3.scaleLinear` mapping coordinates to the SVG canvas. The implementation defines a recursive function to generate node pairs, then renders the paths via `selectAll` and `.attr("d")` in a static layout.

Mar 24, 2020

Loading thumbnail…

Choropleth Map

A choropleth map displays countries of the world colored in light green, with a blue sphere representing the globe and black borders between nations. The visualization uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to render geographic features from TopoJSON data, while country names come from tab-separated values (TSV) data. Interactive zooming is implemented with `d3.zoom`, converting events to SVG transforms. Hovering over a country changes its fill color to red through CSS `:hover` styles, and tooltips with country names appear via SVG `title` elements.

Mar 22, 2020

Loading thumbnail…

Color and Sized Legends with D3.js

This example demonstrates how to build a color legend with D3.js, using a categorical scale to map named domains like “apple” and “lemon” to red and yellow circles. The code leverages `scaleOrdinal`, `selection.merge`, and custom legend functions to position groups with spacing, adding text labels offset from each circle. It renders as SVG with a static dataset defined inline, showing the legend’s interactivity through enter, update, and exit selections. The visualization also includes sample population data from a CSV file, though it is not actively displayed in the main legend.

Mar 22, 2020

Loading thumbnail…

Dataflow of World Countries Tree

A hierarchical tree visualization depicts the world's countries grouped by continent and subregion, sourced from a nested JSON structure. The tree branches from a global root into continents, subregions, and finally individual country names, with the depth of each node reflected in its font size. The layout uses D3's `cluster` and `linkHorizontal` functions to position nodes and draw connecting edges. A second set of paths, styled with a green dashed stroke, animates continuously via CSS keyframes to indicate data flow, while the entire visualization supports zooming through a custom `zoom` event handler. Text labels are anchored variably depending on whether a node has children.

Mar 22, 2020