Skip to main content
SimilarExport ZIP
100%

d3 scatterplot matrix

✓ Published0🌍 Public
AAndrew
Last edited Feb 27, 2024
Created on Feb 27, 2024
Forked from HTML Starter

This scatterplot matrix visualizes North American population-health indicators, comparing fertility rate, life expectancy, and population growth across the United States, Canada, and Mexico. Each of the nine charts plots one variable against another, with data points colored by country using a d3.scaleOrdinal color scale and a legend rendered in SVG. The code loads data from a CSV file via d3.csv, filters incomplete records, and uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.extent to build axes and scale the plots.

AI-generated description

A scatterplot matrix in D3

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
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
79% 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
78% 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
78% 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
78% match
Loading thumbnail…

d3 time series small multiples

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.

AAndrew
78% match
Loading thumbnail…

fresh block

This example visualizes global health and economic trends using a Gapminder-style scatterplot. Each circle represents a country, positioned by life expectancy (x-axis) and fertility rate (y-axis), with circle size encoding population and color representing geographic region. The visualization animates through years 1964 to 2013, showing how countries move across the chart as their metrics evolve. The data, loaded from a CSV, includes fields for country, year, fertility, life expectancy, population, child mortality, and GDP. Using D3 v5 and SVG rendering, the chart emphasizes the relationship between health outcomes and economic development over time, with a transition effect revealing changing distributions across decades. The visualization is minimal and functional, with axes labeling life expectancy and fertility, and a legend for regions.

JJuanma-GP
76% match
Loading thumbnail…

d3 Scatter Plot

This example visualizes the population of the ten most populous countries as a scatter plot. It uses D3 v5 to load a CSV file and scales, with `scaleLinear` mapping population to the x-axis and `scalePoint` mapping country names along the y-axis. Circles represent each country, with tick marks and labels styled via CSS. The SVG-based chart renders axes with `axisBottom` and `axisLeft`, and uses text elements to label the chart and its population axis.

JJohnPaulPagelerJr
76% match