Skip to main content
SimilarExport ZIP
100%

Melting Data for Multiple Lines

✓ Published1🌍 Public
Wwblockchain
Last edited Jan 22, 2020
Created on Jan 22, 2020

This example shows population over time by region, with multiple lines rendered as overlapping paths in a SVG chart. The visualization uses d3.line with curveBasis to smooth the lines, and d3.nest to group data by region, sorting lines by their final value. The data comes from UN population estimates, processed through a custom melt function that transforms wide CSV data into a long format. A color legend is built using d3.scaleOrdinal and schemeCategory10, with axes created via d3.axisLeft and d3.axisBottom.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population over time by region, with multiple line paths drawn in a single SVG chart. The lines are grouped by region name and displayed with a categorical color scale, accompanied by a legend. Data comes from UN population estimates and medium variant projections, melted into tidy format with `d3.csv`. The chart uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.axisLeft`, `d3.axisBottom`, `d3.group`, and `d3.scaleOrdinal` to render axes, lines, and legends with SVG.

HHe Jianfeng
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 example visualizes population over time by region, with multiple lines colored by region and ordered by their final values. The chart uses a time scale for years, a linear scale for population, and an ordinal color scale with a custom legend. It demonstrates data melting by transforming wide-format CSV rows into long-format records via `d3.range` and nested loops, then draws the lines with `d3.line` and `curveBasis`. The tooltip-free SVG rendering relies on D3 v5 APIs, including `d3.nest`, `extent`, `axisLeft`, `axisBottom`, and `d3.format`.

Iip01
94% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays population over time by region, with each line representing a different area and a color legend identifying them. The chart uses d3.csv to load UN population data, which is then processed using d3.nest to group data by region. The code demonstrates a data-wrangling technique called "melting," transforming wide-format data with columns per year into tidy data with year, name, and population fields. Multiple lines are drawn using d3.line and curveBasis, with d3.scaleTime and d3.scaleLinear handling the axes and d3.scaleOrdinal applying colors.

Ssingularity6033
94% match
Loading thumbnail…

Melting Data for Multiple Lines

This example shows population trends over time by region, with each region represented as a separate colored line. The visualization uses D3 v5 to load and process UN population estimates from CSV files, then melts the data into a tidy format using custom logic. Multiple lines are rendered with d3.line and curveBasis, while an ordinal color scale with a legend distinguishes regions. Axes are drawn using d3.axisBottom and d3.axisLeft, and the chart updates based on nested data sorted by final population values.

Jjbruzzo
94% match
Loading thumbnail…

Melting Data for Multiple Lines

This example shows population over time by region for the world, displaying multiple smooth lines on a chart with a color legend to distinguish regions. The data is melted from a wide CSV format into tidy rows, combining historical estimates from 1950 to 2014 with medium-variant projections from 2015 to 2100 from the UN. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, `nest` for grouping by region, and custom axis and legend components. Lines are rendered as SVG paths with a multiply blend mode, and the axis labels use custom formatting for population values.

Ssafdarawan
94% match
Loading thumbnail…

Melting Data for Multiple Lines

This example shows population over time by region for the world, displaying multiple smooth lines on a chart with a color legend to distinguish regions. The data is melted from a wide CSV format into tidy rows, combining historical estimates from 1950 to 2014 with medium-variant projections from 2015 to 2100 from the UN. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, `nest` for grouping by region, and custom axis and legend components. Lines are rendered as SVG paths with a multiply blend mode, and the axis labels use custom formatting for population values.

Ssafdarawan
94% match
Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes population over time by region using multiple smoothed lines, with a color legend identifying each region. The data is loaded from UN population estimate CSVs, then transformed using a custom `melt` function that reshapes wide-format data into long format for D3 line generation. The visualization uses `d3.scaleTime`, `d3.scaleLinear`, `d3.nest`, and precomputed curve paths with `d3.line` and `curveBasis`. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, while a custom legend component manages color-coded circles using `d3.scaleOrdinal` and `schemeCategory10`.

IIsaacwhyuenac
94% match