Simon Fei

@simonfei123·3 public vizzes

Customizing Axes

This bar chart shows the populations of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It focuses on customizing D3 axes, including a left axis with removed ticks and domain, and a bottom axis with tick labels formatted in abbreviated units (e.g., "1.4B" for billions). The code uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, d3.axisBottom, and d3.format to render SVG elements, with custom tick sizes, label text, and styling for improved readability.

Nov 2, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with D3.js that animates its eyebrows in a continuous up-and-down motion. The face is rendered as SVG elements, including circles for the eyes and an arc-generated path for the mouth, all positioned within a central group. Using D3 selections and the `transition().duration()` method, the eyebrows—drawn as rectangles—move in a two-step sequence that repeats once. The code imports `select` and `arc` from the D3 v5 library to create the shapes.

Nov 2, 2019

Loading thumbnail…

Responding to Resize

This example demonstrates a responsive SVG visualization that adapts to its container’s size. It uses CSS to make a chart div fill the viewport, then extracts the computed `clientWidth` and `clientHeight` in a `redraw` function to dynamically set the SVG’s width and height attributes. The code draws two green crossed lines, creating an X, with a thick semi-transparent stroke. A window `resize` event listener triggers `redraw` whenever the browser dimensions change, ensuring the visualization always matches the available space. The implementation relies on D3 v5’s `select` and data-join methods for updating the lines.

Nov 2, 2019