Selecting a year on a line chart using React

100%

Selecting a year on a line chart using React

✓ Published0🌍 Public

Last edited Oct 25, 2020

Created on Oct 25, 2020

A line chart displays mental health disorder rates in Costa Rica from 1990 to 2017, with a dropdown menu to switch between seven disorder categories. The chart uses React and D3 v5, rendering an SVG with a vertical black line that follows the mouse cursor to select a year. This selection is computed by inverting the x-scale from the mouse position, and the x-axis uses a time scale with yearly ticks. Data comes from a CSV file loaded via `d3.csv`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Selecting a Year on a Line Chart with D3.js!

This example presents a line chart of global population estimates from 1950 to 2100, with lines colored by region. A vertical black line marks the selected year, and moving the mouse over the chart updates this line to the nearest year. The visualization is built with D3.js (v5) using the `select` API, `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` generators, with data loaded from CSV files. The line chart and color legend are implemented as reusable components (using `selection.enter` and `merge`) within a React framework, rendering to SVG.

Fforcox43

79% match

Loading thumbnail…

People affected by mental diseases over the years in American Countries with Interactive Legends

This interactive line chart shows the percentage of the population affected by mental health disorders in four American countries—Costa Rica, Colombia, Honduras, and Ecuador—from 1990 to 2017. A dropdown menu lets users select among seven disorder types, while a color legend highlights individual country trends. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map data, with hover interactions on the legend fading non-selected countries. The visualization draws SVG paths using `d3.line` with `curveNatural`, rendering data from a CSV loaded via `d3.csv`.

FFelipe Mejías

78% match

Loading thumbnail…

Selecting a year on a line chart

This interactive line chart shows how population changes over time across world regions, with a vertical line marking the currently selected year. Users move the mouse over the chart to change the selection, which updates the line in real time. The chart is built with React and D3 v5, using `scaleTime` and `scaleLinear` for the axes, `line` for the sparklines, and a `mouse` event on a transparent rectangle to capture the cursor position. The color legend is generated with `colorLegend`, and the data comes from UN population estimates.

BB Sundaresan

78% match

Loading thumbnail…

DataViz Project - First Visualization

This interactive line chart, built with React and D3 v5, visualizes the percentage of a country's population affected by mental illness and unemployment over time, with a dropdown menu to select among six American countries. The SVG rendering uses D3's `scaleTime` and `scaleLinear` for the axes, and natural cubic spline curves via `line().curve(curveNatural)` to smooth the trends. A custom color legend distinguishes the two metrics, shown as green (mental illness) and orange (unemployment) lines, using data from a CSV file hosted on Gist.

FFelipe Mejías

78% match

Loading thumbnail…

Selecting a Year on a Line Chart

This visualization shows population trends over time for global regions, with a vertical line marking the currently selected year. Users can move the mouse across the chart to select a different year, updating the line’s position. The line chart uses d3.scaleTime, d3.scaleLinear, d3.line, and d3.curveBasis for rendering, while d3.nest groups data by region. A d3.Ordinal scale with schemeCategory10 colors each line, and a custom colorLegend component displays the categories. Data comes from UN population estimates and medium variant projections, processed with d3.csv and d3.timeParse.

Jjeelong

78% match

Loading thumbnail…

Selecting a Year on Linechart

A line chart displays population growth for world regions from 1950 to 2100, with each region colored via d3.scaleOrdinal and d3.schemeCategory10. Moving the mouse over the chart triggers d3.mouse to invert the x-scale, updating a vertical line marking the selected year. The visualization uses d3.csv to load UN population data, d3.nest to group by region, and d3.line with curveBasis to draw the paths.

PPeter S

78% match

Loading thumbnail…

DataViz Project - Second Visualization

This interactive bar chart compares unemployment rates and mental illness prevalence across the five most affected countries for a selected year. Users can switch between 1995, 2000, 2005, 2010, and 2015 via a React dropdown menu. The visualization uses React hooks, d3.scaleBand and d3.scaleLinear for axes, and d3.csv to load the mental health dataset from a GitHub gist. Hovering over the color legend highlights corresponding bars and fades others, with tooltips showing exact values.

FFelipe Mejías

77% match

Loading thumbnail…

Selecting a Year on a Line Chart

This visualization shows population trends over time for major world regions, with a vertical green line marking a selected year that users can change by moving the mouse across the chart. The line chart uses d3.line with a curveBasis for smoothing, while d3.nest groups the data by region. A d3.mouse handler on a transparent rectangle calls xScale.invert to convert mouse position into a year, updating the selection. Data comes from UN population estimates loaded via d3.csv.

Vvic126

77% match