Fork of Selecting a Year on a Line Chart

100%

Fork of Selecting a Year on a Line Chart

✓ Published0🌍 Public

Last edited May 23, 2022

Created on May 23, 2022

Forked from Selecting a Year on a Line Chart

This fork of a line chart example uses d3.v5 to visualize vaccination data over time, with a vertical line marking a selected year. Users can hover over the chart to update the selected year via a mouse interceptor that inverts the x-scale, and a d3.ordinal color scale distinguishes regions. The visualization is rendered with SVG, axes, and line paths using d3.line and curveBasis, with data processed from CSV files.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

A fork of the "Selecting a Year on a Line Chart" example visualizes regional population changes over time from UN estimates and medium-variant projections. It displays multiple smoothed line paths, colored by region via `d3.scaleOrdinal` and `d3.schemeCategory10`, with a vertical black line marking a selected year. Users can drag the mouse over the chart to update the year, triggering a re-render that snaps the line to that date using `d3.mouse` and `d3.scaleTime.invert`. The SVG rendering uses d3.v5 and modular functions like `lineChart` and `colorLegend` for axes and legends.

DDonald Bagwell

89% match

Loading thumbnail…

Fork of Fork of Fork of Selecting a Year on a Line Chart

A line chart visualizing heart disease rates across age categories, with each line colored by a category and selectable by hovering over the chart. The vertical year line updates as the mouse moves, and the chart uses D3 v5 with d3.line, d3.scaleTime, d3.scaleOrdinal, d3.nest, and SVG rendering. Data is loaded from a CSV file, and the chart includes axes, a legend from colorLegend.js, and a title.

Cchandanagandla

87% match

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This visualization shows regional population trends over time as multi-line chart, with a vertical line marking the currently selected year. Moving the mouse across the chart updates the selected year, and a legend identifies each region's color. The code uses D3 v5 APIs including `d3.nest`, `d3.scaleOrdinal` with `schemeCategory10`, and `d3.line` with `curveBasis`, while the interactive year selection relies on `d3.mouse` and `scaleTime.invert`. Data comes from UN population estimates and medium variant projections, rendered as SVG elements.

Nnayd

86% match

Loading thumbnail…

Fork of Selecting a Year on a line chart

This example shows a fork of a line chart that selects a year to display. It reads movie data from a CSV file, parsing the date and count columns, and renders the visualization as an SVG. The code uses d3.csv for data loading, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis to draw the line. It is built within a React framework, though the current implementation focuses on data preparation and chart setup.

NNeepaB

86% match

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart displays population trends over time by region, with a movable vertical line that updates the selected year on hover. The visualization uses d3.scaleTime, d3.scaleLinear, d3.nest, and d3.line with curveBasis to render smooth paths from UN population estimates and medium-variant projections (1950–2100). A d3.ordinal color scale distinguishes regions via a legend, while mouse events trigger year selection through d3.mouse and axis inversion. SVG rendering handles all elements, including gridlines, labeled axes, and an interactive overlay rect.

AAmmar Ehab

86% match

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This visualization shows population trends over time for world regions using a multi-line chart, with a vertical line indicating the currently selected year. Users can hover over the chart to change the selected year, which updates the vertical marker. The chart is built with D3 v5, using `scaleLinear`, `scaleTime`, `d3.line` with `curveBasis` for smoothing, and `d3.nest` to group data by region. A color legend is rendered via a custom `colorLegend` function using `scaleOrdinal`. Population data is loaded from CSV census files and processed through a custom `melt` function.

GGerasimos Katsagannis

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

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

85% match