Skip to main content
SimilarExport ZIP
100%

Polished_Scatter_Plot_with_Menus

✓ Published0🌍 Public
Mmartin
Last edited Aug 27, 2021
Created on Jul 20, 2021

This interactive scatter plot displays the Iris Dataset, with dropdown menus to select which floral measurements (sepal length, sepal width, petal length, or petal width) appear on the x- and y-axes. The visualization updates the scales and points in real time based on the user's selections. Built with React and rendered as SVG, it uses a custom hook with `d3.csv` to load data, `d3.scaleLinear` and `d3.extent` to compute scales, and reusable components for axes and marks, including tooltips rendered via SVG `<title>` elements.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Polished Scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, depicting measurements of sepal and petal dimensions for three flower species. Users can dynamically select which quantitative attribute to map to the x-axis and y-axis through dropdown menus, with points colored by species and a corresponding legend. The visualization is built using React with D3’s `scaleLinear`, `scaleOrdinal`, and `extent` functions to compute scales, while SVG components like `AxisBottom`, `AxisLeft`, and `Marks` render the axes, circles, and tooltips. Data is loaded asynchronously via `d3.csv` from a remote GitHub source.

JJonas Carvalho
95% match
Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements appear on the X and Y axes via dropdown menus. The visualization updates in real time, displaying sepal and petal dimensions with axis labels and tooltips. Built with React and D3 v5, it uses `scaleLinear` for axis scaling, SVG circles for data points, and custom components for axes and marks. The chart renders as a static SVG with the data loaded from a remote CSV file.

Cchamce
95% match
Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which measured attribute (sepal length, sepal width, petal length, petal width, or species) appears on the x- and y-axes via dropdown menus built with React Dropdown. The plot uses React hooks (useState, useEffect) to manage selections and load data asynchronously via d3.csv, with d3.scaleLinear for positioning and custom React components (AxisBottom, AxisLeft, Marks) rendering SVG circles and axes with D3’s scale ticks and formatting. Data spans from a public GitHub gist by Curran.

AAjayyy
95% match
Loading thumbnail…

Polished scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between four measurements (sepal and petal length/width) through dropdown menus that select which attribute appears on each axis. The visualization renders as an SVG using React components, with D3 v5 handling data loading via `d3.csv` and scale construction through `scaleLinear` and `extent`. Axis ticks are generated manually from the scales, and hovering over a point reveals its x-value via an SVG `<title>` element. The chart includes styled axes, labels, and a clean layout with margins.

SShuyu Zheng
94% match
Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across species. Dropdown menus dynamically change the X and Y axes, redrawing the SVG circles and axis labels in real time. Built with React and D3 v5, the visualization uses `scaleLinear` for axis scaling, `extent` for domain calculation, and custom `AxisBottom`, `AxisLeft`, and `Marks` components for rendering. Data is loaded asynchronously via `csv()` from a remote URL, with tooltips showing formatted values. The chart includes styled tick marks, axis labels, and a clean Poppins font.

Bbsolomon103
94% match
Loading thumbnail…

Polished Scatter Plot Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that dynamically change the x- and y-axis variables. Built with React and D3 v5, the visualization uses d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.csv for data loading, rendering points as SVG circles with axis labels and tooltips displaying formatted values.

MMarat
94% match
Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that select which attributes appear on the x- and y-axes. The visualization is built with React and D3 v5, using `d3.scaleLinear` for axes, `d3.extent` to compute domains, and `d3.csv` to load the data. SVG circles represent individual flowers, with native `<title>` tooltips showing coordinates. The interface uses React `useState` hooks to manage selected attributes, while reusable components render axes and marks.

MMichael Bruno
94% match
Loading thumbnail…

Polished Scatterplot with menus

This interactive scatterplot displays the Iris dataset, allowing users to select which measured attribute (sepal length, sepal width, petal length, or petal width) appears on the X and Y axes via dropdown menus. The visualization updates the linear scales, axes, and positioned circles in response to menu changes. Built with React and D3 v6, it uses `scaleLinear` for axis scaling, `csv` for data loading, and SVG for rendering. The polished styling includes custom menus from `react-dropdown` and axis formatting with `d3.format`.

Ssurikmeetr
94% match