Skip to main content
SimilarExport ZIP
100%

Melting Data for Multiple Lines

✓ Published1🌍 Public
Ccornshoots
Last edited Mar 29, 2021
Created on Mar 29, 2021

This visualization shows how regional populations change over time from 1950 to 2100, with each region drawn as a smooth multi-line path using d3.line with curveBasis. The data comes from UN population estimates, processed by melting wide-format CSV files into tidy long-form data. A color legend using d3.scaleOrdinal with schemeCategory10 identifies each region, while axes are generated with d3.axisLeft and d3.axisBottom with custom tick formatting. The code demonstrates key d3 patterns including nested data grouping via d3.nest and reusable legend components.

AI-generated description
MIT Licensed

Similar vizzes

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 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
95% match
Loading thumbnail…

Melting Data for Multiple Lines

This example shows population over time by region as multiple lines, with regions sorted by their final population and a color legend on the right. The visualization uses d3.line with curveBasis to generate smooth paths, d3.nest to group data by region, and d3.scaleOrdinal with schemeCategory10 for colors. Data is melted from wide UN population CSV files covering 1950–2100, combining estimates and medium-variant projections.

Rrosyprincess
95% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population trends over time for world regions from 1950 to 2100, displayed as multiple smoothed line paths colored by region. The code uses D3 v5 with `d3.nest` to group data by region, `d3.line` with `curveBasis` for smoothing, and `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` for axes and color mapping. Data is melted from wide UN population CSV files using a custom `melt` function that reshapes yearly columns into long format, combining estimates and medium-variant projections.

CCurran Kelleher
95% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population trends over time for various global regions, with each region represented by a colored line and a corresponding legend. The data comes from UN population estimates and projections, spanning 1950 to 2100. Built with D3 v5, the code melts wide-format CSV data into tidy rows using a custom function before applying scales, axes, and a line generator with curveBasis interpolation. Regions are sorted by their final population value and colored using d3.scaleOrdinal with schemeCategory10.

HHasideluxe
95% match
Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes population over time by region, showing six major world regions as distinct colored lines from 1950 to 2100. The chart uses a line generator with curveBasis for smooth paths, while a color legend identifies each region. The code melts wide-format UN population data into tidy rows, combining estimates and medium-variant projections from CSV files. It employs d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.nest, and d3.axisBottom/axisLeft, rendering as SVG with custom tick formatting for abbreviated population values.

Ppplomith
95% 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
95% 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
95% match