Skip to main content
SimilarExport ZIP
100%

Melting Data for Multiple Lines

✓ Published0🌍 Public
Mmeihaoming
Last edited Nov 26, 2019
Created on Nov 12, 2019

This example visualizes global population trends from 1950 to 2100, showing how different regions change over time as multiple lines. The chart uses `d3.line` with `curveBasis` to draw smooth paths, with color encoding via `d3.scaleOrdinal` and a custom `colorLegend`. Data is melted from wide to long format using a custom `melt` function that processes UN population estimates from two CSV files, concatenating historical estimates with medium-variant projections. The visualization includes axis labels, gridlines, and a legend, with regions sorted by their final population value.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population trends over time for world regions from 1950 to 2100, displayed as multiple smoothed line paths colored by region. The code uses D3 v5 with `d3.nest` to group data by region, `d3.line` with `curveBasis` for smoothing, and `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` for axes and color mapping. Data is melted from wide UN population CSV files using a custom `melt` function that reshapes yearly columns into long format, combining estimates and medium-variant projections.

CCurran Kelleher
95% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays population trends over time for global regions, using multiple colored lines to represent each region’s population from 1950 to 2100. The chart leverages d3’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while `line` with `curveBasis` draws smooth paths. Data is melted from UN population estimates, combining historical and projected figures. A `colorLegend` highlights region names, with lines sorted by their final population value.

Zzenoe
95% match
Loading thumbnail…

Melting Data with Multiple Lines

This visualization displays global population trends from 1950 to 2100 as multiple colored lines, one per region, using a title, axes, and a color legend. Built with d3.v5, it uses `d3.nest` to group data, `d3.line` with `curveBasis` for smooth paths, and `scaleTime`/`scaleLinear` for axes. Data comes from UN population estimates and medium-variant projections, processed by a custom `melt` function, and rendered as SVG.

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

Melting data for multiple lines

This visualization shows population trends over time for global regions, with each region drawn as a separate colored line and a legend identifying the regions. The data comes from UN population estimates (1950–2014) and medium-variant projections (2015–2100), melted into tidy format. The code uses d3.csv, d3.nest, d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, and d3.axisLeft/axisBottom. A custom colorLegend module renders the legend, while SVG paths with mix-blend-mode multiply display overlapping lines.

Jjlongwellchc
94% match
Loading thumbnail…

Melting Data for multiple lines

This example visualizes population estimates and projections by region from 1950 to 2100, using multiple overlaid lines to show trends over time. The view encodes time on a linear scale and population on a log-free axis, with a categorical color legend identifying each region. The underlying dataset is merged from two UN CSV files using a custom data-melting process that reshapes wide-format rows into long-format records. The chart uses d3.scaleTime, d3.scaleLinear, d3.nest, and d3.line with curveBasis to render smooth paths, while a reusable colorLegend component draws the SVG legend.

Pprincit
94% match
Loading thumbnail…

Melting Data for multiple lines - new un Data

This visualization displays world population estimates from 1950 to 2100 as multiple smoothed lines, one per region, colored by category. The chart uses d3.line with curveBasis, d3.scaleTime, d3.scaleLinear, and d3.nest to group data, while a custom colorLegend function renders the ordinal color scale with SVG circles and text. Data comes from UN population estimates CSV files, melted from wide to long format.

AAjit Singh
94% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays population trends over time by region, using multiple colored lines to represent different countries from 1950 to 2100. The chart employs d3.line with curveBasis for smooth paths, d3.scaleTime and d3.scaleLinear for axes, and d3.nest to group data by country. A custom colorLegend component renders the categorical scale using d3.scaleOrdinal with schemeCategory10. The data comes from UN population estimates, processed through a custom melt function that transforms wide-format CSV data into tidy rows. SVG rendering handles the visualization, with axis labels and a title annotating the chart.

PPotikorn
94% match