Melting Data for Multiple Lines

100%

Melting Data for Multiple Lines

✓ Published1🌍 Public

Last edited May 7, 2021

Created on Apr 2, 2021

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays population trends over time for various world regions using multiple lines. The chart combines historical estimates from a 2017 UN dataset with medium-variant projections through 2100, showing each region’s population trajectory in a distinct color. The code uses d3.csv to load data, d3.nest to group by region, d3.line with curveBasis for smooth paths, and d3.scaleTime and d3.scaleLinear for axes. A custom colorLegend component renders the categorical scale, while d3.axisLeft and d3.axisBottom create labeled tick marks.

Ffbudwill

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

95% match

Loading thumbnail…

Melting Data for Multiple Lines

This example shows population over time by region for the world, displaying multiple smooth lines on a chart with a color legend to distinguish regions. The data is melted from a wide CSV format into tidy rows, combining historical estimates from 1950 to 2014 with medium-variant projections from 2015 to 2100 from the UN. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, `nest` for grouping by region, and custom axis and legend components. Lines are rendered as SVG paths with a multiply blend mode, and the axis labels use custom formatting for population values.

Ssafdarawan

95% match

Loading thumbnail…

Melting Data for Multiple Lines

Ssafdarawan

95% match

Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population trends over time for global regions, with each region represented as a colored line. The chart uses multiple lines to compare regional population growth from 1950 to 2100, with a color legend on the right side. The code processes United Nations population data by melting it into a tidy format, then uses d3.line with curveBasis to generate smooth paths, d3.nest to group by region, and d3.scaleOrdinal with schemeCategory10 for colors. Axes are rendered using d3.axisLeft and d3.axisBottom, with SVG rendering and custom tick formatting for population values.

CChenluWang96

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

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

95% match

Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays population over time by region, with each line representing a different area and a color legend identifying them. The chart uses d3.csv to load UN population data, which is then processed using d3.nest to group data by region. The code demonstrates a data-wrangling technique called "melting," transforming wide-format data with columns per year into tidy data with year, name, and population fields. Multiple lines are drawn using d3.line and curveBasis, with d3.scaleTime and d3.scaleLinear handling the axes and d3.scaleOrdinal applying colors.

Ssingularity6033

95% match