Skip to main content
SimilarExport ZIP
100%

Fork of Melting Data for Multiple Lines

✓ Published0🌍 Public
Aannadehtiarova
Last edited Feb 3, 2021
Created on Feb 3, 2021

A fork of an interactive D3 visualization, this example displays population over time by region from 1950 to 2100 using multiple line charts. It shows the rise and fall of population for various world regions, with each line color-coded and ordered by its final value. The visualization uses D3 v5 APIs including `nest()` for hierarchical grouping, `lineGenerator` with `curveBasis` for smooth line paths, and `scaleOrdinal` with `schemeCategory10` for coloration. Data is loaded from UN population estimates CSVs via `Promise.all()` and pivoted from wide to long format. A custom color legend is built with modular JavaScript functions, rendered in SVG with a multiplication blend mode.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Melting Data for Multiple Lines

This visualization displays population trends over time for different global regions, using multiple lines to compare regional growth from 1950 to 2100. The chart employs D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, and `line` with `curveBasis` to render smoothed paths. Data is sourced from UN population estimates and medium-variant projections, processed through a custom melt function. A color legend created with `colorLegend.js` identifies each region, while the y-axis uses a custom formatting function to abbreviate population values.

EEmmanuel Chukwujindu
95% match
Loading thumbnail…

Fork of Melting Data for Multiple Lines 12

This visualization shows regional population trends over time, with multiple colored lines representing different world regions from 1950 to 2100. The chart uses a line chart with a time-based x-axis and a population y-axis, featuring interactive zoom functionality. The code leverages d3.csv, d3.nest, d3.line with curveBasis, d3.scaleTime, and d3.scaleOrdinal with schemeCategory10. A custom colorLegend component renders a categorical legend. The data comes from UN population estimates, processed through a custom melt function that reshapes the dataset for visualization. The SVG rendering includes grid lines and axis labels.

Ppplomith
94% match
Loading thumbnail…

Fork of Melting Data for Multiple Lines

This visualization shows population trends over time for global regions, with multiple colored lines tracking each region’s population from 1950 to 2100. Data comes from UN population estimates merged with medium-variant projections. Using D3 v5, the code employs `d3.csv`, `d3.nest` for grouping, `d3.scaleTime`, `d3.scaleLinear`, and a custom color legend to distinguish regions. Lines are drawn with `d3.line` and `curveBasis`, while axes and labels use `d3.axisLeft` and `d3.axisBottom`, rendered as SVG.

Aaniosindustries
94% match
Loading thumbnail…

Fork of Melting Data for Multiple Lines

This visualization shows population over time by region, with multiple lines depicting trends from 1950 to 2100. The code uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `line`, `curveBasis`, `nest`, and `axisLeft`/`axisBottom` to render SVG paths with a color legend. Data comes from UN population estimates and medium variant projections, processed by melting wide-format CSV data into tidy long-form rows.

777tinna
94% match
Loading thumbnail…

Fork of Melting Data for Multiple Lines

This example visualizes population over time by region from a UN dataset, showing multiple lines from 1950 to 2100 using nested data. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and color, with `axisBottom` and `axisLeft` for tick marks. Lines are generated via `line` with `curveBasis`, and a custom `colorLegend` function displays the categorical color scale. The code employs `nest` and `descending` to sort regions by their final population value, rendering the SVG with a multiply blend mode.

Ccpmorrill@gmail.com
94% match
Loading thumbnail…

Fork of Melting Data for Multiple Lines

This example visualizes population over time by region, displaying multiple lines that trend across a time axis with a categorical color legend. It uses D3 v5 APIs including `d3.nest`, `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom` to render an SVG chart. Data is melted from UN population estimates and medium-variant projections, combining CSV sources. A custom color legend module and `mix-blend-mode` styling enhance readability, while axis labels and tick formatting clarify the scales.

WWasanta Pruttisarikorn
93% match
Loading thumbnail…

Fork of Melting Data for Multiple Lines5

This visualization displays population trends over time (1950-2100) for various regions, with each line colored by region name and sorted by final population value. It uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, `line` with `curveBasis`, and `axisLeft`/`axisBottom` to render axes. Data is loaded from UN population estimates via `csv` and processed through a custom `melt` function. The chart includes a color legend, axis labels, and uses SVG for rendering, with lines styled using mix-blend-mode multiply.

CCho-Yooyeon
93% match
Loading thumbnail…

Fork of Melting Data for Multiple Lines

This example visualizes population over time by region from 1950 to 2100, using data from the UN Population Estimates. It displays multiple line paths, each colored by region, with an ordinal color scale and a custom legend. The visualization uses d3.csv, d3.nest, d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.axisBottom/axisLeft. Data is melted from wide to long format, filtered for regions, and rendered as SVG paths with mix-blend-mode multiplication.

Ssatra546
93% match