Dataviz 9 - Scatter plot with Menus

100%

Dataviz 9 - Scatter plot with Menus

✓ Published1🌍 Public

Last edited Nov 26, 2021

Created on Nov 26, 2021

This interactive scatter plot explores the Iris Dataset, allowing users to dynamically select which flower measurements appear on the x- and y-axes via dropdown menus. Each point represents a flower specimen, positioned according to its sepal and petal dimensions. The visualization uses React for state management and rendering, while D3.js v5 handles data loading, linear scaling (scaleLinear), and SVG axis generation. The data is parsed from a CSV file using D3’s csv function, and axis labels update dynamically to reflect the selected attributes.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Dataviz 9 - Scatter plot with Menus (Polished)

This interactive scatter plot visualizes the classic Iris Dataset, displaying measurements of sepal and petal dimensions for three flower species. Dropdown menus on the left allow users to switch which quantitative attributes are plotted on the X and Y axes, with axis labels updating accordingly. Built with React and D3 v5, the visualization uses D3’s `scaleLinear` for axes, `extent` for domain calculation, and leverages SVG circles for each data point. Data is loaded asynchronously via D3’s `csv` function, with dropdowns implemented using the react-dropdown library.

RRyAlpha

96% match

Loading thumbnail…

Dataviz 9 - Scatter plot with Menus (Coloured)

This interactive scatter plot visualizes the Iris Dataset, letting users independently choose which of the four flower measurements to plot on the X and Y axes using React dropdown menus. Species are distinguished by color through a d3.scaleOrdinal mapping to a three-color palette. The visualization is rendered as SVG using React components, with axes and marks generated via d3.scaleLinear, d3.extent, and custom React components for the bottom and left axes, alongside d3.csv for data loading and d3.format for tick labels.

RRyAlpha

96% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to select which flower attributes appear on the x and y axes via dropdown menus. The visualization updates dynamically using React state management, with scales from D3 v6 (scaleLinear, extent) mapping petal and sepal measurements to SVG coordinates. Axes are rendered as reusable React components, and data loading uses D3’s csv function with type coercion. The plot displays all species together as teal circles, with axis labels reflecting the selected attributes.

WWolfgang

95% 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 dropdown menus that select which attributes appear on each axis. The visualization uses React for state management and D3 v7 for scales and SVG rendering, with axes generated by custom axis components and circles representing individual flowers. Data is loaded asynchronously via D3’s `csv` parser from a remote GitHub gist, and the plot updates dynamically as menu selections change.

Ww.fukuyama@gmail.com

94% match

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes the Iris Dataset, allowing users to explore relationships between four numeric flower measurements and species through interactive dropdown menus that control which attributes appear on the x and y axes. The visualization uses React to manage state for selected attributes, while D3.js handles the linear scales, axis generation, and data loading via `csv`. The SVG rendering displays circles colored teal, with axis labels updating dynamically based on menu selections.

Wwindwaver

94% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, featuring dropdown menus that let viewers select which numerical attributes to display on the x and y axes. The visualization renders data points as SVG circles using React components, with axes generated from D3 scales (scaleLinear) and tick formatting via the format function. Users can compare any combination of sepal and petal measurements, with axis labels updating dynamically to reflect the current selection. The chart loads CSV data asynchronously using D3’s csv parser, and menu interactions update state through React’s useState hook.

Vvesnaj

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

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

94% match