Brad Johnson

@brad-j·2 public vizzes

Making a Bar Chart

This example shows the population of ten countries as horizontal bars, with bar length representing population and each bar labeled by country name. It uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, loading data from an external CSV file with d3.csv. The SVG rectangles are appended and sized directly through D3’s data join, with population values converted from thousands to raw counts before rendering.

Jan 17, 2020

Loading thumbnail…

Hello

This example renders a cheerful yellow face with eyes, eyebrows, and a mouth as animated SVG shapes. The face is centered and drawn using D3 v5 primitives like `circle`, `rect`, and `arc`, with the eyebrows moving through a sequence of D3 transitions. The code imports `select` and `arc` from D3 and manipulates SVG attributes directly, showcasing a simple, playful animation built with React and D3’s SVG rendering.

Jan 17, 2020