multiple lines with vertical bar

100%

multiple lines with vertical bar

✓ Published0🌍 Public

Last edited Aug 9, 2022

Created on Oct 23, 2021

Forked from Melting Data for Multiple Lines

This visualization displays global population trends over time using multiple lines, one for each region, with a vertical black bar indicating the currently selected year. The chart is rendered with SVG using D3 v5, with an interactive mouse listener on a transparent rectangle that updates the selected year. Population data comes from UN estimates and projections loaded via CSV, and the line chart uses D3's `line` and `curveBasis` for smooth paths, while color encoding is handled by `scaleOrdinal` with `schemeCategory10`. Axes, ticks, and labels are generated using `axisBottom`, `axisLeft`, and `scaleTime`/`scaleLinear`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This visualization shows population trends over time for multiple world regions, with each region represented as a distinct colored line and a legend identifying the regions. A vertical black line marks the currently selected year, and users can move their mouse across the chart to dynamically change that year. The code uses d3.line, d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to render SVG paths, along with d3.nest to group the data by region. Population data comes from UN estimates and medium-variant projections, covering 1950 to 2100.

RRoger Yu-Hsiang Lo

88% match

Loading thumbnail…

Line chart with multiple lines

This line chart displays population trends over time for global regions, with each region represented by a colored line and a legend identifying them. The data spans from 1950 to 2100, combining UN population estimates and medium-variant projections processed through a custom melt function. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with schemeCategory10, while d3.line with curveBasis generates the smoothed paths. Axis labels, grid lines, and a title are rendered via d3.axisBottom, d3.axisLeft, and SVG text elements.

LLongYuu

86% match

Loading thumbnail…

Selecting a Year on a Line Chart

This visualization displays population trends over time for various world regions using a line chart, rendered with SVG. Users can hover over the chart to select a specific year, which updates a vertical black line to mark that point in time. Built with D3 v5, the code utilizes `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` for axes, `line` with `curveBasis` for the paths, and `nest` to group data by region. The color legend is created using `scaleOrdinal` with `schemeCategory10`. Data comes from UN population estimates.

NNikola Rožić

86% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart visualizes global population trends over time, grouped by world regions, using a multi-line layout with a categorical color legend. It combines historical estimates (1950–2014) with medium-variant projections (2015–2100) from UN population data. The visualization uses D3 v5 with `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `line`, `curveBasis`, and `nest` to structure and render the paths, while a custom `colorLegend` function displays the region labels as SVG circles and text.

RRoger Yu-Hsiang Lo

85% match

Loading thumbnail…

Selecting a Year on a Line Chart

This visualization shows population trends over time for world regions, with a vertical black line marking the currently selected year. Moving the mouse across the chart updates the selected year and repositions the line. The code uses D3 v6 with SVG rendering, employing `scaleTime`, `scaleLinear`, `line` with `curveBasis`, and `axisBottom`/`axisLeft` for axes. Data comes from UN population estimates CSV files, melted into tidy format for visualization. The color legend is built with a custom `colorLegend` function using `scaleOrdinal` and `schemeCategory10`.

HHe Jianfeng

85% match

Loading thumbnail…

Multing Data for Multiple Lines

This visualization shows population trends over time for multiple world regions, with each line color-coded and sorted by its final population value. The chart includes axes with gridlines, a legend generated by a custom `colorLegend` function, and smoothed lines using `curveBasis`. Data is processed by melting wide-format CSV rows from UN population estimates into tidy long-form data, then nested by region with `d3.nest`. The visualization uses `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.line`, rendering to SVG with D3 v5.

Mmisferswift

85% match

Loading thumbnail…

Selecting a Year on a Line Chart

This visualization displays global population trends over time as a multi-line chart, with each line representing a different country and colored via `d3.scaleOrdinal`. Users hover over the chart to select a year, which triggers a vertical line and updates the visualization through a `mousemove` event using `d3.pointer` and `xScale.invert`. The chart renders with SVG, uses `d3.scaleTime` and `d3.scaleLinear` for axes, and generates paths with `d3.line` and `d3.curveBasis`. Data comes from UN population estimates processed through `d3.csv` and `topojson`.

MMatthew Rubino

85% match

Loading thumbnail…

Selecting a year on a line chart

This visualization shows world population trends over time across regions, with a vertical line marking a selected year. Users can move their mouse across the chart to update the selected year, which highlights the corresponding point in time. The code uses d3.line, d3.scaleTime, d3.scaleLinear, and d3.axisBottom to render the SVG line chart, while d3.mouse captures interactive hover events. Population data comes from UN estimates (1950-2014) and medium variant projections (2015-2100), processed via d3.csv and d3.nest.

MMauradion

84% match