CherynJ

@CherynJ·3 public vizzes

Fork of Interactive Color Legend

This example shows an interactive scatter plot of the Iris Dataset, where hovering over a species name in the color legend fades all non-matching data points and highlights the selected group. The visualization uses React components to render SVG circles scaled with d3.scaleLinear and colored by d3.scaleOrdinal, while the legend interacts through mouse events managed by React state.

Jul 28, 2021

Loading thumbnail…

Fork of Interactive Color Legend

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length against sepal width with colored circles representing species. Built with React and D3 v5, it uses `scaleLinear` for axes and `scaleOrdinal` for color mapping. An interactive color legend allows hovering over species names, which filters the displayed points by fading non-matching species while highlighting the selected group. The SVG rendering includes axes from `AxisBottom` and `AxisLeft`, with tooltips provided through SVG `<title>` elements.

Jul 28, 2021

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width with points colored by species. Hovering over a species name in the ordinal color legend highlights only the matching marks and fades others. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and custom SVG components for rendering. Data loads via `d3.csv` and interactivity relies on React state for hover handling.

Jul 28, 2021