TITRE

100%

✓ Published0🌍 Public

Last edited Mar 22, 2020

Created on Mar 22, 2020

Forked from Population over Time by Region

A linked visualization combines a multi-line chart and a pie chart to explore global population trends from 1950 to 2100. Hovering over the line chart selects a year, updating the pie chart to display the population distribution across regions for that year. The line chart, built with d3.line and axis components, shows regional populations over time, while the pie chart uses d3.pie and d3.arc. A color legend links both views. Data comes from the UN Population Estimates, split between historical 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

85% 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

84% match

Loading thumbnail…

Population over Time by Region

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.

Ssafdarawan

81% match

Loading thumbnail…

Population time-series

This visualization displays population trends for global regions from 1950 to 2100, using animated line charts that color-code each region via a categorical scale. The data, sourced from UN population estimates, is processed through a custom melt function and rendered as SVG with D3 v5, React, and the `d3.axisBottom`, `d3.axisLeft`, and `d3.line` APIs. A color legend with animated transitions clarifies the mapping, while styled tick lines and labels enhance readability.

MManoj Betawar

81% match

Loading thumbnail…

Selecting a year on a line chart

This visualization shows global population trends by region from 1950 to 2100 as a multi-line chart. Users can hover over the chart to select a specific year, which triggers a vertical guide line and updates the highlighted data point. The implementation uses D3 v5 with SVG rendering, leveraging `d3.nest` for data aggregation and `d3.scaleTime` for the time axis. Population data comes from UN estimates and medium-variant projections, processed through a custom melt function, while the interactive year selection relies on mouse events and `d3.mouse` positioning.

TThomas Seberechts

81% match

Loading thumbnail…

Line chart with multiple lines

This line chart displays population trends over time for global regions, with each region represented by a colored line and a legend identifying them. The data spans from 1950 to 2100, combining UN population estimates and medium-variant projections processed through a custom melt function. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with schemeCategory10, while d3.line with curveBasis generates the smoothed paths. Axis labels, grid lines, and a title are rendered via d3.axisBottom, d3.axisLeft, and SVG text elements.

LLongYuu

81% match

Loading thumbnail…

Selecting a Year on a Line Chart

This line chart displays global population trends for regions from 1950 to 2100, with a movable vertical line that lets the user select a specific year. The chart highlights population values for that chosen year via circles on each regional line, with a color legend identifying each region. Built with D3 v5, the visualization uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG chart. Data comes from UN population estimates and medium variant projections, loaded via `csv` and processed through `nest` and `melt` functions. Hover interactions are handled by the `mouse` callback on an invisible rectangle.

FflexKeks

81% 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

80% match