Scatterplot with menus

100%

Scatterplot with menus

✓ Published1🌍 Public

Last edited Sep 12, 2021

Created on Sep 12, 2021

This scatterplot displays the Iris flower dataset, mapping petal and sepal measurements as points. Two dropdown menus let users select which numeric attributes to plot on the X and Y axes, with axis labels updating dynamically. The visualization is built with React components, using D3 v7’s `scaleLinear` and `extent` for axes and scales, while rendering SVG circles for each data point. CSV data is loaded via D3’s `csv` utility and formatted with `format` for tick labels.

AI-generated description

Rendering CSS named colors from MDN.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus that select which attributes appear on the x and y axes. The visualization uses D3’s `scaleLinear` and `extent` functions to map data to SVG coordinates, while React manages component state and re-rendering when menu selections change. The data is loaded asynchronously via D3’s `csv` method, and circles represent individual flowers with tooltips showing the x-axis value.

MmohitPassan

95% match

Loading thumbnail…

scatterplot with menus

This interactive scatterplot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis via two dropdown menus. Built with React and D3 v7, the visualization uses `scaleLinear` and `extent` to compute scales, renders SVG circles for data points, and includes custom `AxisBottom` and `AxisLeft` components for tick marks and labels. The `useData` hook loads the CSV data with `d3.csv`, and the `Marks` component adds tooltip titles for each point.

BBlake McCarty

94% match

Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between four numeric measurements—sepal length, sepal width, petal length, and petal width—by selecting which attribute appears on each axis via two dropdown menus. The visualization renders data points as SVG circles, with scales created using d3.scaleLinear and extents computed via d3.extent. Axis components generate tick marks and labels, while React hooks manage the selected attributes and trigger re-renders upon menu changes. The data loads asynchronously from a CSV file using d3.csv.

KKolezhannochka

94% match

Loading thumbnail…

Scatterplot with menus

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which attribute appears on each axis, with options including sepal length, sepal width, petal length, petal width, and species. The visualization uses React to manage state for the selected axes and D3 v5’s `scaleLinear`, `extent`, and `csv` to load and scale the data. SVG circles render each data point with a tooltip, while custom React components draw tick marks, axis labels, and the dropdown controls.

Mmartinbirch@outlook.dk

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

94% 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 select which attributes appear on the x and y axes, dynamically updating the visualization. Built with React and D3 v5, the example uses `scaleLinear` for scaling, `extent` for domain calculation, and SVG circles for data points. The axes are custom React components that render tick marks and labels, while hover tooltips display formatted values via SVG `<title>` elements.

MMarat

94% 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 flower species. Two dropdown menus dynamically control which quantitative attribute is displayed on the x- and y-axes, with axes, labels, and data points updating in real time. Built with React and D3 v5, the visualization renders as SVG, using d3.scaleLinear for axis scaling and d3.extent for data domains. Hovering over any circle reveals its exact value via SVG titles.

Nn.koldovsky@gmail.com

94% match

Loading thumbnail…

Scatter plot with menu

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements (sepal length/width, petal length/width) appear on each axis via dropdown menus. The chart uses React state to track selected attributes, updating the axes and circles accordingly. Built with D3 scales (d3.scaleLinear, d3.extent) and custom SVG axis components, each data point renders as a circle with a tooltip showing its x-value. The CSV data loads asynchronously via d3.csv from a GitHub gist.

Ccshm407

94% match