Melting data for multiple lines

100%

Melting data for multiple lines

✓ Published0🌍 Public

Last edited Jul 21, 2021

Created on Jul 21, 2021

Forked from Line Chart with multiple lines

This example displays population trends over time for multiple world regions as overlapping curved lines, with a color legend identifying each region and a vertical marker highlighting the year 2018. The visualization uses D3 v5’s `nest()` to group data by region, `scaleTime` and `scaleLinear` for axes, and `line` with `curveBasis` to generate smooth paths. Data is loaded from CSV files via `csv()` and melted from wide to long format, while `axisBottom` and `axisLeft` render the grid and labels.

AI-generated description

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Melting Data for Multiple Lines

Ssafdarawan

92% match

Loading thumbnail…

Melting Data for multiple lines

This visualization shows world population estimates for different regions over time as multiple colored lines. It uses a line chart with an ordinal color scale to distinguish each region. The example loads data from CSV files, nests it by region using `d3.nest`, and renders smooth curves with `d3.line` and `curveBasis`. It also includes a custom color legend component and styled axes with grid lines.

AAjit Singh

92% match

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

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

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

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

91% match

Loading thumbnail…

Melting Data for Multiple Lines

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.

Wwblockchain

91% match