Skip to main content
Log in
Z

Zhenxiang Wang

@ZhenxiangWang·4 public vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js, featuring a circular head, two eyes, and an arc-shaped mouth. The face’s eyebrows animate by moving upward and then returning to their original position over two sequential transitions. The visualization uses D3 v5’s `select`, `arc`, and `transition` APIs to manipulate SVG elements directly in the DOM, with the face centered via a translated group and rendered on a 960x500 canvas.

Feb 6, 2020
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js, featuring a circular head, two eyes, and an arc-shaped mouth. The face’s eyebrows animate by moving upward and then returning to their original position over two sequential transitions. The visualization uses D3 v5’s `select`, `arc`, and `transition` APIs to manipulate SVG elements directly in the DOM, with the face centered via a translated group and rendered on a 960x500 canvas.

Feb 6, 2020
Loading thumbnail…

Circles on a Map

This visualization displays the population of each country in 2018 using circles overlaid on a natural Earth map, with circle area proportional to population via a square root scale. Users can pan and zoom the map and hover over countries to see exact population values. Built with D3 v5, it uses `d3.geoPath` and `geoNaturalEarth1` for map rendering, `d3.zoom` for interaction, and `d3.scaleSqrt` for the size legend. Population data is loaded from a CSV file and joined to TopoJSON country boundaries.

Feb 6, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization highlights customization of D3 axes, including tick formatting that converts large numbers into abbreviated forms (e.g., "B" for billion) and removal of default domain lines. It builds on a basic bar chart by adding a custom x-axis label, a title, and styled tick lines with gray strokes. The code uses D3 v5 functions like `axisBottom`, `axisLeft`, `scaleLinear`, and `scaleBand`, rendering to SVG with data loaded from a CSV file.

Feb 5, 2020