Untitled

100%

✓ Published0🌍 Public

Last edited Sep 30, 2019

Created on Sep 30, 2019

Forked from Melting Data for Multiple Lines

This example visualizes population growth over time for global regions, drawing on UN population estimates (1950–2014) and medium-variant projections (2015–2100). It renders multiline time-series curves using d3.line with curveBasis, scaled by d3.scaleTime and d3.scaleLinear, while a categorical d3.scaleOrdinal with schemeCategory10 assigns region colors. The chart includes axes, gridlines, and a custom color legend built via d3-selection. Data is processed by melting a wide CSV format into tidy rows, filtering for regions only, and concatenating the historical and projected datasets.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This area chart visualizes global population growth over time, with a maroon filled region beneath a smooth curve and labeled axes. The visualization maps years to the x-axis and population to the y-axis, using data from a CSV file. Built with D3 v5, it employs `scaleTime` and `scaleLinear` for scales, `area` with `curveBasis` to generate the path, and `axisBottom` and `axisLeft` for axes. Population values are formatted with `format('.1s')` to display billions.

Lliechtia

89% match

Loading thumbnail…

Untitled

This visualization shows population trends over time for various world regions, using colored lines to represent each region across a timeline from 1950 to 2100. The chart displays the data with a time-scaled x-axis and a linear y-axis for population values. Built with D3 v4, the code utilizes `d3.csv` to load data, `d3.nest` for grouping by region, and `d3.line` to generate the paths. The visualization applies a color legend via a custom `colorLegend` module and incorporates axis labels and gridlines for readability.

XXzou0011

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

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

87% match

Loading thumbnail…

Population time-series

This interactive visualization displays population trends for global regions from 1950 to 2100, using animated line charts that show each region’s growth over time. The data comes from UN population estimates, processed and merged from two CSV files. The visualization is built with React and D3.v5, using d3.line for path generation, d3.scaleTime for the x-axis, and d3.scaleOrdinal with color legends to distinguish regions. The SVG rendering includes axis labels, a chart title, and interactive color legend, with animations applied to legend transitions.

JJorge Emilio Zapata Godoy

87% match

Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population trends over time for global regions, displaying multiple lines on a chart with a color-coded legend. The data is sourced from UN population estimates and projections, spanning from 1950 to 2100. The code uses d3.csv and d3.nest to process and group the data, while d3.line with curveBasis generates the smooth paths. Color is assigned via d3.scaleOrdinal with schemeCategory10, and the chart includes axes rendered with d3.axisBottom and d3.axisLeft, with a custom color legend component for identifying each region.

Yyoyo2050

86% match

Loading thumbnail…

Population time-series

This example shows animated population time-series lines for world regions from 1950 to 2100, ordered by their final population values. The chart uses d3.line, d3.scaleTime, and d3.scaleLinear to render the paths, with a color legend built via d3.scaleOrdinal. Data is loaded from two CSV files and melted into tidy rows using d3.nest and d3.range, with axes formatted by d3.axisBottom and d3.axisLeft. The SVG updates through a transition on the legend circles, while the line paths use CSS mix-blend-mode for overlapping lines.

BB Sundaresan

86% match

Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays population trends over time for various world regions using multiple lines. The chart combines historical estimates from a 2017 UN dataset with medium-variant projections through 2100, showing each region’s population trajectory in a distinct color. The code uses d3.csv to load data, d3.nest to group by region, d3.line with curveBasis for smooth paths, and d3.scaleTime and d3.scaleLinear for axes. A custom colorLegend component renders the categorical scale, while d3.axisLeft and d3.axisBottom create labeled tick marks.

Ffbudwill

86% match