Andrew Yan

@Airrobo·8 public vizzes

World Countries Tree

This example visualizes the popularity of the keyword "jazz" across 25 countries, grouped into continents, with each country ranked from highest to lowest search interest within its region. The hierarchical data is rendered as a tree using the D3.js library, specifically `d3.tree` and `hierarchy`, with `linkHorizontal` generating the curved connecting paths. Interactive zooming is enabled via `d3.zoom`, allowing users to pan and scale the network. The SVG output uses a distinct font styling and is driven by `data.json`, which contains the nested continent-country structure.

Jun 6, 2020

Loading thumbnail…

HTML Starter

This example showcases a line drawing of an intricate shape that animates itself onto the screen using a stroke-dash technique. The path is drawn over three seconds with a linear ease. The code uses D3.js version 3.5.6 to select the body, append an SVG, and create the path. It then leverages `path.node().getTotalLength()` and transitions with `attrTween` to animate the `stroke-dasharray` and `stroke-dashoffset` attributes, creating the effect of the line being traced. The underlying data is a static, pre-defined SVG path.

Jun 6, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example renders a static, stylized face in an SVG canvas using D3.js v5. The code sets the SVG dimensions to match the full browser window, then appends a single rounded rectangle as the facial background via the `select` and `append` APIs. It imports `arc` from D3, though no path drawing is executed in the visible script. The visual output is a simple, empty rounded rectangle, with styling handled by an external `styles.css` that fixes the body to the viewport.

Jun 4, 2020

Loading thumbnail…

Let's make a face with D3.js!

This gallery example builds a yellow smiley face in an SVG canvas using D3.js v5. The face is assembled from primitive shapes—circles for the head and eyes, rectangles for eyebrows, and a path for the mouth—all positioned via D3’s `select` and `append` methods. The animation uses D3’s `transition` API to move the eyebrows up and down over two seconds, demonstrating basic DOM manipulation and chained transitions. The code defines all geometry explicitly without external data, relying on D3’s `arc` generator for the mouth’s curved path.

Jun 4, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3.js v5 by animating a bowl of fruit, where apples and lemons are added, removed, or changed over time. The visualization renders SVG circles and text labels using D3's data join (`selection.data`, `enter`, `merge`, `exit`) to handle data changes. It uses `scaleOrdinal` for color and radius mappings, and each timed update (via `setTimeout`) shows how existing elements are updated or removed. The code directly manipulates an array of fruit objects to trigger the update cycles.

Jun 4, 2020

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples sit in a row, rendered as red circles of uniform size, with one highlighted by a black outline as the currently selected fruit. Clicking any apple moves the selection stroke to that fruit, updating the React component’s state via a `useState` hook. The visualization uses React with D3’s `scaleOrdinal` for color and radius mapping, and renders each fruit as an SVG `circle` element with a custom `onClick` handler.

Jun 4, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js v5. The code selects an SVG element, appends circles for the face and eyes, rectangles for eyebrows, and an arc path for the mouth using d3.arc(). D3 transitions move the eyebrow group up and down over four-second intervals. Static SVG attributes set positions and colors, while the transition chain animates the transform attribute.

Jun 4, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face with D3.js, showing a yellow circle with eyes, eyebrows, and a mouth. The face is static, but the eyebrows animate by moving up and down using D3's transition system with `attr` transitions over 2000 milliseconds each. The code uses `d3.select` and `d3.append` to construct SVG elements, `d3.arc` to generate the mouth path, and `d3.transition` for the eyebrow animation. The SVG canvas is 960 by 500 pixels, and the face is centered using a group transform.

Jun 4, 2020