blakeCS

@blakeCS·2 public vizzes

Making a Bar Chart

A horizontal bar chart displays the populations of the ten most populous countries, with bars rendered as steelblue rectangles. The chart uses D3 v5's `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, with `axisLeft` and `axisBottom` generating the tick labels. Population values from the CSV are multiplied by 1,000 during data loading. The SVG output is positioned using margin translations, and bars are appended to a group element with heights determined by the bandwidth method.

Jan 31, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js using SVG shapes, including circles for the eyes and an arc for the mouth. The eyebrows, rendered as rectangles, animate up and down in a repeating two-second cycle via chained `transition()` calls. The visualization demonstrates fundamental DOM manipulation with D3 selections and the `arc` generator, using a static dataset defined inline. The face is centered on a 960×500 SVG canvas with the body constrained to no margins or overflow.

Jan 30, 2020