Skip to main content
SimilarExport ZIP
100%

dv2020-ep31-viz32 - scatter plot w/ menus (basic)

✓ Published1🌍 Public
Zzach b.
Last edited Mar 22, 2023
Created on Mar 22, 2023

This interactive scatter plot displays the Iris dataset, allowing users to select which flower measurements appear on the X and Y axes via dropdown menus. Built with React and D3.js (d3.scaleLinear, d3.csv), it renders SVG circles with tooltips showing the selected values, while axis labels update dynamically based on menu choices. The visualization uses d3.extent, d3.min, and d3.max for scale domains, with a D3 tick system for axis generation.

AI-generated description

a scatter plot of The Iris Dataset.

now with menus!

Episode 31

MIT Licensed

Similar vizzes

Loading thumbnail…

dv2020-ep32-viz33 - scatter plot w/ menus

This interactive scatter plot displays the Iris Dataset, allowing users to explore relationships between four measured attributes. The visualization uses dropdown menus to select which attributes are plotted on the x and y axes, with the chart updating dynamically. Built with React and D3 v5, the SVG rendering uses `scaleLinear` for axes and circle marks with tooltips. The data is loaded from a CSV file, and the menus are implemented using the `react-dropdown` library.

Zzach b.
96% match
Loading thumbnail…

dv.32 - snazzy scatter plot: w/ menus

This interactive scatter plot visualizes the Iris Dataset, displaying measurements of sepal and petal dimensions with points colored by species. Two dropdown menus allow users to select which attribute appears on the X and Y axes, re-scaling the plot accordingly. Built with React and D3 v6, it uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for species colors, and renders SVG circles with tooltips showing exact values.

Zzach b.
93% match
Loading thumbnail…

dv.31 - scatter plot: w/ menus

This interactive scatter plot visualizes the Iris Dataset, showing measurements of sepal and petal dimensions for three flower species. Users can dynamically select which attribute to display on the x-axis and y-axis via dropdown menus that populate the D3.js linear scales. The React application renders circles in SVG format, with species color-coded using d3.scaleOrdinal with the schemeCategory10 palette. Hovering over any circle reveals a tooltip with the species name and exact coordinates, while axis labels update to reflect the current selections.

Zzach b.
93% match
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
91% match
Loading thumbnail…

Dataviz 2020_Ep31 - 24. Scatter Plot with Menus

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.

MMinwoo Pak
91% 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
91% match
Loading thumbnail…

Scatterplot V2 w/ menus

This interactive scatterplot visualizes the Iris dataset, allowing users to dynamically select which flower measurements appear on the x- and y-axes via dropdown menus. The chart renders as an SVG using React, with axes generated through custom components and scales from d3-scale. Dropdown menus are implemented with ReactDropdown and d3.csv loads the data. Axis labels update automatically to reflect selected attributes, and each data point includes a native SVG tooltip showing its x-value.

SSophia Cofone
90% match
Loading thumbnail…

scatter plot with menus

An interactive scatter plot of the Iris dataset allows users to select which flower measurements appear on the x- and y-axes via dropdown menus. Built with React and D3 v5, it renders points as SVG circles, with axes labeled according to the chosen attributes. D3’s `scaleLinear`, `extent`, and `csv` functions handle data loading and scaling, while React’s `useState` manages the selected dimensions. The plot’s axes are generated through custom React components, and hovering reveals exact values via SVG `<title>` tooltips.

DDanier
90% match