Melting Data and Selecting a Year for Multiple Lines

100%

Melting Data and Selecting a Year for Multiple Lines

✓ Published0🌍 Public

Last edited Aug 11, 2020

Created on Aug 10, 2020

Forked from Line Chart with Multiple Lines

This visualization shows world population projections for different development regions from 1950 to 2100, with selectable time points. A vertical line marks the currently chosen year, and hovering over the chart updates it, redrawing the multi-line display. The code uses D3 v5 for data binding, scales, axes, and the line generator, with `nest()` to group data by region and `scaleOrdinal` for color assignment. Data comes from the UCI Machine Learning Repository's Auto MPG dataset, which is melted from wide to long format using custom parsing logic.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set.

MIT Licensed

Similar vizzes

Loading thumbnail…

Melting Data for Multiple Lines

This example shows world population projections from 1950 to 2100 as multiple smoothed lines, with a vertical line marking the currently selected year. The chart uses a color legend to distinguish regions, and hovering over the chart updates the selected year. It uses `d3.nest()` to group data, `d3.line()` with `curveBasis` for path generation, and `d3.scaleTime`/`d3.scaleLinear` for axes. The data is melted from CSV files, and the view is rendered as an SVG.

KKurt J Nilsen

89% match

Loading thumbnail…

Melting Data for multiple lines | selecting a Year

This visualization displays population trends for countries from 1950 to 2100 as multiple smoothed lines, with a vertical line marking the currently selected year. Clicking a legend item or a path isolates that country’s data, while the legend updates to show the population for the chosen year. Built with D3 v5, it uses `d3.nest()`, `d3.line()`, and `curveBasis` to generate paths, with data loaded from UN population estimate CSV files via `d3.dsv()`.

Vvladvaculin

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

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

87% match

Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population trends over time for world regions from 1950 to 2100, displayed as multiple smoothed line paths colored by region. The code uses D3 v5 with `d3.nest` to group data by region, `d3.line` with `curveBasis` for smoothing, and `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` for axes and color mapping. Data is melted from wide UN population CSV files using a custom `melt` function that reshapes yearly columns into long format, combining estimates and medium-variant projections.

CCurran Kelleher

87% match

Loading thumbnail…

Melting Data for Multiple Lines

This interactive line chart visualizes population over time by region, with a vertical orange line marking the currently selected year. Users can move their mouse across the chart to change the selected year, which is displayed alongside the population trajectories. The chart uses D3’s `scaleTime`, `scaleLinear`, and `line` with `curveBasis` to render smoothed curves, and relies on `nest` for data grouping. The data is sourced from UN population estimates and a medium variant projection, processed via a custom melt function. The legend uses `scaleOrdinal` with the `schemeDark2` palette.

LLittledevil7

86% match

Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays regional population changes over time as multiple colored lines, with a vertical marker indicating the currently selected year. Users hover over the chart to update the selection, and a legend identifies each region. Built with D3 v5, it uses `nest` to group data by region and `scaleOrdinal` for colors, rendering with SVG. The data is sourced from UN population estimates, melted into tidy format for the line chart.

MMinwoo Pak

86% match

Loading thumbnail…

D3 Course 14: Melting Data for Multiple Lines

This visualization displays population estimates and projections for world regions from 1950 to 2100, with each region shown as a distinct colored line. A vertical black line marks a selected year, and users can move their mouse across the chart to update this selection. The code uses d3.csv to load two UN population datasets, merges them after melting columns into rows, and applies d3.timeParse to handle yearly dates. The lines are rendered as SVG paths using d3.line, with d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal managing the axes and colors.

GGabrz

86% match