Iris Histogram with React and D3

This project visualizes the Iris dataset as a series of linked histograms using React and D3.

Features

• One brushable histogram per numeric column in the dataset: sepal_length, sepal_width, petal_length, petal_width
• Brushing on any histogram cross-filters all other histograms, highlighting only the data points that fall within every active brush selection
• Animated bar enter/update/exit transitions powered by D3

How It Works

1. React manages state and lifecycle – useState tracks the current brush intervals for each column; useEffect re-runs the D3 rendering logic whenever dimensions or brush state change.
2. A ResizeObserver hook (useResizeObserver) watches the container <div> and stores its pixel dimensions in React state, causing the chart to re-render responsively whenever the window is resized.
3. D3 renders the SVG – inside useEffect, D3 selects the <svg> element via a React ref and draws one <g class="histogram"> per column. Each histogram is rendered by the histogram() function in histogram.js.
4. Cross-filtering – brushedIntervals is a plain object mapping column name → [min, max]. The filtered dataset is recomputed on every render by checking each data row against every active interval.

Project Structure