Skip to main content
SimilarExport ZIP
100%

Melting Data for multiple lines | selecting a Year

✓ Published0🌍 Public
Vvladvaculin
Last edited Oct 10, 2019
Created on Sep 10, 2019

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()`.

AI-generated description

Click on Legend or paths to isolate the data!

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
92% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays projected population changes for countries from 1950 to 2100, using multiple lines to track each nation over time. It employs d3.line with curveBasis smoothing and d3.nest to group data by country, with color-encoded lines and a d3.scaleOrdinal legend. The chart includes a circle marker and label at each line’s final point, with axes from d3.axisLeft and d3.axisBottom. Data comes from UN population estimates CSV files, processed through a custom melt function that transforms wide-format data into tidy rows.

Iinroadings
91% 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
91% 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
91% match
Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes population trends for countries over time as multiple smoothed lines, using a nested data structure to group values by region. The chart displays yearly population estimates from the UN’s medium variant dataset, covering 1950 to 2100. Built with React and D3 v5, the code employs `d3.nest` for data grouping, `d3.line` with `curveBasis` for path generation, and `d3.scaleOrdinal` with `schemeCategory10` for color mapping. A custom color legend and axes with tick formatting complete the SVG rendering.

PPeter S
90% 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
90% match
Loading thumbnail…

Melting Data Multiple Lines

The visualization shows population over time by region as multiple smoothed lines, with a color legend and axis labels. It uses D3 v5 APIs including `nest()` for grouping, `line()` with `curveBasis` for path generation, `scaleTime` and `scaleLinear` for axes, and `scaleOrdinal` with `schemeCategory10` for colors. Data is melted from UN population estimates and medium variant CSV files, spanning 1950 to 2100, rendered as SVG paths with multiply blend modes.

CCarloWK1202
90% 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
90% match