Melting Data for multiple lines

100%

Melting Data for multiple lines

✓ Published1🌍 Public

Last edited Mar 31, 2020

Created on Mar 31, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

96% match

Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes population projections for global regions from 1950 to 2100 as multiple smoothed lines, each colored by region via an ordinal color scale and accompanied by a legend. The chart uses d3.scaleTime, d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render axes, while d3.line with d3.curveBasis draws the paths. Data is loaded from CSV files and melted into a tidy format before rendering as SVG.

Bbprokopowicz

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

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

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

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

94% match