Skip to main content
100%

React D3 Conditional Line Chart Practice - Tires X-Bar

✓ Published2🌍 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

MIT Licensed

Similar vizzes