Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

React D3 Conditional Line Chart Practice - Tires X-Bar

Public visualization

Viewing a saved revision (read-only)

a15dc4ee20ec4cec98f64c2a552e5238

React D3 Conditional Line Chart Practice - Tires X-Bar

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

This example shows sample mean values across 20 sequential samples as a connected scatter plot, with points colored green, amber, or red based on whether they fall within or outside the control limits of 17.5037 and 40.8296. Dashed lines mark the upper and lower control limits, and hovering over a point reveals its exact sample mean value in a tooltip. The visualization uses React with D3 v6, employing `d3.scaleLinear` for both axes, `d3.line` for the connected path and limit lines, and CSS classes for conditional point coloring. Data is loaded from a CSV file using `d3.csv`.

AI-generated description

Line chart with conditional point markers