Skip to main content
SimilarExport ZIP
100%

Melting Data for Multiple Lines

✓ Published2🌍 Public
Yyoyo2050
Last edited Sep 28, 2019
Created on Sep 28, 2019

This example visualizes population over time by region, showing multiple lines that trace changes from 1950 to 2100. It uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales. The code melts wide-format UN population data into tidy rows using a custom `melt` function, then nests it with `d3.nest()` to generate paths via `d3.line()`. A color legend and gridlines are added, with data sourced from UN population estimates and medium-variant projections.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes population over time by region using multiple smoothed lines, with a color legend and axis labels. It relies on D3 v5 APIs including `nest()`, `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `line()`, rendering with SVG. Data is melted from wide to long format using a custom function, combining UN population estimates (1950–2014) with medium-variant projections (2015–2100) loaded via `csv`. Lines are drawn with `curveBasis` and sorted by final population value.

Mmaru25-alt
95% match
Loading thumbnail…

Melting Data Multiple Lines

The visualization shows population over time by region as multiple smoothed lines, with a color legend and axis labels. It uses D3 v5 APIs including `nest()` for grouping, `line()` with `curveBasis` for path generation, `scaleTime` and `scaleLinear` for axes, and `scaleOrdinal` with `schemeCategory10` for colors. Data is melted from UN population estimates and medium variant CSV files, spanning 1950 to 2100, rendered as SVG paths with multiply blend modes.

CCarloWK1202
95% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population over time by region, with multiple lines representing different areas across a time series from 1950 to 2100. The chart displays data from UN population estimates and medium variant projections, processed through a melting technique that converts wide-format data into long format using `d3.csv`, `d3.timeParse`, and `d3.range`. The visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.nest` to group data by region, and `d3.line` with `curveBasis` for smooth paths. A color legend is implemented via a custom `colorLegend` component using `d3.scaleOrdinal` with `schemeCategory10`.

KKevinw97
95% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population over time by region, with multiple colored lines tracing each region’s trajectory from 1950 to 2100. The chart uses a time scale for the x-axis, a linear scale for population, and an ordinal color scale with a custom legend. D3’s `nest()` and `scaleOrdinal` group and color the series, while `d3.line` with `curveBasis` smooths the paths. Data comes from UN population estimates and medium-variant projections, melted into a tidy format for plotting as SVG.

NNeepaB
94% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population over time by region, with multiple smoothed lines drawn from 1950 to 2100 using a basis curve. The code melts wide-format UN population data into tidy rows via a custom `melt` function, then uses `d3.nest()` to group by region and `d3.scaleOrdinal` with `schemeCategory10` for colors. A color legend, axis labels, and gridlines are rendered in SVG. Data merges two CSV sources for estimates and medium-variant projections.

Rrichad97
94% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population trends over time for regions, displaying multiple lines that trace changes from 1950 to 2100. The data is sourced from UN population estimates and medium variant projections, processed through a melting operation that converts wide-format data into long format. The chart uses D3.js v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis` for smooth paths, and `nest` for grouping by region. An ordinal color scale with `schemeCategory10` assigns colors, while a custom legend shows region names.

Ssteveaigbe
94% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays population over time by region, with multiple colored lines representing different world regions from 1950 to 2100. The chart uses D3 v5’s `nest()` to group data by region, `scaleTime` and `scaleLinear` for axes, and `line` with `curveBasis` to generate smooth paths. Data comes from UN population estimates and medium variant projections, processed by melting wide-format CSV data into tidy long format. A custom `colorLegend` function renders the categorical color scale, and the visualization includes gridlines, axis labels, and a title.

MMounikaBeerelly
94% match
Loading thumbnail…

Melting data for multiple lines

This example visualizes population trends over time for multiple regions, displaying separate lines for each region from 1950 to 2100. The data is sourced from UN population estimates and is processed by reshaping wide-format CSV data into a tidy format using custom functions. The visualization uses D3 v5 with SVG rendering, employing `d3.line` with curve interpolation, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.nest` to group data by region. A color legend is rendered using a custom function that utilizes `d3.scaleOrdinal` with `d3.schemeCategory10`.

MMatthiasVanCampen
94% match