Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus

✓ Published1🌍 Public
CCodeDuckie99
Last edited Mar 13, 2021
Created on Mar 13, 2021

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris Dataset, allowing viewers to explore relationships between different floral measurements by selecting which attributes to plot on the X and Y axes through two dropdown menus. Built with React and D3 v5, it uses the `scaleLinear` API to map data to SVG coordinates, with custom `AxisBottom`, `AxisLeft`, and `Marks` components rendering the axes and circle glyphs. The visualization updates dynamically when menu selections change, and each data point includes a native SVG tooltip showing its value.

Jj-PGi
98% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements via dropdown menus. The chart displays data points as circles, with the x-axis and y-axis representing selected attributes like petal length or sepal width. Built with React and D3 utilities, the visualization uses d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.csv for data loading. Users switch attributes through React state management, triggering real-time updates to the axes and marks rendered as SVG circles with tooltips.

LLaura Johnson
98% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing viewers to explore relationships between different flower measurements by selecting which attributes to plot on the x- and y-axes via dropdown menus. The SVG rendering uses React to create axis components and circular marks, with D3's `scaleLinear` and `extent` functions managing the data domains. Hovering over a circle reveals a tooltip with its corresponding x-value, implemented through SVG `<title>` elements.

SSai Phaltankar
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, allowing users to compare any two attributes by selecting them from dropdown menus for the X and Y axes. The visualization updates dynamically, with axis labels and scales recalculating to reflect the chosen measurements. Built with React and D3 v5, it uses `scaleLinear` and `extent` to derive scales, renders SVG circles for each data point, and organizes its code into reusable components for axes, marks, and dropdowns. The data is loaded from a CSV file via D3’s `csv` function.

JJohn Patrick Banas
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between measurements by selecting which attributes appear on the x- and y-axes via dropdown menus. The visualization uses React with D3 v5 to render SVG circles, with scales and axes built through d3.scaleLinear and d3.axis components. Data is loaded asynchronously from a CSV file using d3.csv, and axis labels update dynamically based on menu selections.

Ccynichole
97% match
Loading thumbnail…

Scatter Plot Iris with Menus

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between four numeric flower measurements and species. Two dropdown menus control which attributes appear on the x- and y-axes, with axis labels updating dynamically. The visualization uses React with D3 v7 scales and SVG rendering, loading data via D3’s `csv` function. Points are drawn as circles with native SVG `<title>` tooltips, while reusable `AxisBottom` and `AxisLeft` components generate tick marks and labels using D3’s scale methods.

EEFezerKW
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements. Two dropdown menus independently select the attributes plotted on the x and y axes, with axes and labels updating accordingly. Built with React and D3 v5, it uses `scaleLinear`, `extent`, and `csv` for data loading and scaling. Points are rendered as SVG circles, with tooltips showing formatted values. The interface demonstrates a simple pattern for linking dropdown controls to dynamic axis updates.

CCurran Kelleher
97% 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
97% match