Skip to main content
SimilarExport ZIP
100%

Melting Data for Multiple Lines

✓ Published0🌍 Public
Ssafdarawan
Last edited Jun 1, 2020
Created on Jun 1, 2020

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.

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
100% 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 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
95% 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
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
95% 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
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 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