Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Color

✓ Published0🌍 Public
GGonzalo Alarcón Usui
Last edited Dec 5, 2021
Created on Dec 5, 2021

This interactive scatter plot displays the Iris flower dataset, plotting measurements like petal length and sepal width. Users can select which attributes to display on the X and Y axes via dropdown menus, and hovering over a circle reveals its exact value through a tooltip. The visualization uses React for state management and D3 v7’s `scaleLinear` and `extent` functions to compute axes and scales. Points are rendered as SVG circles, with styled tick marks and axis labels for clarity.

AI-generated description

A program that follows your mouse with a circle.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot displays the Iris dataset, with dropdown menus enabling users to select which flower measurements appear on the x- and y-axes. Each point is colored by species using a D3 ordinal scale, and hovering reveals the sepal length via SVG circle titles. Built with React hooks for state management, the visualization uses D3 scales and the `csv` loader to parse data, while custom React components render the axes and marks.

MMario Ibarra
96% match
Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris dataset, plotting measurements like petal length and sepal width against each other. It uses color to distinguish the three Iris species, with a dropdown menu letting users select which attributes appear on the X and Y axes. Built with React, D3, and rendered as SVG, the code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components that leverage D3's `scaleLinear` and `scaleOrdinal` for scaling, along with tooltips showing values on hover.

CCodeDuckie99
95% match
Loading thumbnail…

Scatterplot w/ color

This interactive scatterplot visualizes the Iris dataset, plotting petal length and sepal width on the x- and y-axes, with points colored by species. Two dropdown menus allow users to switch which flower measurements are displayed on each axis. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and custom React components for rendering SVG axes and circle marks.

MMichael Bergerson
95% match
Loading thumbnail…

Scatter plot with color

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between four measured attributes (sepal length, sepal width, petal length, and petal width) through dropdown menus that control the X and Y axes. Points are colored by species using d3.scaleOrdinal with three categorical colors. The visualization is built with React components managing state for axis selections, while d3.scaleLinear handles coordinate mapping and axis rendering uses custom SVG tick components. Data loading relies on d3.csv with type coercion for numeric fields.

LLewis Ward
95% match
Loading thumbnail…

Scatter Plots with Color

This interactive scatter plot visualizes the Iris flower dataset, showing petal length against sepal width. Each point is colored by species using a categorical color scale, and hovering reveals a tooltip with the formatted petal length. Built with React and D3 v5, the visualization uses React components for axes and marks, with D3's `scaleLinear` and `scaleOrdinal` for positioning and coloring. SVG rendering handles the circles, while a custom tick formatter appends units to axis labels.

Llefat92
95% match
Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot explores the classic Iris dataset, allowing users to compare any two measured attributes (sepal and petal dimensions) by selecting them from dropdown menus. Each flower is rendered as a circle in SVG, with position mapped by the selected X and Y axes and color encoding species via a D3 `scaleOrdinal` color scale. Built with React and D3 v7, the visualization uses `scaleLinear` for axes and interactive dropdowns to dynamically re-bind the plotted data.

SSerind Joshua McCue
95% match
Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes 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 with d3.v5 scales, including scaleLinear for positioning and scaleOrdinal to encode species identity with distinct colors. SVG circles render the data points with tooltips showing exact values, while custom AxisBottom and AxisLeft components generate the tick marks and labels. The code employs d3.csv for data loading and d3.format for axis tick formatting.

MMrMartin85
95% match
Loading thumbnail…

Scatter Plot With Color

This interactive scatter plot visualizes the Iris dataset, plotting continuous measurements (sepal width, sepal length, petal width, petal length) against one another with points colored by species. Users select attributes for the X and Y axes via React dropdown menus, which update the chart reactively. The visualization uses React, D3 scales (`scaleLinear`, `scaleOrdinal`), and renders SVG circles, axes, and a color legend. Data is loaded asynchronously with `d3.csv`, and the chart includes labeled axes, a species-based legend, and tooltips showing formatted values.

NNick Pearson
95% match