Scatterplot with Menus

100%

Scatterplot with Menus

✓ Published1🌍 Public

Last edited Mar 5, 2023

Created on Mar 5, 2023

This interactive scatterplot displays the classic Iris flower dataset, plotting measurements such as petal length and sepal width. Users can dynamically change which numerical attribute is shown on the X and Y axes via dropdown menus, allowing for exploration of relationships between the four floral characteristics. Built with React and rendered as an SVG, the visualization uses D3's `scaleLinear` and `extent` for axis scaling and data domain calculation, with `AxisBottom`, `AxisLeft`, and `Marks` components handling the chart elements. The CSV data is loaded via D3's `csv` utility.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris flower dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attribute is mapped to the x and y axes via dropdown menus. The visualization is built with React and D3 v5, rendering an SVG with custom axis components and circular marks that display tooltips on hover. The menus dynamically update the plot, which uses d3.scaleLinear for axis scaling and d3.extent for data domains, drawing from a CSV file loaded with d3.csv.

MMark Simpson

97% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris flower dataset, which contains measurements of sepal and petal dimensions across three species. Users can dynamically select which numerical attribute appears on the x-axis and y-axis using dropdown menus built with React hooks (useState). The visualization uses d3.scaleLinear for both axes, computes domains via d3.extent, and renders the plot as an SVG with custom React components for the axes and circular marks. D3’s csv loader fetches the data from a remote GitHub gist, and axis ticks are formatted with d3.format.

FFonda Irena Santoso

96% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements such as petal length and sepal width. Users select which attributes to plot on the X and Y axes via dropdown menus, with the axes, labels, and data points updating dynamically. The visualization is built with React for UI state management and D3 v5 scales for positioning. The scene is rendered as an SVG, using React components like `AxisBottom`, `AxisLeft`, and `Marks` to compose the chart, and it employs D3’s `scaleLinear` and `extent` for data mapping.

MMichael Bruno

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 classic Iris Data Set, allowing users to explore relationships between four flower measurements (sepal and petal length and width) and species. Two dropdown menus let users select which attributes to plot on the x-axis and y-axis, with labels updating accordingly. Built with React and D3 v6, the visualization uses `scaleLinear` for axes, `extent` for domain calculation, and renders SVG circles with tooltips via `<title>` elements. Axis tick marks and labels are generated from D3's scale objects.

RRMartins11

96% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements via dropdown menus. The chart displays data points as circles, with the x-axis and y-axis representing selected attributes like petal length or sepal width. Built with React and D3 utilities, the visualization uses d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.csv for data loading. Users switch attributes through React state management, triggering real-time updates to the axes and marks rendered as SVG circles with tooltips.

LLaura Johnson

96% 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 by selecting which attributes appear on the X and Y axes via dropdown menus. The visualization renders each flower as an SVG circle, with tooltips showing exact values on hover. Built with React for the interface and D3 v5 for scales, axes, and data loading through `d3.csv`, the chart updates scales and labels dynamically when menu selections change. The code uses `scaleLinear` with `extent` for domain calculation and custom React components for the axes and dropdowns.

Wwinniepooh520

96% match

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

96% match