Skip to main content
SimilarExport ZIP
100%

Fork of Melting Data for Multiple Lines

✓ Published0🌍 Public
WWasanta Pruttisarikorn
Last edited Dec 14, 2022
Created on Dec 14, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of Melting Data for Multiple Lines

This visualization shows population trends over time for global regions, with multiple colored lines plotted on axes labeled “Time” and “Population.” The data combines UN population estimates from 1950–2014 with medium-variant projections from 2015–2100, processed through a custom `melt` function. It uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal with schemeCategory10, d3.line with curveBasis, d3.nest for grouping, and axis generators with tick formatting. A custom colorLegend component displays the categorical color scale, while SVG paths are styled with mix-blend-mode for overlapping lines.

Jjpl-web
95% match
Loading thumbnail…

Fork of Melting Data for Multiple Lines

This visualization shows population trends over time for global regions, with multiple colored lines representing different areas. The chart uses a time-scaled x-axis and linear y-axis, with a legend mapping colors to region names. The code relies on D3 v5 functions including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, `line` with `curveBasis`, and `axisLeft`/`axisBottom`. Data is sourced from UN population estimates, melted from wide to long format via custom logic, and rendered as an SVG with blended strokes.

Ccpmorrill@gmail.com
95% match
Loading thumbnail…

Fork of Melting Data for Multiple Lines

This visualization uses layered line charts to show population trends over time for various global regions, with a legend providing color-coded identification. Built with D3.js v5, the code processes a UN population dataset by melting it from wide to long format, then renders an SVG with time-based x-axis and population y-axis. The graph implements multiple D3 APIs including `scaleTime`, `scaleLinear`, `nest` for grouping, and `line` with `curveBasis` for smoothed paths, while a custom `colorLegend` function displays the categorical color scale.

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

Fork of Melting Data for Multiple Lines

This visualization displays population trends by region over time from 1950 to 2100, using data from the UN Population Estimates and Medium Variant datasets. Multiple lines represent different countries, colored via a categorical scale and sorted by their final population values. The chart is built with D3 v5, using `scaleTime` and `scaleLinear` for axes, a `line` generator with `curveBasis` for smooth paths, and `nest` to reshape the melted data. A custom legend and axis labels complement the SVG rendering.

NNikithakatta30
93% match