Melting and munging data

100%

Melting and munging data

✓ Published1🌍 Public

Last edited May 27, 2021

Created on May 27, 2021

Forked from Line chart with multiple lines

The chart visualizes global population trends from 1950 to 2100 across major regions, using colored lines with a legend to differentiate them. It highlights long-term demographic shifts, with the data sourced from UN population estimates and medium-variant projections. Built with D3 v5, the visualization uses `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while data is processed by melting the wide CSV format into a tidy structure for line generation.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Melting and Munging

A line chart shows projected population growth from 1950 to 2100 for the world’s major regions, distinguishing between historical estimates and future UN projections. The code uses `d3.csv` to load two datasets, a custom `melt` function to reshape wide rows into tidy time-series records, and D3’s `nest` to group by region. It renders smoothed paths with `d3.line` and `curveBasis`, scaled by `scaleTime` and `scaleLinear`, with an SVG color legend appended via `colorLegend.js`. Data comes from UN population estimates and medium-variant projections.

AArriannePandaraoan

92% match

Loading thumbnail…

Melting and Munging

A line chart displays projected population trends from 1950 to 2100 for major world regions, using data from UN population estimates. The visualization uses D3 v5 with React, rendering SVG paths via `d3.line` and `curveBasis`. Data is processed through a custom "melting" function that reshapes wide CSV data into tidy form, with `d3.nest` grouping by region and `d3.scaleOrdinal` assigning colors. A color legend is generated using a reusable `colorLegend` component.

MMichael Milano

91% match

Loading thumbnail…

Melting Data for Multiple Lines

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.

Mmeihaoming

90% match

Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population trends over time for various global regions, with each region represented by a colored line and a corresponding legend. The data comes from UN population estimates and projections, spanning 1950 to 2100. Built with D3 v5, the code melts wide-format CSV data into tidy rows using a custom function before applying scales, axes, and a line generator with curveBasis interpolation. Regions are sorted by their final population value and colored using d3.scaleOrdinal with schemeCategory10.

HHasideluxe

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

90% match

Loading thumbnail…

Melting data with multiple lines

This chart shows population trends for world regions from 1950 to 2100, using a multi-line plot where each line represents a region’s population over time. It uses D3 v5’s `scaleTime`, `scaleLinear`, `scaleOrdinal` with `schemeCategory10`, `line` with `curveBasis`, and `nest` to group data. The SVG is rendered with axes from `axisBottom` and `axisLeft`, and a custom `colorLegend`. Data comes from UN estimates and medium projections, melted into a tidy format.

MMunTatt Yap

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

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

90% match