Melting and Munging

100%

Melting and Munging

✓ Published2🌍 Public

Last edited Jan 9, 2020

Created on Jan 3, 2020

Forked from A Week of Temperatures Around the World

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.

AI-generated description

A bare minimum HTML page.

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

95% match

Loading thumbnail…

Melting and munging data

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.

MMauradion

91% match

Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays population trends over time for various global regions, with each region represented as a distinct colored line. The chart highlights how populations evolve from 1950 to 2100, combining historical estimates with medium-variant projections. The code uses d3.nest to group data by region, d3.line with curveBasis for smooth paths, and d3.scaleOrdinal with schemeCategory10 for colors. A custom colorLegend component renders the interactive legend, while data processing in loadAndProcessData.js melts the CSV dataset into a tidy format using d3.range and timeParse.

Vvic126

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 for Multiple Lines with D3.js!

This visualization shows population projections from 1950 to 2100 for multiple world regions, with each region represented as a colored line. The chart uses D3.js 5.16 within a React framework, loading data from UN population estimate CSV files via `d3.csv`. The code demonstrates data “melting” from wide to long format, then uses `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with a category-10 color scheme. Axes, legends, and labels are drawn in SVG, with a custom color legend component and styling via CSS.

Fforcox43

90% match

Loading thumbnail…

Melting Data for Multiple Lines

This chart shows regional population trends from 1950 to 2100, drawing on United Nations population estimates and medium-variant projections. A vertical line marks the year 2020, and a color legend identifies each region. The code uses d3.nest and d3.scaleOrdinal to group and color the data, d3.line with curveBasis for smooth paths, and SVG for rendering. Separate modules handle data melting, the line chart, and the color legend.

Mmyskotima130

90% match

Loading thumbnail…

Melting Data for Multiple Lines

This chart shows projected population growth by region from 1950 to 2100, with each line representing a different world region and colored via a categorical scale. The data is sourced from UN population estimates, loaded from two CSV files and melted into a tidy format. The visualization uses d3.line with curveBasis to smooth the paths, d3.nest to group data by region, and d3.scaleTime and d3.scaleLinear for axes. A custom colorLegend component renders circles and labels in SVG, while axis gridlines and a title complete the layout.

Jjlspangl

89% match

Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population trends over time for regions, displaying multiple lines that trace changes from 1950 to 2100. The data is sourced from UN population estimates and medium variant projections, processed through a melting operation that converts wide-format data into long format. The chart uses D3.js v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis` for smooth paths, and `nest` for grouping by region. An ordinal color scale with `schemeCategory10` assigns colors, while a custom legend shows region names.

Ssteveaigbe

89% match