Skip to main content
SimilarExport ZIP
100%

scatterplot with menus

✓ Published1🌍 Public
BBlake McCarty
Last edited May 14, 2022
Created on May 13, 2022
Forked from scatterplot

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.

AI-generated description

Half of the smiley HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot displays the Iris dataset, allowing viewers to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis through the dropdown menus. Built with React hooks and D3.js v5, the visualization uses `scaleLinear` to map data ranges to SVG coordinates and renders circles for individual specimens. The axis components dynamically update with `tickFormat` for readable labels, while hover tooltips reveal exact values. The code demonstrates a reusable pattern for building linked interactive visualizations from CSV data using `d3.csv` and React state management.

Ppatasky
97% 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
96% 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
96% match
Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot displays the Iris dataset, allowing exploration of relationships between sepal and petal measurements. Users select which attributes to plot on the x and y axes using dropdown menus, with axis labels updating to reflect the chosen variables. The visualization is built with React and rendered as SVG using d3.v7's scaleLinear function for coordinate mapping. The data is loaded from a CSV file using d3.csv, and the plot includes title formatting, axis ticks, and tooltips for data point inspection.

Jjackcaldwellnichols
96% 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 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
96% 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
95% 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
95% match
Loading thumbnail…

Scatter Plot with Menu

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus. Users select which attribute appears on each axis, and the SVG scatter plot updates the x and y scales accordingly. The visualization uses React hooks for state management, d3.scaleLinear for scaling, and d3.extent for domain calculations. Data is loaded asynchronously from a CSV file using d3.csv, with numeric values parsed on ingestion. The interface includes custom axis components with tick marks and axis labels.

SSam Hege
95% match