Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

React D3 Conditional Line Chart Practice

Public visualization

React D3 Conditional Line Chart Practice

0 stars1🌍 Public
AAndre J Denais
Last edited Nov 23, 2022
Created on Nov 23, 2022

A time-series line chart tracks a risk value as a percentage over monthly intervals from 2015 to 2016, with each data point colored by a conditional threshold: green below 50, amber between 50 and 75, and red above 75. Dashed reference lines mark the 50% and 75% boundaries. Built with React and D3 v6, the visualization uses `scaleTime` and `scaleLinear` for axes, `d3.line()` for the connecting path, and `d3.csv` to load the data from points.csv. SVG circles render each point, with hover tooltips showing the exact value via the `<title>` element.

AI-generated description

Line chart with conditional point markers

Comments

Sign in to join the discussion.

MIT Licensed