rychenf1

@rychenf1·3 public vizzes

Making a bar chart

This example demonstrates how to build a horizontal bar chart showing population figures for ten countries, with population values scaled by a factor of one thousand. The visualization uses D3 v5 to load CSV data, create linear and band scales, and render SVG rectangles with axes. Country names appear on the y-axis via `axisLeft`, while population values are displayed on the x-axis using `axisBottom`. The chart is styled with steelblue bars and custom font sizing through external CSS.

Nov 15, 2019

Loading thumbnail…

Making a bar chart

This example demonstrates a horizontal bar chart visualizing population data for ten countries, with each bar’s length proportional to population size and country names listed on the y-axis. The visualization uses D3 v5’s `csv` loader to import data, `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` to render tick marks. The SVG-based rendering applies a steelblue fill to rectangles, with data values converted from thousands to absolute numbers.

Nov 15, 2019

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how to build an animated face using D3.js, starting with a yellow circle for the head and adding eyes, eyebrows, and a mouth via SVG shapes like circles, rectangles, and a path. The code uses `d3.select`, `d3.arc`, and chained `transition` calls to animate the eyebrows moving up and down over time. All elements are positioned relative to a centered group, and the face responds to the viewBox size defined in the HTML.

Nov 15, 2019