Skip to main content
SimilarExport ZIP
100%

MULTILINE MELTED

✓ Published1🌍 Public
Pprincit
Last edited May 8, 2020
Created on May 8, 2020
Forked from MULTILINE MELTED

This visualization shows population projections by continent from 1950 to 2100, using a multi-line chart where each line represents a region. The lines are smoothed with a basis curve and blended together using a multiply effect. The code leverages d3.csv, d3.nest, d3.scaleTime, d3.scaleLinear, and d3.axisBottom/axisLeft, with data sourced from UN population estimates and medium-variant projections. A categorical color scale with a custom legend orders the regions by their final population values.

AI-generated description

Tutorial from YouTube

MIT Licensed

Similar vizzes

Loading thumbnail…

MULTILINE MELTED

This visualization shows population projections by continent from 1950 to 2100, using a multi-line chart where each line represents a region. The lines are smoothed with a basis curve and blended together using a multiply effect. The code leverages d3.csv, d3.nest, d3.scaleTime, d3.scaleLinear, and d3.axisBottom/axisLeft, with data sourced from UN population estimates and medium-variant projections. A categorical color scale with a custom legend orders the regions by their final population values.

Pprincit
100% match
Loading thumbnail…

MULTILINE MELTED

This visualization shows population trends for world regions from 1950 to 2100, with each line representing a continent and colored using a categorical scale. The chart uses a time-based x-axis and a linear y-axis for population, with the legend ordered by each line’s final value. Built with d3.scaleTime, d3.scaleLinear, and d3.line, the data is melted from UN population estimates and medium-variant projections, then rendered as SVG paths with a basis curve.

Ccocktaildata
93% match
Loading thumbnail…

MULTILINE MELTED

This chart displays projected population trends for world regions from 1950 to 2100, with each region shown as a distinct colored line. It uses D3.js v5 to load CSV data, melt it into a tidy format, and render an SVG line chart with a time-scaled x-axis and linear y-axis. The color legend is ordered by each line’s final population value, using D3’s `nest` and `descending` functions. The data originates from UN population estimates and medium-variant projections.

Pprincit
92% match
Loading thumbnail…

MULTILINE MELTED

This visualization shows population change over time as a set of semitransparent, overlapping lines, with each line representing a different region and a color legend on the right. The data comes from a CSV file containing UN population estimates and projections, melted into a tidy format before rendering. Built with D3 v5, the code uses `d3.nest()` to group data by region, `d3.line()` with `curveBasis` for smooth paths, and `d3.scaleOrdinal` with `schemeCategory10` for colors. The chart is rendered as SVG with axes, gridlines, and a custom color legend component.

Pprincit
90% match
Loading thumbnail…

Melting Data for Multiple Lines

This chart displays population estimates and projections from 1950 to 2100 for regions worldwide, using multiple lines colored by country and sorted by their final population values. The visualization relies on d3.csv to load UN data, d3.nest to group rows by region, and d3.line with curveBasis to generate smooth paths. A custom colorLegend module renders the categorical color scale, while axes are built with d3.axisLeft and d3.axisBottom, and the data is reshaped through a custom “melting” process that converts wide-format year columns into long-format rows.

Ssafdarawan
89% match
Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes population estimates and projections over time by region, with multiple colored lines tracing each region's trajectory from 1950 to 2100. The chart emphasizes final population values by sorting lines in descending order and using a legend that displays region names with corresponding colors. Built with D3 v5, the code employs `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line`, `curveBasis`, `nest`, and `axisBottom`/`axisLeft` to render the SVG. Data is loaded and melted from two CSV files containing UN population estimates and medium variant projections.

PPatricio Albornoz
89% 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
89% 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
88% match