Skip to main content
SimilarExport ZIP
100%

Fork of Selecting a Year on a Line Chart

✓ Published0🌍 Public
Ddnt.ngoctu@gmail.com
Last edited Jun 20, 2024
Created on Jun 20, 2024

This interactive line chart shows population trends over time for world regions projected through 2100, using data from UN population estimates. Users navigate by mousemove events that call `setSelectedYear` to update a highlighted vertical line, while a color legend identifies each region. The visualization uses d3.v5 with `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `line` with `curveBasis`, `nest`, `mouse`, and SVG rendering. Colors come from `schemeCategory10`, and the chart adapts via a state-driven `render` function.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart shows population trends over time for world regions projected through 2100, using data from UN population estimates. Users navigate by mousemove events that call `setSelectedYear` to update a highlighted vertical line, while a color legend identifies each region. The visualization uses d3.v5 with `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `line` with `curveBasis`, `nest`, `mouse`, and SVG rendering. Colors come from `schemeCategory10`, and the chart adapts via a state-driven `render` function.

Ddnt.ngoctu@gmail.com
100% match
Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart shows population trends over time for world regions projected through 2100, using data from UN population estimates. Users navigate by mousemove events that call `setSelectedYear` to update a highlighted vertical line, while a color legend identifies each region. The visualization uses d3.v5 with `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `line` with `curveBasis`, `nest`, `mouse`, and SVG rendering. Colors come from `schemeCategory10`, and the chart adapts via a state-driven `render` function.

Ddnt.ngoctu@gmail.com
100% match
Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart shows population trends over time for world regions projected through 2100, using data from UN population estimates. Users navigate by mousemove events that call `setSelectedYear` to update a highlighted vertical line, while a color legend identifies each region. The visualization uses d3.v5 with `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `line` with `curveBasis`, `nest`, `mouse`, and SVG rendering. Colors come from `schemeCategory10`, and the chart adapts via a state-driven `render` function.

Ddnt.ngoctu@gmail.com
100% match
Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart displays population trends over time for various world regions, with a vertical line marking a selected year, which users can adjust by moving the mouse across the chart. Using D3 v5, the visualization employs `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, `axisBottom` and `axisLeft` for axes, and `line` with `curveBasis` for smooth paths. Data is loaded from UN population estimate CSV files. The SVG rendering updates dynamically through a selection state, and a separate color legend uses `scaleOrdinal` with a category 10 scheme to identify regions.

Jjudeluka
95% match
Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart displays global population trends over time for different regions, with lines colored by region and a vertical black line marking the currently selected year. Users can move the mouse across the chart to change the selected year, which updates the line position and triggers a re-render. The visualization uses d3 v5, including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` to draw the axes and paths, with `nest` and `schemeCategory10` for grouping and coloring regions. Data is loaded from UN population estimates CSV files, processed by melting year columns into rows, and rendered using SVG with a custom line chart component that handles the mouse interaction via `on('mousemove')`.

Cchandanagandla
94% match
Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This visualization shows population trends over time for world regions, with a vertical line marking a selected year that updates on mouse movement. Users can compare regional curves colored via an ordinal scale, with the selected year’s position recalculated using d3.scaleTime inversion. The chart is rendered in SVG using d3.line with basis curves, and incorporates a nested data structure from UN population estimates and medium variant projections. A color legend and axis labels supplement the interactive line chart.

Ssandeshplanner
94% match
Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart displays population trends over time for global regions, with a movable vertical line that lets users select a specific year. Hovering over the chart triggers the `setSelectedYear` function, which updates the selected year and redraws the visualization. The chart uses `d3.line` with `curveBasis` for smooth paths, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.nest` to group data by region. A color legend built with `d3.scaleOrdinal` and `schemeCategory10` identifies each line. Population data comes from UN estimates merged with medium variant projections, rendered as SVG.

PPiotr Paszek
94% match
Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart displays population estimates and projections for world regions from 1950 to 2100, sourced from UN dataset CSVs. Users hover over the chart to move a vertical line selecting a specific year, which updates the visualization's focus. The d3.v5 code uses scales (`scaleTime`, `scaleLinear`), a line generator with `curveBasis`, and axes, while a custom color legend maps region names via `scaleOrdinal`. The SVG rendering includes blended stroke paths, an interactive mouse-interceptor rectangle, and a responsive update loop triggered by year selection.

AAharon E. V. Zúñiga
94% match