Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Aditya - React D3 Conditional Line Chart Practice

Public visualization

Viewing a saved revision (read-only)

f5e58c43219b4b06a8ee7f2f1ab19b96

Fork of Aditya - React D3 Conditional Line Chart Practice

0 stars0🌍 Public
Jjmkdev9
Last edited Oct 12, 2023
Created on Oct 11, 2023

This example visualizes a time series of risk values from a CSV file, showing how conditions vary over monthly intervals. A black connected line links the data points, while each point is colored green, amber, or red based on whether its value falls below 50, between 50 and 75, or above 75. Dashed gray horizontal threshold lines mark the 50 and 75 percent boundaries. The React component uses d3.scaleTime and d3.scaleLinear for axes, d3.line for the path, and d3.csv for data loading, rendering everything as SVG with custom AxisBottom and AxisLeft components.

AI-generated description

Line chart with conditional point markers