Morris Hsu

@whhsu2·2 public vizzes

Customizing Axes

This bar chart displays the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. It shows how to customize D3 axes, including removing tick lines and the domain path, adding an axis label, and formatting population values using `d3.format` with a custom tick formatter that converts G to B. The visualization uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and renders via SVG. Bars are filled with steelblue, and axis labels use custom CSS styling.

Apr 6, 2020

Loading thumbnail…

Let's make a face with D3

This example shows how to construct a simple cartoon face using SVG shapes and D3’s selection methods. The face is drawn from scratch with circles and paths, all styled via CSS classes. The code creates an SVG container and relies on D3 v5 to append and position elements, while the stylesheet defines thick, rounded strokes for facial features. No data is loaded; the visualization purely demonstrates basic SVG drawing with D3’s core API.

Mar 29, 2020