Skip to main content
SimilarExport ZIP
100%

Melting data for multiple lines

✓ Published2🌍 Public
AAnShed
Last edited Jul 8, 2020
Created on Jul 7, 2020

This example visualizes population over time for multiple regions using a single chart with multiple lines. It employs a color legend to distinguish regions and a melt operation to reshape the data from wide to long format. The visualization is built with D3 v5, using `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, and `nest`. Data is loaded from CSV files via `d3.csv` and processed with `timeParse`, `range`, and custom functions. The SVG rendering includes axes with gridlines and a title, with interactive sorting of regions by their final population values.

AI-generated description
MIT Licensed

Similar vizzes

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

Melting Data for Multiple Lines

This example shows population trends over time by region, with multiple colored lines in an SVG chart. The data is processed by melting wide-format UN population estimates into tidy long-form rows using `range` and `timeParse`. The visualization uses `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, `nest`, and `axisLeft`/`axisBottom`. A custom color legend displays categorical regions, and lines are sorted by their final population value using `descending`.

Ssafdarawan
93% 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
92% match
Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes population over time by region, displaying multiple trend lines across a Cartesian coordinate system. The chart uses D3’s `nest` and `line` with `curveBasis` to structure and smooth the data, while `scaleTime`, `scaleLinear`, and `scaleOrdinal` manage the axes and color encoding. A color legend, generated by a custom `colorLegend` function, identifies each region. The data comes from UN population estimates and medium-variant projections, processed through a custom `melt` function that reshapes the dataset.

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