Scatterplot with menus

100%

Scatterplot with menus

✓ Published1🌍 Public

Last edited Mar 12, 2021

Created on Mar 12, 2021

This interactive scatterplot displays the Iris flower dataset, using two dropdown menus to select which attributes are plotted on the x- and y-axes. Built with React and D3 v6, the visualization renders data points as SVG circles with tooltips showing exact values. The code uses D3's `scaleLinear` for axis scaling and `csv` for data loading, while React's `useState` and `useEffect` hooks manage menu selections and asynchronous data fetching.

AI-generated description

Iris dataset used to display scatter plot. https://gist.githubusercontent.com/surikmeetr/a0165a953a1b5450052bdbc3debdd3fc/raw/0e7a9b0a5d22642a06d3d5b9bcbad9890c8ee534/iris.csv

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, allowing exploration of relationships between four flower measurements. Two dropdown menus let users select which attribute is mapped to the x-axis and y-axis, dynamically updating the plotted circles and axis labels. The visualization is built with React and rendered as SVG, using D3 v5 utilities like `scaleLinear` for axes and `csv()` for data loading. Hovering over a point reveals its x-value via an SVG `<title>` tooltip.

AAndrea Picciau

96% match

Loading thumbnail…

Scatter plot with menu

This interactive scatter plot displays the Iris dataset, allowing viewers to select which floral measurements appear on the x- and y-axes via two dropdown menus. Built with React and D3 v7, the visualization renders points as SVG circles, with axes generated from d3.scaleLinear and extent functions. The code uses d3.csv for data loading and React's useState hook to manage attribute selections, while Bootstrap styles the menu controls.

GGabriel

96% match

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot displays the Iris dataset, allowing users to select which measurements appear on the x- and y-axes using two React dropdown menus. The visualization uses React state to manage the selected attributes, and D3 v5 functions like `scaleLinear` and `extent` to compute scales from the CSV data. The SVG rendering includes custom React components for the axes, marks, and dropdowns, with circular points colored in teal that include native tooltips showing formatted values.

Ddumbdataguy@gmail.com

95% 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

95% 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

95% match

Loading thumbnail…

Scatter plot with menus

This scatter plot of the Iris dataset displays the relationships between flower measurements, with interactive dropdown menus to select the attributes for the x and y axes. The chart shows all data points colored by species, and hovering over the color legend highlights a single species while fading the others. Built with React and D3, the visualization uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.extent` for scales and domains, while custom React components render SVG axes, circles, and the legend.

TTakuya Kitazawa

95% match

Loading thumbnail…

Scatterplot with menus

This interactive scatterplot displays Iris flower measurements, allowing users to select which attribute appears on the X and Y axes via dropdown menus. Built with React hooks (useState, useEffect) and D3 v5 scaleLinear and extent utilities, it renders SVG circles with axis components and tooltips, loading data from a CSV URL through D3’s csv function. The visualization updates scales and labels dynamically based on menu selections, with formatted axis ticks using d3.format.

MMarco Malvicini

95% match

Loading thumbnail…

Scatter plot with menus

A scatter plot of the Iris Dataset allows users to explore relationships between flower measurements via two dropdown menus for selecting X and Y axes. Points are colored by species, with a legend that dims non-hovered categories. Built with React and D3 v7, the visualization uses `scaleLinear`, `scaleOrdinal`, `extent`, and `csv` for data loading, rendering as SVG with custom axis components and ReactDropdown for the menus.

FFrederick O'Brien

95% match