Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

React D3 Conditional Line Chart Practice - SFO Temp X-Bar

Public visualization

React D3 Conditional Line Chart Practice - SFO Temp X-Bar

0 stars0🌍 Public
AAndre J Denais
Last edited Dec 8, 2022
Created on Dec 8, 2022

This React and D3 v6 example renders a statistical process control chart of San Francisco’s mean temperatures by year, using data from a local CSV file. The SVG visualization plots a connected line of sample means, with points conditionally colored green, amber, or red based on whether they fall within, below, or above the control limits (LCL and UCL). It overlays dashed lines for the upper and lower control limits and includes axis components built with `d3.scaleTime`, `d3.scaleLinear`, and custom React components.

AI-generated description

Line chart with conditional point markers

Comments

Sign in to join the discussion.

MIT Licensed