Skip to main content
SimilarExport ZIP
100%

dv2020-ep32-viz33 - scatter plot w/ menus

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

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.

AI-generated description

a scatter plot of The Iris Dataset.

now with fancy menus! (that don't have labels and don't work with the keyboard.)

Episode 32

MIT Licensed

Similar vizzes

Loading thumbnail…

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

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.

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…

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
92% 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…

Scatter plot with menus

This interactive scatter plot displays the Iris dataset, with dropdown menus allowing users to select which attributes appear on the x- and y-axes. Built with React and D3 v5, the visualization uses `scaleLinear` and `extent` to compute scales, mapping the chosen columns to positions of SVG circles. Axis components render ticks and labels, while the `Marks` component adds tooltips via SVG `<title>` elements. The data is loaded asynchronously from a CSV file using D3’s `csv` function.

SShuyu Zheng
91% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric attributes and species through two dropdown menus. Built with React and D3 v5, the visualization renders SVG circles colored teal, with axes that dynamically update based on selected measurements. The `csv` loader fetches data from a remote URL, while `scaleLinear`, `extent`, and `format` handle scaling and tick labeling. The component-based architecture separates axis rendering, dropdown controls, and mark generation for modular interaction.

Ppnlinyz
91% 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.
90% 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