Melting Data for Multiple Lines

100%

Melting Data for Multiple Lines

✓ Published1🌍 Public

Last edited Aug 6, 2020

Created on Aug 6, 2020

Forked from Melting Data for Multiple Lines

This visualization shows global population trends from 1950 to 2100, using multiple lines to compare different development groups. A vertical reference line marks the year 2018, and a color legend identifies each series. The chart is built using D3 v5, with data loaded from two CSV files and melted into a tidy format. It uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to render the line paths, with axes generated by `d3.axisLeft` and `d3.axisBottom`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Melting Data for Multiple Lines

KKrishu

100% match

Loading thumbnail…

Melting Data for Multiple Lines

Using D3 v5, this chart visualizes global population trends from 1950 through 2100 by combining two datasets: historical estimates and medium-variant projections. It displays multiple lines, each representing a development region, with a color legend and a vertical line marking the year 2018. The code melts the wide-format data into a tidy structure, then uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG chart. A `d3.line` path with `curveBasis` draws each line, and an interactive mouse event on a transparent rectangle captures hover positions. This example demonstrates a data-wrangling technique for creating multi-line charts from time-series data.

KKrishu

95% match

Loading thumbnail…

Melting Data for Multiple Lines

The chart displays world population projections from 1950 to 2100, distinguishing development groups such as more developed, less developed, and least developed countries. The United Nations data is split into two CSV files and melted into a single, tidy format for visualization. Multiple colored lines are rendered as SVG paths using `d3.line` with `curveBasis`, positioned by `scaleTime` and `scaleLinear`. A vertical line marks the year 2018, and a custom `colorLegend` shows the categorical mapping using `d3.scaleOrdinal` with `schemeCategory10`.

KKrishu

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

92% match

Loading thumbnail…

Melting data for multiple lines

This visualization displays world population trends from 1950 to 2100 as multiple colored lines, one for each country or region, ordered by their final population value. It uses d3.line generators with a basis curve to create smooth paths, while d3.nest groups the data by country name. The chart includes axis labels, a color legend, and a title. Data is loaded from two CSV files, melted into a long format, and rendered as SVG, with the y-axis inverted to show population values.

SSagarikaS

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

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

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

90% match