divinebooger

@divinebooger·3 public vizzes

Axes

A horizontal bar chart displays population figures for ten countries, using steel-blue bars. The visualization renders as SVG within a React framework, utilizing D3 v5 APIs like `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. Population data from `data.csv` is loaded via `csv`, multiplied by 1000, and formatted on the x-axis using `format` with a custom tick label that converts billions from gigabytes. The chart positions bars using a band scale for countries and a linear scale for population values.

Jun 15, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart visualizes the population of ten countries, with each bar’s length representing population in thousands. The example demonstrates a basic D3 v5 workflow within a React framework, using SVG rendering. It employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` to generate the axes, with data loaded from a CSV file.

Jun 15, 2020

Loading thumbnail…

Face with D3.js

This example shows a simple, stylized face built from SVG shapes. A yellow circle forms the head, with red circles for eyes, black rectangles for eyebrows, and a black arc path for the mouth. The code uses the D3.js v5 `select` and `arc` APIs within a React framework, and animates the eyebrows using chained `transition()` calls with a two-second duration to shift them upward and then back down.

Jun 15, 2020