Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Dec 18, 2022

Created on Dec 18, 2022

This interactive scatter plot visualizes the Iris dataset, showing measurements of sepal and petal dimensions. Users can change the attribute mapped to the x-axis via a dropdown menu, while the y-axis remains fixed to sepal width. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `csv` for data loading, and SVG circles for marks. Axes are rendered as separate React components with tick marks and labels, and hovering reveals tooltips.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, enabling exploration of relationships between sepal and petal measurements. Users can dynamically select which numerical attribute to display on each axis via dropdown menus, with the plot updating instantly. The visualization is built using React and D3 v7, rendering SVG circles and axes. The `scaleLinear`, `extent`, `csv`, and `format` D3 functions are used for data loading, scaling, and tick formatting, while React `useState` manages the selected attributes.

SSong Tao Chen

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. Dropdown menus control which attributes are plotted on the x- and y-axes, with axis labels and scales updating accordingly. The visualization uses React with D3’s `scaleLinear`, `extent`, and `format` for scaling and tick formatting, rendering SVG circles for data points. Each point includes a tooltip showing its exact x-value, and the data is loaded via D3’s `csv` from a remote URL.

DDeborah Ong

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. Two dropdown menus let viewers independently select which attribute maps to the x-axis and y-axis, with the chart updating dynamically. The visualization is built using React for component rendering and D3 v5 utilities for data loading, linear scaling, and axis generation, producing an SVG output. Data is fetched from a CSV file using D3’s `csv` function, and circles represent individual flowers with tooltips showing values.

MMorgan Worrell

97% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus that control which attributes appear on the x and y axes. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.extent to compute domains, and d3.csv to load data. SVG circles represent individual flowers, with tooltips showing exact values. The interface includes labeled axes that update dynamically, styled with custom CSS and the Poppins font.

SSabin Bhandari

97% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, displaying measurements such as sepal length and petal width. Users can select which attribute is mapped to the x-axis and y-axis using two drop-down menus, built with React’s `useState` hook. The visualization, rendered as SVG, uses `d3.scaleLinear` and `d3.extent` to compute scales, while `d3.csv` loads the data. Each point is a circle with a native SVG `<title>` element for hover tooltips, and axes are generated from tick values using custom React components.

RRiccardo De Lucia

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

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers independently select which attribute appears on the x- and y-axes, with axes and labels updating dynamically. Built with React and D3 v7, the visualization uses `scaleLinear` for coordinate mapping and renders data points as SVG circles. The data is loaded via D3's `csv` parser, and reusable axis and mark components keep the code modular.

ZZoe Ferencova

96% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between different measurements of iris flowers. Through dropdown menus, viewers can dynamically select which attribute controls the x-axis (sepal length/width, petal length/width) and which controls the y-axis (sepal length/width, petal length/width), with labeled axes updating accordingly. Built with React and D3 v7, the visualization uses D3's `scaleLinear` and `extent` functions to compute scales from the CSV data, rendered as SVG circles with tooltips.

JJoe Hutchins

96% match