d3 time series multiline

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.

83% match

d3 scatterplot qualitative

This scatterplot visualizes the relationship between urban population percent growth and mobile cellular subscriptions per 100 people across five North American countries. The visualization uses a qualitative color scale from ColorBrewer to distinguish each country, with data points rendered as semi-transparent circles. The chart employs d3.csv to load data, d3.scaleLinear for both axes, and d3-legend to create the categorical legend. The simplified dataset comes from the Corgis Global Development collection, and the SVG rendering is built entirely with D3 v7.

80% match

d3 bubble chart

A bubble chart visualizes the relationship between urban population growth and total mobile cellular subscriptions for the US, Canada, and Mexico, with each bubble’s radius encoding subscriptions per 100 people. The D3 v7 code loads CSV data, filters to three North American countries, and uses a log-scaled y-axis with d3.scaleLog. Circles are rendered as SVG elements with tooltips, using d3.axisBottom and d3.axisLeft for axes. Data comes from the Global Development dataset hosted on GitHub.

79% match

Mobile Cellular Subscriptions in United States

This visualization displays the growth of mobile cellular subscriptions in the United States from 1980 to 2013, measured as subscriptions per 100 people. A single red line chart traces the rising trend over time, with axes labeled for year and subscription count. Built with D3 v4, the code uses `d3.scaleLinear` for scaling, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.line` with `d3.curveBasis` for the line rendering. The SVG output is responsive to window resizing, and the data comes from Our World in Data, filtered to the United States.

QQ-Zhao

78% match

d3 line chart (5 lines)

This line chart shows life expectancy growth from 1990 to 2010 for five North American countries, using colorbrewer’s Accent palette to distinguish each country. Built with D3 v7, the visualization draws five separate line paths using `d3.line()`, with gray circles marking individual yearly data points. The chart uses linear scales for both axes, with an ordinal color scale for the legend. The data is loaded from a CSV file via `d3.csv()` and simplified from the original global development dataset. The black background and white labels create high contrast, while the legend is added using the d3-legend plugin.

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.

Rrobertotienonyaranga@gmail.com

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

Fork of d3 line chart