Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus

✓ Published1🌍 Public
Bbsolomon103
Last edited Jan 13, 2022
Created on Jan 8, 2022

This interactive scatter plot displays the Iris flower dataset, plotting measurements like sepal length and width against each other. Two dropdown menus let users select which quantitative attributes appear on the x- and y-axes, with the axes labels updating accordingly. The visualization is built with React and D3 v5, using scaleLinear for both axes and SVG circles for each data point, with axis components rendered as reusable React functions. The dataset is loaded as CSV from a GitHub gist using d3.csv, and the ReactDropdown component provides the menu interface.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, plotting sepal and petal measurements against each other. Two dropdown menus allow users to select which measurement attributes appear on the x- and y-axes, with axis labels updating accordingly. The visualization uses React for component state and rendering, with d3-scale (scaleLinear) for positioning and d3.extent to compute domains. SVG circles represent data points with hover tooltips, while custom React components (AxisBottom, AxisLeft, and Dropdown) handle axes and menu interactions. Data loads asynchronously via d3.csv from a GitHub-hosted CSV file.

Llaplantalaplanta
98% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, plotting sepal and petal measurements against one another. Two dropdown menus let a viewer select which attribute appears on the x- and y-axes, with the scales and axes updating accordingly. Built with React and D3 v7, the visualization uses `scaleLinear` for axes, `extent` to compute domains, and `csv` to load data from a remote URL. Circles are rendered as SVG elements, with native `<title>` tooltips showing formatted values. The chart reflects user selections through React state and the `Dropdown` component.

LLewis Ward
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris Dataset, displaying measurements of sepal and petal dimensions for different flower species. Two dropdown menus allow users to dynamically select which attributes appear on the X and Y axes, with all five available measurements (including species) as options. Built with React and D3 v5, the visualization updates scales and axes reactively when selections change, rendering points as SVG circles with tooltips. The code uses `scaleLinear` for axis scaling, `extent` for domain calculation, and custom React components like `AxisBottom`, `AxisLeft`, and `Dropdown` to structure the interface.

EEdgar Alves
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus, built with ReactDropdown, dynamically control which attributes map to the x and y axes, with the species determining point color through a d3.scaleOrdinal color scale. The React-based visualization uses d3.scaleLinear for axes, renders SVG circles via the Marks component, and includes tooltips showing formatted values. Data loading is handled by d3.csv with type coercion for numeric columns.

Vvmonney
96% match
Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset with interactive dropdown menus for selecting which flower measurements to plot on the x and y axes. The menus allow users to switch between sepal length, sepal width, petal length, petal width, and species for either axis, with axis labels updating accordingly. The visualization uses D3's `scaleLinear` for scaling, React's `useState` for managing selections, and renders an SVG with tick marks, axis labels, and circular marks.

Rroc286
96% match
Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris Dataset displays sepal and petal measurements, with dropdown menus allowing users to select which attributes appear on the x- and y-axes. The visualization uses React with D3's `scaleLinear` and `extent` to map data to SVG circles, while axes are rendered via custom `AxisBottom` and `AxisLeft` components. The dropdowns update state to re-scale and re-render the marks dynamically, with formatted tick labels using D3's `format`.

RRajat Dangat
96% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, allowing users to compare any two attributes by selecting them from dropdown menus for the X and Y axes. The visualization updates dynamically, with axis labels and scales recalculating to reflect the chosen measurements. Built with React and D3 v5, it uses `scaleLinear` and `extent` to derive scales, renders SVG circles for each data point, and organizes its code into reusable components for axes, marks, and dropdowns. The data is loaded from a CSV file via D3’s `csv` function.

JJohn Patrick Banas
96% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing the user to select which flower measurements (sepal length, sepal width, petal length, petal width, or species) appear on the x- and y-axes via dropdown menus. The visualization is built with React and D3 v5, using D3’s `scaleLinear` for axis scaling and the `csv` function to load data. SVG circles represent each iris, with axis ticks and labels rendered by custom React components.

Jjuanmy400
96% match