Fork of Melting Data for Multiple Lines Rogery

100%

Fork of Melting Data for Multiple Lines Rogery

✓ Published0🌍 Public

Last edited Apr 19, 2021

Created on Apr 19, 2021

Forked from Melting Data for Multiple Lines

This example shows population trends over time for world regions, with multiple lines plotted on a shared time axis and colored by region. The chart uses a legend to identify regions, with lines sorted by their final population value. It loads data from UN population estimates CSV files, processes it with a custom melt function, and renders using D3 v5 with SVG. Key APIs include d3.line, d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.nest, and d3.axisBottom.

AI-generated description

MIT Licensed

Similar vizzes

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

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

92% match

Loading thumbnail…

Fork of Melting Data for Multiple Lines

This example shows population trends over time for multiple world regions from 1950 to 2100, using data from United Nations estimates and medium variant projections. Multiple line paths are drawn with d3.line using curveBasis, colored by a d3.scaleOrdinal with schemeCategory10, and accompanied by a custom color legend. The code melts the dataset into tidy rows, nests it by region with d3.nest, and renders axes with d3.axisBottom and d3.axisLeft on an SVG canvas.

CChrisishere

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

91% 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

91% 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

91% 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

91% match

Loading thumbnail…

Fork of Melting Data for Multiple Lines

This visualization shows population trends over time for multiple world regions, with each region represented as a colored line. It displays data from 1950 to 2100, combining UN population estimates with medium variant projections. The chart orders lines by their final population values and uses a legend to identify regions. The code employs d3.nest for data grouping, d3.line with curveBasis for smooth paths, and d3.scaleTime for the time axis. The underlying data is melted from wide to long format, with yearly values converted to date objects.

Hhaiyangwhy1015

91% match