Scatter Chart with Menus

100%

Scatter Chart with Menus - React & D3

✓ Published1🌍 Public

Last edited Oct 18, 2021

Created on Oct 18, 2021

Forked from Stylised Scatter Chart with React & D3

This interactive scatter chart displays the Iris flower dataset, letting users swap the x- and y-axis variables among four numeric measurements and the categorical species attribute via React dropdown menus. The visualization uses D3.js v7 scales (linear and ordinal) to map data to SVG circles, with custom React components for axes and marks. It also demonstrates hybrid state management, where React hooks control the selected attributes while D3 handles the data-driven scales and positioning.

AI-generated description

Menus with React & D3

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot, built with React and D3.js, displays the Iris flower dataset, allowing users to select which attribute is plotted on the x-axis and y-axis via dropdown menus. The visualization renders data points as circular marks within an SVG, with axis labels and tick marks generated using D3's `scaleLinear` and custom components. The menus update the selected attributes, triggering a re-render of the chart with the new scales, while a tooltip on each point shows its x-value.

SSerind Joshua McCue

94% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the classic Iris dataset, allowing users to compare any two numerical attributes by selecting them from dropdown menus for the X and Y axes. Each point represents a flower sample, with hover tooltips revealing precise values. Built with React and D3 v5, the visualization uses SVG rendering and scales created via `d3.scaleLinear` and `d3.extent`, with axes generated by custom React components. The menus update the state to re-render the chart dynamically.

MMario Ibarra

93% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, plotted with D3 scales and rendered as SVG circles via React components. Two dropdown menus, built with React state, let users select which of the four flower measurements (sepal length/width, petal length/width) to map to the x- and y-axes, with axis labels updating accordingly. The visualization uses `d3.csv` for data loading, `d3.scaleLinear` for axes, and custom React components for axes and marks, with native SVG `<title>` elements for hover tooltips.

LLisa Wagner

93% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, letting users choose which flower measurements to compare on the X and Y axes. Two dropdown menus, built with React state, control the selected attributes; the chart updates the scales, axes, and labels accordingly. The visualization uses D3 v5 scales and SVG rendering through React components, with tooltips on each circle showing the formatted X value. Data is loaded asynchronously via d3.csv from a remote gist.

Ssophburke

93% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between different flower measurements by selecting which attributes appear on the x and y axes via two dropdown menus. The visualization is built using React with D3.js v6, rendering SVG circles with tooltips that show precise values on hover. The code uses D3's `scaleLinear`, `extent`, and `format` functions for axis scaling and tick formatting, while the custom `AxisBottom`, `AxisLeft`, `Marks`, and `Dropdown` components demonstrate a modular approach to building interactive charts within a React framework.

CCodeDuckie99

93% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to select which numeric attributes to plot on the X and Y axes via two dropdown menus. React state manages the selected attributes and triggers re-rendering of the SVG chart, while D3 (d3.scaleLinear, d3.extent) handles scaling and data loading from the CSV file. The chart includes labeled axes with tick marks and circles with tooltips for each data point.

CChristian Potdevin

93% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to select which of four numeric attributes or species appear on the x- and y-axes via dropdown menus. Built with React and D3 v5, the chart renders SVG circles and axes using reusable components like `AxisBottom`, `AxisLeft`, and `Marks`. Data loads through D3’s `csv` utility, while React state (`useState`) manages selections and updates scales with `scaleLinear` and `extent` from D3.

Kkbrookshire420

93% match

Loading thumbnail…

This interactive scatter chart of the Iris dataset allows users to explore relationships between flower measurements by selecting which attributes appear on the x- and y-axes through two dropdown menus built with React state. The chart uses D3 scales (scaleLinear, extent) to map numerical values from the CSV data to SVG circles, with custom React components rendering the axes and marks. Each circle includes a tooltip via the SVG title element, and axis labels update dynamically based on the selected attributes.

Vvijaytayal

93% match