Skip to main content
SimilarExport ZIP
100%

Dataviz 2020_Ep31 - 24. Scatter Plot with Menus

✓ Published1🌍 Public
MMinwoo Pak
Last edited Jul 18, 2021
Created on Jul 18, 2021

This interactive scatter plot displays the Iris flower dataset, with the x and y axes each controlled by dropdown menus that let users select which of the four numeric attributes to compare. The visualization shows how different combinations of sepal and petal measurements distribute across the sample. Built with React and d3.scaleLinear, the chart renders SVG circles positioned by the selected attributes, with axis labels generated from the menu choices. Data loading uses d3.csv from a remote gist, and the React useState hooks manage the dropdown selections.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Dataviz 2020_Ep32 - 25. Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to select which measurement attributes appear on the X and Y axes via dropdown menus. Built with React and rendered as an SVG, it uses D3 utilities like `scaleLinear` for axis scaling, `extent` for domain calculation, and `csv` for data loading. The visualization displays the data points as teal circles, with tick marks and axis labels generated by custom React components, all styled with the Poppins font.

MMinwoo Pak
95% match
Loading thumbnail…

Dataviz 9 - Scatter plot with Menus

This interactive scatter plot explores the Iris Dataset, allowing users to dynamically select which flower measurements appear on the x- and y-axes via dropdown menus. Each point represents a flower specimen, positioned according to its sepal and petal dimensions. The visualization uses React for state management and rendering, while D3.js v5 handles data loading, linear scaling (scaleLinear), and SVG axis generation. The data is parsed from a CSV file using D3’s csv function, and axis labels update dynamically to reflect the selected attributes.

RRyAlpha
94% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, featuring dropdown menus that let viewers select which numerical attributes to display on the x and y axes. The visualization renders data points as SVG circles using React components, with axes generated from D3 scales (scaleLinear) and tick formatting via the format function. Users can compare any combination of sepal and petal measurements, with axis labels updating dynamically to reflect the current selection. The chart loads CSV data asynchronously using D3’s csv parser, and menu interactions update state through React’s useState hook.

Vvesnaj
94% match
Loading thumbnail…

Dataviz 9 - Scatter plot with Menus (Polished)

This interactive scatter plot visualizes the classic Iris Dataset, displaying measurements of sepal and petal dimensions for three flower species. Dropdown menus on the left allow users to switch which quantitative attributes are plotted on the X and Y axes, with axis labels updating accordingly. Built with React and D3 v5, the visualization uses D3’s `scaleLinear` for axes, `extent` for domain calculation, and leverages SVG circles for each data point. Data is loaded asynchronously via D3’s `csv` function, with dropdowns implemented using the react-dropdown library.

RRyAlpha
94% match
Loading thumbnail…

Dataviz 9 - Scatter plot with Menus (Coloured)

This interactive scatter plot visualizes the Iris Dataset, letting users independently choose which of the four flower measurements to plot on the X and Y axes using React dropdown menus. Species are distinguished by color through a d3.scaleOrdinal mapping to a three-color palette. The visualization is rendered as SVG using React components, with axes and marks generated via d3.scaleLinear, d3.extent, and custom React components for the bottom and left axes, alongside d3.csv for data loading and d3.format for tick labels.

RRyAlpha
93% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to select which numeric attributes appear on the x- and y-axes via dropdown menus. Built with React and D3 v5, it renders SVG circles for each data point, with axes generated through custom React components. The code uses `d3.scaleLinear` for scaling, `d3.extent` for domains, and `d3.csv` for loading data, while `ReactDropdown` provides the menu controls.

Ttharuta
93% match
Loading thumbnail…

Ep. 31 | Scatter Plot with Menus

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.

YYee Han
93% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes the Iris Dataset, allowing users to explore relationships between four numeric flower measurements and species through interactive dropdown menus that control which attributes appear on the x and y axes. The visualization uses React to manage state for selected attributes, while D3.js handles the linear scales, axis generation, and data loading via `csv`. The SVG rendering displays circles colored teal, with axis labels updating dynamically based on menu selections.

Wwindwaver
93% match