Skip to main content
Log in
M

Morten Kjølstad Dybo

@mokd·4 public vizzes

Loading thumbnail…

Making a bar chart

This example visualizes temperature readings over time from a CSV file as a line chart with overlaid circles marking each hourly data point. The code uses D3 v5 modules including `scaleTime`, `scaleLinear`, `line`, `axisLeft`, and `axisBottom` to render an SVG graphic. The temperature data is parsed, sorted, and scaled to fit within a 960×500 SVG canvas, with axes generated via D3’s axis components. The chart demonstrates fundamental D3 data-join and DOM manipulation techniques for creating and styling SVG elements.

Nov 16, 2019
Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of population data for municipalities in Akershus, Norway, with circles representing each value. The chart uses D3 v5 to load semi-colon-separated data with `dsv`, sort it, and render it as SVG. It employs `scaleLinear` for the x-axis, `scalePoint` for the y-axis, and `axisBottom`/`axisLeft` for the axes. The circles, filled with steelblue, are positioned using the scales, and a text label for “Akershus” appears in the corner.

Nov 16, 2019
Loading thumbnail…

Let's make a face with D3.js!

A smiling yellow face rendered in SVG uses circles for the eyes and head, rectangles for animated eyebrows, and a path for the mouth. The eyebrows move via chained D3.js transitions, shifting their vertical position over two seconds and then snapping back. The example demonstrates fundamental DOM manipulation using D3.js v5’s `select` and `append` functions, with coordinates calculated from the SVG’s dimensions. The animation runs automatically on page load.

Nov 15, 2019
Loading thumbnail…

Let's make a face with D3.js!

A smiling yellow face rendered in SVG uses circles for the eyes and head, rectangles for animated eyebrows, and a path for the mouth. The eyebrows move via chained D3.js transitions, shifting their vertical position over two seconds and then snapping back. The example demonstrates fundamental DOM manipulation using D3.js v5’s `select` and `append` functions, with coordinates calculated from the SVG’s dimensions. The animation runs automatically on page load.

Nov 15, 2019