Skip to main content
SimilarExport ZIP
100%

Melting Data for Multiple Lines

✓ Published0🌍 Public
Mmaru25-alt
Last edited Jun 3, 2020
Created on Jun 3, 2020

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.

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

Melting Data for Multiple Lines

This example shows population over time by region as multiple smoothed lines, using a color legend to distinguish regions. The data is melted from wide to long format in `loadAndProcessData`, combining UN population estimates (1950–2014) with medium-variant projections (2015–2100). D3 v5 APIs include `d3.nest`, `d3.line` with `curveBasis`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal`. A custom `colorLegend` function renders SVG legends, while axes use `d3.axisBottom` and `d3.axisLeft` with tick formatting via `d3.format`.

Ssriramvsharma
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
Loading thumbnail…

Melting Data for Multiple Lines

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.

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