Skip to main content
SimilarExport ZIP
100%

Final Project V1

✓ Published0🌍 Public
Llubin-liu
Last edited Dec 11, 2020
Created on Dec 11, 2020
Forked from Final Project V1

This interactive scatter plot visualizes the Iris Dataset, allowing users to compare two selected attributes on the x and y axes via dropdown menus. Built with React and D3 v5, it uses `scaleLinear` for axes, `extent` for domains, and SVG circles for marks. Each point includes a native `<title>` tooltip. The chart supports dynamic axis relabeling as selections change.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which attributes to display on each axis via dropdown menus built with React state. The visualization uses D3 v5’s `scaleLinear`, `extent`, and `format` functions to map data values to SVG circle positions rendered through React components, with transitions applied when axes change. The chart includes labeled axes and tooltips showing the x-value for each point.

CChintan Sawla
85% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric flower measurements by selecting which attribute appears on each axis via dropdown menus. Built with React and D3 v5, the visualization renders SVG circles positioned using linear scales, with labeled axes and tick marks generated by custom React components. The data loads asynchronously from a GitHub gist using D3's `csv` parsing function, and the interactive dropdowns update the chart's state to reflect new attribute selections.

XXiaoyu Su
85% match
Loading thumbnail…

310712009

This interactive scatter plot of the Iris Dataset lets users explore relationships between measurements by selecting axes from dropdown menus. Built with React and D3 v5, it renders SVG circles with opacity, using `d3.scalePoint` for positioning and `d3.axisBottom`/`d3.axisLeft` for labeled ticks. The data is loaded via `d3.csv` from a remote gist, with axis labels dynamically updated based on menu selections.

JJoshuoYang
85% match
Loading thumbnail…

Iris_HW1

This interactive scatter plot of the Iris Dataset allows users to choose which flower attributes appear on the x- and y-axes via dropdown menus. The visualization renders circles for each iris sample using SVG, with axes and ticks generated by custom components that leverage `d3.scaleLinear` and `d3.extent`. The code uses `d3.csv` to load data from a remote URL and defines tick marks with `AxisBottom` and `AxisLeft` components. The chart's marks include tooltips, and the UI is built with React and `react-dropdown`.

JJoshuoYang
85% match
Loading thumbnail…

Fork of React + D3 Viz Starter

This interactive scatterplot visualizes the Iris dataset, allowing users to select which attributes to compare on the x- and y-axes via dropdown menus. The SVG rendering uses React state to manage the selected axes and a D3 ordinal color scale to distinguish the three species. Hovering over the color legend highlights points belonging to that species by reducing the opacity of others. The chart follows the margin convention and displays axis tick lines using D3 scales.

Bbart
85% match
Loading thumbnail…

Scatterplot v4 w/ React (menus, color)

This interactive scatterplot visualizes the Iris dataset through a React interface that builds an SVG chart using D3 v5 scales. Users control the X and Y axes via dropdown menus, with axis labels updating automatically based on selection. A color legend maps the three flower species to distinct circle colors, while tooltips reveal values on hover. The visualization uses `d3.scaleLinear`, `d3.scaleOrdinal`, and the `extent` function to generate proportional positioning and categorical color mapping.

SSophia Cofone
85% match
Loading thumbnail…

Iris

This example visualizes the classic Iris dataset as a scatter plot, with dropdown menus that allow the user to select which of the four flower measurements appears on the x-axis and y-axis. Clicking the confirmation button updates the chart, recalculating the linear scales and redrawing the circles. The SVG rendering is built with React and D3 v5, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for axes. Points are colored by species (red, green, blue) and the chart includes labeled axes and gridlines.

ZZhou180
85% match
Loading thumbnail…

Scatter plot with menus

This interactive scatter plot displays the Iris dataset, with dropdown menus allowing users to select which attributes appear on the x- and y-axes. Built with React and D3 v5, the visualization uses `scaleLinear` and `extent` to compute scales, mapping the chosen columns to positions of SVG circles. Axis components render ticks and labels, while the `Marks` component adds tooltips via SVG `<title>` elements. The data is loaded asynchronously from a CSV file using D3’s `csv` function.

SShuyu Zheng
85% match