Aaron Goebel

@goaaron·11 public vizzes

Black canvas

A full-screen black rectangle fills the browser viewport, rendered as an SVG `<rect>` element. The example demonstrates a minimal setup where the page is fixed to the viewport dimensions and the rectangle is sized to match the window’s client height and width using D3’s `select` and `attr` methods. The code uses D3 v5 to append the rectangle to the SVG, with no additional data or interaction. The rectangle’s fill color is not specified, leaving the default black appearance from the page background.

Apr 13, 2020

Loading thumbnail…

Let's make a map with D3.js!

This example uses D3.js to render an interactive world map from TopoJSON and TSV data loaded from the world-atlas package. Countries are drawn as SVG paths using the d3.geoNaturalEarth1 projection and d3.geoPath, with hover effects changing their fill color. The visualization incorporates d3.zoom to enable pan and zoom transformations on the map group, while a sphere background is rendered from a GeoJSON Sphere object. Country names are joined to features via ISO numeric codes and displayed as SVG title tooltips.

Apr 13, 2020

Loading thumbnail…

Bowl of Fruit - CLick to select

This interactive D3.js example displays a bowl of fruit as colored circles, where apples render in red and lemons in yellow, with size encoding fruit type. Users can click or hover over a fruit to select it, which adds a black outline around the chosen circle. The visualization uses D3's ordinal scales for color and radius mapping, and animates circle transitions with the `.transition()` API. Data changes over time, automatically removing fruits and swapping an apple for a lemon, demonstrating dynamic updates with enter, merge, and exit states in SVG.

Apr 13, 2020

Loading thumbnail…

Bowl of Fruit - General update pattern

This example demonstrates the general update pattern in D3.js, showing how a bowl of fruit changes as apples are eaten or transformed into lemons over time. A sequence of timed events triggers data updates, and the visualization transitions between three scenarios: removing an apple, changing one apple to a lemon, and filtering out another apple. The code uses D3 v5 with `selectAll` and `data` joins to handle enter, update, and exit selections, plus `scaleOrdinal` for color and radius mappings. SVG circles and text elements render each fruit based on its type.

Apr 12, 2020

Loading thumbnail…

BOWL OF FRUIT

Five circles representing fruit sit in a row, initially all apples rendered in red. After a second, the last fruit is removed, and a second later, the third fruit changes into a yellow lemon. The visualization demonstrates D3’s declarative update patterns using `selectAll`, `enter`, `merge`, and `exit` operations on SVG circles, with ordinal scales mapping fruit type to fill color and radius.

Apr 12, 2020

Loading thumbnail…

World population by year 2014

An area chart displays world population from 1950 to 2015, using a smooth basis curve to fill the space beneath the line. The visualization loads data from a CSV file and renders it with D3.js v5, using `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `area` with `curveBasis` for the shaded region. Grid lines and axis labels are drawn via `axisLeft` and `axisBottom`. The title and axis texts are styled using CSS classes.

Apr 12, 2020

Loading thumbnail…

Temperature in SF

This area chart displays temperature readings in San Francisco over time, with a smooth curve filling the space between the baseline and the temperature values. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `area` with `curveBasis`, and axes with tick marks and labels. Data is loaded as CSV from a remote dataset and parsed into JavaScript `Date` and numeric values. The SVG rendering includes styled grid lines, axis labels, and a title, all formatted with custom CSS classes.

Apr 12, 2020

Loading thumbnail…

Scatter plot

This scatter plot displays the population of the top 10 most populous countries, using circle size and position to encode values from data.csv. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the population axis and `scalePoint` for the country axis. The code includes `axisBottom` and `axisLeft` to draw gridlines, with custom tick formatting that abbreviates large numbers (e.g., converting billions to "B"). Population values are multiplied by 1,000 during data loading.

Apr 12, 2020

Loading thumbnail…

Scatter plot

This scatter plot displays the population of the top 10 most populous countries, using a linear scale for population on the x-axis and a point scale for country names on the y-axis. The visualization renders circles with a fixed radius of 15 pixels, colored steelblue via CSS, and includes axis labels and a title. Built with d3.v5, it employs `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to load data from a CSV file and generate SVG ticks. Population values are multiplied by 1000, and tick labels are formatted with abbreviations (e.g., "1.42B").

Apr 12, 2020

Loading thumbnail…

Customizing axes

This bar chart displays the populations of the top ten most populous countries, with data from the World Population Prospects 2017. The chart uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG visualization. The horizontal axis is customized with a formatter that converts raw numbers to abbreviated values using `format('.3s')`, and grid lines are removed from both axes by filtering out the `.domain` and `.tick line` elements. Population data is loaded from a CSV file and multiplied by 1000 before rendering.

Apr 11, 2020

Loading thumbnail…

Making a bar chart

A bar chart displays the ten most populous countries, ranked by population from China down to Mexico. The chart uses a horizontal bar layout with population values scaled along the x-axis and country names on the y-axis. Built with D3 v5, the visualization loads data from a local CSV file and renders as SVG. The code employs `scaleLinear` and `scaleBand` for the axes, with `axisLeft` and `axisBottom` to generate their ticks. Bar rectangles are filled with a steel blue color via CSS.

Apr 11, 2020