Shaun Kee

@shaun-kee·2 public vizzes

Making a bar chart

This example shows a horizontal bar chart of the ten most populous countries, using circles scaled by population size. It loads data from a CSV file and renders SVG elements with D3 v5’s `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` APIs. The chart includes custom tick formatting with `format('.3s')` to abbreviate population values and uses a margin-based layout with grid lines.

Aug 5, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes. The code uses `d3.select` and `d3.append` to create concentric circles for the face and eyes, alongside SVG `rect` elements for the eyebrows. The eyebrows animate using chained `transition().duration()` calls, moving them up and down over two-second intervals. A mouth is drawn as a path using the `d3.arc` generator with specified inner and outer radii and angular range. The visualization runs as a self-contained HTML page with an embedded YouTube video for reference.

Aug 5, 2019