Skip to main content
SimilarExport ZIP
100%

Ep. 31 | Scatter Plot with Menus

✓ Published1🌍 Public
YYee Han
Last edited Dec 29, 2020
Created on Dec 29, 2020

This interactive scatter plot visualizes the classic Iris dataset, letting users explore relationships between sepal and petal measurements across flower species. Two dropdown menus, built with React state management, dynamically select which attribute appears on each axis, updating the scatter plot and axis labels in real time. The visualization uses D3 v6 scales and SVG rendering for the circles, with custom React components for the axes and marks. Data is loaded asynchronously via D3’s `csv` function, and each point includes a native SVG `<title>` tooltip displaying its x-value.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Ep. 32 | Polished Scatter Plot with Menus

This scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions for different flower species. Two dropdown menus, built with React and react-dropdown, allow users to select which attribute appears on the x and y axes. The chart uses d3.scaleLinear for both scales, with Axes and Marks components rendering SVG circles containing tooltips. Data is loaded asynchronously via d3.csv in a custom useData hook, with styled axes and labels using the Poppins font.

YYee Han
95% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that select which attributes appear on each axis. The visualization uses React for state management and D3 v7 for scales and SVG rendering, with axes generated by custom axis components and circles representing individual flowers. Data is loaded asynchronously via D3’s `csv` parser from a remote GitHub gist, and the plot updates dynamically as menu selections change.

Ww.fukuyama@gmail.com
94% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers independently select which attribute appears on the x- and y-axes, with axes and labels updating dynamically. Built with React and D3 v7, the visualization uses `scaleLinear` for coordinate mapping and renders data points as SVG circles. The data is loaded via D3's `csv` parser, and reusable axis and mark components keep the code modular.

ZZoe Ferencova
93% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris Dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus, implemented with React state, dynamically select which numerical attributes map to the x and y axes. The visualization renders as an SVG using React with D3’s `scaleLinear` for axis scales and `extent` to compute domains from the CSV data. Circle marks use a tooltip via the `<title>` element.

Eevers-codeshop-ai
93% match
Loading thumbnail…

Scatter Plot With Menues

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Dropdown menus dynamically select which numerical attribute appears on each axis, updating the chart in real time. Built with React and D3 v6, the visualization uses d3.scaleLinear for scales and d3.extent for domains, rendered as SVG circles with tooltips. The code loads the data via d3.csv and demonstrates reusable axis and mark components.

Ppsabela
93% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, enabling exploration of relationships between sepal and petal measurements. Users can dynamically select which numerical attribute to display on each axis via dropdown menus, with the plot updating instantly. The visualization is built using React and D3 v7, rendering SVG circles and axes. The `scaleLinear`, `extent`, `csv`, and `format` D3 functions are used for data loading, scaling, and tick formatting, while React `useState` manages the selected attributes.

SSong Tao Chen
93% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attributes appear on the X and Y axes via dropdown menus. The visualization renders each flower as an SVG circle, with tooltips showing exact values on hover. Built with React for the interface and D3 v5 for scales, axes, and data loading through `d3.csv`, the chart updates scales and labels dynamically when menu selections change. The code uses `scaleLinear` with `extent` for domain calculation and custom React components for the axes and dropdowns.

Wwinniepooh520
93% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis via dropdown menus. The React-based interface updates the d3 scales and rendered SVG circles dynamically when the user changes selections. The code uses d3.csv for data loading, d3.scaleLinear for axis scaling, and custom React components for rendering axes and marks.

Aaakarsh satyam
93% match