pcsong33

@pcsong33·3 public vizzes

Line (using curveCardinal)

A line chart uses a cardinal spline to connect six predefined data points across an SVG canvas. The d3.line generator with the curveCardinal interpolation produces a smooth, curved path through the points, which are also marked as circles on the chart. The rendering relies on D3 v4’s selection and attribute methods to assign the generated path data to the SVG path element.

Jan 31, 2020

Loading thumbnail…

Untitled

Each summer blockbuster from 1990 onward is drawn as a flower, with bloom size mapped to IMDb rating and petal count to vote totals, while petal shape and color encode the film’s MPAA rating and genre. The SVG scene is built with D3 v4 inside a React page, using cubic Bézier path definitions for petals and leaves, a Gaussian blur filter for subtle motion, and multiply blend modes for overlapping color mixing. Movie metadata comes from the bundled `movies.json` file, with each flower positioned chronologically down a tall scrolling canvas.

Jan 31, 2020

Loading thumbnail…

Untitled

This example presents an interactive map of the United States using d3.geo.path with an Albers USA projection, rendering state boundaries as SVG paths. Clicking a state triggers a smooth zoom animation that scales and translates the map to center on the selected region, highlighting it in orange. The map is constructed from topojson.feature and include a mesh overlay for state borders. The zoom effect is achieved by transitioning the group element's transform attribute using d3.transition over 750 milliseconds.

Jan 28, 2020