Skip to main content
Log in
A

Andy Zhang

@UnholyCucumber·8 public vizzes

Loading thumbnail…

Sine Wave

This visualization displays a sine wave rendered as an SVG path. The wave is generated using D3.js version 5, with the `d3.line` generator and `d3.scaleLinear` for mapping data points to screen coordinates. The animation updates the wave’s phase over time using `d3.interval`. The example demonstrates how to build interactive, time-based data visualizations with D3’s core modules, including axis creation via `d3.axisBottom` and `d3.axisLeft` for reference lines.

Oct 16, 2020
Loading thumbnail…

D3 practice

A single row of six vertical bars displays categorical values from a fixed array. The bar heights correspond to the numeric data, and each bar is positioned with a uniform width and small spacing between bars. The visualization is built with D3 v5’s selection and `.data()` methods, appending SVG `rect` elements to an `<svg>` element in a React-free HTML page. The chart’s dimensions and bar positions are explicitly set, while the CSS removes page scrolling by positioning the body absolutely.

Oct 16, 2020
Loading thumbnail…

Bowl of Fruit - General Update Pattern

This is a general update pattern example built with D3 v5 and the React framework, rendered as SVG. It shows a row of five apples that are drawn as circles, with a single fruit (the middle one) changing from an apple to a lemon after a one-second delay. The code uses D3's `select`, `scaleOrdinal`, and `range` APIs to map fruit types to colors and radii, and it demonstrates the enter, merge, and exit lifecycle for updating SVG circle elements.

Oct 13, 2020
Loading thumbnail…

Scatter Plot

This example visualizes the relationship between horsepower and weight for cars, using a scatter plot where each circle represents a vehicle. The x-axis maps weight and the y-axis maps horsepower, with axis labels and a title displayed prominently. The code loads the auto-mpg dataset via `d3.csv`, parses numeric fields, and renders the plot using `d3.scaleLinear` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and SVG circles. Axis ticks are styled with `d3.format` to abbreviate large numbers, and grid lines are generated via tick sizes.

Oct 12, 2020
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with circles positioned along a linear x-axis for population and a point scale y-axis for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` within an SVG rendered in React. Population values are loaded from a CSV file and formatted in billions, with gridlines extending across the plot. The chart includes a title and axis label, styled via CSS.

Oct 12, 2020
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top 10 most populous countries, with population in millions on the x-axis and country names on the y-axis. The example highlights customized axes: the y-axis removes its domain and tick lines, while the x-axis uses a custom tick format that converts values from 'G' to 'B' for billions. D3's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` are used, with data loaded from a CSV file.

Oct 12, 2020
Loading thumbnail…

HTML Cars Report

This example renders a large yellow circle as a face with two eyes and a curved mouth, all drawn in SVG. The eyebrows animate upward and downward over two seconds each, creating a simple, expressive motion. The visualization uses D3 v5’s selection and transition APIs, along with the `arc` generator for the mouth path, all within a React framework. The code imports `select` and `arc` from D3 and manipulates SVG attributes directly, with the animation driven by chained `transition().duration()` calls.

Oct 12, 2020
Loading thumbnail…

HTML Cars Report

This example renders a large yellow circle as a face with two eyes and a curved mouth, all drawn in SVG. The eyebrows animate upward and downward over two seconds each, creating a simple, expressive motion. The visualization uses D3 v5’s selection and transition APIs, along with the `arc` generator for the mouth path, all within a React framework. The code imports `select` and `arc` from D3 and manipulates SVG attributes directly, with the animation driven by chained `transition().duration()` calls.

Oct 10, 2020