Skip to main content
SimilarExport ZIP
100%

Melting Data for multiple lines | interractive Legend

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

This example visualizes population trends for multiple countries from 1950 to 2100 as a multi-line chart, with an interactive legend allowing users to highlight a single country by clicking its legend entry or line path. The chart uses d3.nest to group data, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis for smooth paths. Rendered as SVG, the color legend is built with custom reusable code that updates stroke opacity on selection. Data comes from UN population estimates fetched 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 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 | 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
90% match
Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes population trends for multiple countries over time as a series of colored lines, using a legend to identify each country. The chart displays time on the x-axis and population on the y-axis, with a title and axis labels. The code uses `d3.csv` to load data from a UN population estimates dataset, which is then "melted" from wide to long format to create individual line paths. It leverages D3 v6 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line`, `curveBasis`, `axisLeft`, `axisBottom`, and `group`, rendering the final visualization as an SVG.

MMatthew Rubino
90% 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
90% 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
90% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays the history and future of world population as multiple lines, one per country or region, sorted by their final population value. The chart uses a time-based x-axis and a linear y-axis with formatted tick labels, while a color-coded legend identifies each line. Built with D3 v6, the example uses `d3.nest()` to group melted data from two UN population CSV datasets, `d3.line()` with `curveBasis` to generate smoothed paths, and a custom `colorLegend` component to render the ordinal color scale legend.

MMuhammad Jarir Kanji
90% 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