Skip to main content
SimilarExport ZIP
100%

d3 time series small multiples

✓ Published0🌍 Public
AAndrew
Last edited Mar 20, 2024
Created on Mar 20, 2024
Forked from HTML Starter

This example visualizes population growth in the top five North American countries from 1990 to 2010 using small multiples, with each of the 15 charts representing a unique country-year combination. It shows the trends and comparisons of population growth rates across these nations. The visualization uses D3 v7 with SVG rendering, employing a color scale from ColorBrewer for country distinction and a legend from Susie Lu’s d3-legend library. The data comes from the Global Development dataset, simplified for clarity. Each small multiple displays a line chart with axes, and a tooltip provides interactive details on hover.

AI-generated description

A time series small multiples, using color scale with color brewer in D3 and legend from Susie Lu

BTW: The data was simplified to help with creating this visualization.

Link to original dataset: https://corgis-edu.github.io/corgis/csv/global_development/

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 line chart

This visualization shows population growth in the United States, Canada, and Mexico from 1890 to 2010, with each country represented by a colored line and gray circles for individual data points. Hovering over a circle displays a tooltip with the country, year, and population growth value. The chart uses d3.line and d3.scaleLinear to generate SVG paths, with data loaded from a simplified CSV derived from the Corgis global development dataset. Interactive mouseover, mousemove, and mouseout events control the tooltip's visibility and content.

AAndrew
83% match
Loading thumbnail…

d3 time series multiline

This example visualizes mobile cellular subscriptions per 100 people from 1990 to 2010 for five North American countries, using a multiline chart to compare trends over time. It relies on D3 v7 with SVG rendering, a linear scale for time, and a color scale from ColorBrewer to distinguish countries. The chart includes a tooltip on mouseover and a legend from the d3-legend library, with data sourced from the Global Development dataset.

AAndrew
83% match
Loading thumbnail…

D3 Example

This line chart visualizes world population trends over time, with each line representing a different country. The data comes from the United Nations Population Estimates and is plotted with population on the y-axis and time on the x-axis. The chart uses D3.js to render an SVG, with a color legend distinguishing countries, and axis labels for "Time" and "Population". The visualization highlights population growth patterns across selected countries from 1950 onward, using a custom tick format that abbreviates large numbers with "B" for billions.

CCurran Kelleher
81% match
Loading thumbnail…

Fork of d3 line chart

A multi-line chart shows population growth rates for the United States, Canada, and Mexico from 1890 to 2010, using data simplified from the CORGIS Global Development dataset. Three colored paths, generated with `d3.line()` and `d3.scaleLinear`, represent each country over time. Hovering over any gray circle reveals a tooltip with the exact country, year, and growth value via mouse events. The chart uses D3 v7 to render an SVG with axes, a legend, and a black background.

Rrobertotienonyaranga@gmail.com
81% match
Loading thumbnail…

Fork of d3 line chart

A multi-line chart shows population growth rates for the United States, Canada, and Mexico from 1890 to 2010, using data simplified from the CORGIS Global Development dataset. Three colored paths, generated with `d3.line()` and `d3.scaleLinear`, represent each country over time. Hovering over any gray circle reveals a tooltip with the exact country, year, and growth value via mouse events. The chart uses D3 v7 to render an SVG with axes, a legend, and a black background.

Rrobertotienonyaranga@gmail.com
81% match
Loading thumbnail…

Fork of d3 line chart

A multi-line chart shows population growth rates for the United States, Canada, and Mexico from 1890 to 2010, using data simplified from the CORGIS Global Development dataset. Three colored paths, generated with `d3.line()` and `d3.scaleLinear`, represent each country over time. Hovering over any gray circle reveals a tooltip with the exact country, year, and growth value via mouse events. The chart uses D3 v7 to render an SVG with axes, a legend, and a black background.

Rrobertotienonyaranga@gmail.com
81% match
Loading thumbnail…

D3 Example

A small multiples line chart shows population growth from 1950 to 2015 for China, India, and the U.S. It uses D3 v3 with SVG, `d3.svg.line`, `d3.time.scale`, and `d3.legend.color`, rendering colored strokes per country. The y-axis uses a custom SI format (B for billions), and data loads from a CSV via `d3.csv`.

Pprincit
80% match
Loading thumbnail…

Fork of d3 line chart

This line chart displays population growth rates for the United States, Canada, and Mexico from 1890 to 2010, using data from the CORGIS Global Development dataset. The visualization plots three colored lines, each representing a country, with gray markers for individual data points. Built with d3.v7, the chart uses d3.line to generate the paths, d3.scaleLinear for the x and y axes, and d3.axisBottom and d3.axisLeft to render the axes. An interactive tooltip appears on mouseover, showing the country, year, and exact growth value.

Aalexis
80% match