Skip to main content
SimilarExport ZIP
100%

Population over Time by Region

✓ Published0🌍 Public
Ssafdarawan
Last edited Jun 13, 2020
Created on Jun 13, 2020

A line chart shows population over time by region, with a vertical marker indicating the currently selected year. A pie chart beside it displays the population distribution across regions for that same year. Hovering over the line chart updates the selected year and refreshes the pie chart. The visualization uses D3 v5 APIs including `d3.nest`, `d3.line`, `d3.scaleTime`, the `d3.pie` layout, and custom legend and chart modules, rendering in SVG. Data comes from UN population estimates and medium-variant projections.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Population over Time by Region

The visualization comprises a line chart and a pie chart showing population trends over time by region, sourced from UN population estimates. The line chart displays population changes from 1950 to 2100, with each region colored distinctively, and includes a vertical line marking a selected year. The pie chart shows the population distribution for that selected year. Hovering over the line chart updates the selection, which synchronizes both charts. The implementation uses D3 v5 with `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `line`, `curveBasis`, `nest`, and custom `colorLegend` and `PieChart` modules, rendering as SVG.

Aala-wahibi
95% match
Loading thumbnail…

Population over Time by Region

This visualization combines a line chart and a pie chart to show population changes over time by region. The line chart displays population trends from 1950 to 2100, with a vertical selector line that updates the pie chart to show the population distribution for the selected year. The pie chart uses `d3.pie()` and `d3.arc()` to render the regional proportions, while the line chart leverages `d3.line()`, `d3.curveBasis()`, and `d3.axisBottom()` for axes. Data comes from UN population estimates and medium-variant projections, processed via `d3.csv()` and `d3.timeParse()`.

AArriannePandaraoan
93% match
Loading thumbnail…

Line Chart

This line chart visualizes world population over time by region, with each region drawn as a distinct colored line on an SVG canvas. The chart uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with curveBasis, and `d3.nest` to group data. Population estimates from 1950–2014 and medium-variant projections from 2015–2100 come from UN datasets loaded via `d3.csv`. A color legend using `d3.scaleOrdinal` maps regions, and a vertical line marks the year 2021, with mouse interaction logging hovered years to the console.

BBKirst3
86% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization shows population trends over time for multiple world regions, with each region represented as a distinct colored line and a legend identifying the regions. A vertical black line marks the currently selected year, and users can move their mouse across the chart to dynamically change that year. The code uses d3.line, d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to render SVG paths, along with d3.nest to group the data by region. Population data comes from UN estimates and medium-variant projections, covering 1950 to 2100.

RRoger Yu-Hsiang Lo
84% match
Loading thumbnail…

Select a Year form Chart

This visualization shows global population trends by region over time, with a movable vertical line that selects a specific year to highlight the corresponding values across all displayed series. Users can hover to change the selected year, updating the line’s position via `d3.mouse` and `scale.invert`. The chart renders multiple region lines using `d3.line` and `curveBasis`, with a color legend generated by the custom `colorLegend` module. Data comes from UN population estimates and medium-variant projections, processed with `d3.csv` and `nest`, and drawn as SVG paths.

Ssongr0
84% match
Loading thumbnail…

Selecting a Year on a Line Chart

This interactive line chart visualizes population trends over time by region, with a vertical black line indicating the currently selected year. Moving the mouse across the chart updates the selected year, repositioning the line and reflecting the change in the visualization. The chart uses d3.scaleTime and d3.scaleLinear to map data, d3.line with curveBasis for the paths, and d3.nest to group data by region. Data comes from UN population estimates and medium variant projections, rendered as an SVG using D3 v5.

Jjons288
84% match
Loading thumbnail…

Population time-series

This visualization shows population trends over time for world regions, with each region's trajectory drawn as a distinct colored line. A color legend identifies the regions, and the chart title clearly labels the relationship between population and year. The visualization uses D3 v5 APIs including `nest` for data grouping, `scaleTime` and `scaleLinear` for axes, and `line` for generating SVG paths. Data comes from UN population estimates and historical datasets processed via Promise loading. The color legend component updates with transitions, while lines use blend modes for overlapping clarity.

Rreo440
84% match
Loading thumbnail…

Selecting a Year on Line Chart

This line chart displays population over time by region, with a vertical line marking the year 2018. The visualization uses D3 v5's scaleTime, scaleLinear, and scaleOrdinal to map temporal, quantitative, and categorical data, respectively. Lines are generated using d3.line with curveBasis smoothing, and a transparent rectangle captures mouse movement to invert x-scale coordinates for interactive exploration. Data is sourced from UN population estimates and processed via d3.csv and d3.range.

Eedxiao97
83% match