Simon Pettersson

Blank Canvas

A blank, full-screen SVG rectangle with rounded corners serves as the canvas. The example demonstrates a minimal setup using D3 v5, where the `select` function targets the SVG and sets its dimensions to match the viewport. It appends a single `rect` element with a rounded corner radius, filling the entire space. The code highlights basic SVG rendering and dynamic sizing based on the browser window.

Feb 15, 2022

Map with interaction

This example shows an interactive map of world countries rendered as SVG paths using the Natural Earth projection. Users can pan and zoom the map via d3.zoom, which applies a transform to the grouped map elements. The map loads GeoJSON data from the world-atlas TopoJSON file, converts it with topojson.feature, and draws each country using d3.geoPath. Countries fill light green and turn red on hover, with the surrounding sphere rendered in blue. The visualization demonstrates basic geographic mapping with interactive zooming and hover feedback.

Let's make a map with D3.js!

This example shows a world map rendered as a natural Earth projection, with each country filled in light green and the ocean as a blue sphere. The visualization uses D3 v5’s data-join to bind GeoJSON country features derived from the TopoJSON World Atlas dataset via `topojson.feature`. A `d3.geoNaturalEarth1` projection and `d3.geoPath` generator draw the SVG paths, while a separate path outlines the full sphere background. The map is static, with no interaction or animation.

Bowl of Fruit - Hover to select

Five pieces of fruit sit in a row on an SVG canvas, rendered as colored circles whose radius and fill depend on fruit type via `d3.scaleOrdinal`. Hovering a circle triggers a `mouseover` event that calls `setSelectedFruit`, updating a black stroke to highlight the selection. Animations use `selection.transition()` with a 1000-millisecond duration to smoothly move, resize, or remove circles when the data array changes over time. The code imports `scaleOrdinal` from D3 v5 and uses a data join with keyed functions to manage enter, update, and exit selections.

Bowl of Fruit - Click to select

This example presents a bowl of fruit where apples and lemons animate their size and color as the dataset updates. A user can click any fruit to select it, which adds a black stroke. The D3 v5 code uses `scaleOrdinal` for color and radius mappings, and applies transitions to smoothly animate entering, exiting, and resizing circles. Array mutations (removing or altering fruit) trigger re-renders, demonstrating dynamic data binding with click-driven selection.

Bowl of Fruit - General Update Pattern Special Cases

This visualization demonstrates special cases of D3’s General Update Pattern for a dynamic “bowl of fruit.” It shows three sequential state changes—a fruit disappearing, one changing its type, and another being removed—while each circle’s radius and color scale ordinally by fruit type, and the bowl is a static rectangle. Using D3 v5’s `selectAll`, `.enter()`, `.merge()`, and `.exit()`, the code updates SVG groups and their circle/text children in place, with `scaleOrdinal` mapping apple and lemon to distinct colors and sizes. The SVG renders at 960×500, and the script drives changes via `setTimeout` callbacks.

Bowl of Fruit - General Update Pattern

This example demonstrates the General Update Pattern in D3.js by animating a bowl of fruit represented as colored circles. Apples appear as red circles and lemons as yellow, each transitioning smoothly to new positions and sizes when the dataset changes over time. The visualization uses D3 v5’s selection.enter(), merge(), and exit() APIs to handle insertions, updates, and removals, with a 1000-millisecond transition on circle attributes. The underlying data is a simple array of fruit objects, modified at timed intervals to show dynamic updates.

Jan 20, 2022

Crude Oil Developmental Wells - Area Chart

This area chart displays the number of crude oil experimental wells drilled annually in the U.S. from 1949 to 2010, using data from the U.S. Energy Information Administration. It shows a dramatic spike in drilling during the early 1980s followed by a decline and subsequent fluctuations. Built with D3.js v5, the visualization uses `scaleTime`, `scaleLinear`, and `area` with `curveBasis` to render a smooth SVG path, with axes drawn using `axisLeft` and `axisBottom`.

Jan 20, 2022

World Population Area Chart

This area chart displays the world population by year since 1950, using data from the UN Population dataset. The visualization presents population growth as a smooth, maroon filled area that rises steadily over time. Built with D3 v5, it employs `scaleTime` and `scaleLinear` for the axes, `area` with `curveBasis` for the smooth path, and `axisLeft` and `axisBottom` for gridlines and labels. The SVG rendering includes custom tick formatting that converts billions to "B".

Nov 10, 2020

Temperatures in San Fransisco Area Chart

A week of temperature readings from San Francisco appears as a smooth, maroon area chart, with a time-based x-axis and a linear temperature y-axis in degrees Celsius. The visualization uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to create the filled path. Data is loaded from a CSV file via the `csv` method, with axes and labels styled using custom CSS. The chart displays the temperature trend over the week with a clear title and grid lines.

Temperatures in San Fransisco Line Chart

This line chart displays one week of temperature data in degrees Celsius for San Francisco, sourced from Data Canvas’s Sense Your City dataset. It plots timestamps on the x-axis and temperature on the y-axis, using a smooth curve rendered as an SVG path. The visualization is built with D3 v5, leveraging `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis`. Grid lines are drawn via `tickSize`, and maroon strokes highlight the temperature trend, with labeled axes for time and temperature.

Temperatures in San Fransisco Scatter Plot

This scatter plot displays one week of temperature readings in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. It uses d3.scaleTime and d3.scaleLinear to map the data, while d3.axisBottom and d3.axisLeft render the labeled axes with grid lines. The temperature data originates from the Data Canvas - Sense Your City dataset and is loaded via d3.csv. Each temperature observation is represented as a steelblue circle, and the visualization is rendered as SVG within a fixed 960 by 500 pixel viewport.

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleLinear` for both axes and `axisBottom` and `axisLeft` to generate tick marks. Each car is represented as a red, semi-transparent circle positioned using the `cx` and `cy` attributes, with axis labels and a title included. The data is loaded as CSV and parsed into numeric values before rendering.

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the population axis and `scalePoint` for country categories. D3 axes are customized with tick formatting that converts numbers to abbreviated units and grid lines extending across the chart. The code reads data from a CSV file and multiplies population values by 1,000 to reflect actual figures.

Making a bar chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects 2017. It uses D3 v5 to load the data via `d3.csv` and renders bars as SVG rectangles. The visualization demonstrates customized axes, including a formatted x-axis that abbreviates large numbers and removes gridlines, while the y-axis hides its line and tick marks. The chart also annotates its title and axis label directly within the SVG.