Skip to main content
SimilarExport ZIP
100%

HD VIZ scatter plot

✓ Published0🌍 Public
MMartin Masevski
Last edited Mar 2, 2021
Created on Mar 2, 2021

This scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across species. The visualization displays data points as circles, with interactive dropdown menus enabling users to dynamically select which measurement attributes appear on the x and y axes. Built with React and D3 v5, the code uses `scaleLinear` for axis scaling, `extent` for domain calculation, and `csv` for data loading. The visualization renders as SVG, with separate React components handling axis generation and circle marks, while CSS classes style the tick marks and data points.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, showing measurements of sepal and petal dimensions colored by flower species. Users can select which attributes to display on the x- and y-axes using dropdown menus, with hover interactions fading non-selected species. Built with React and D3 v5, it renders SVG circles using `scaleLinear` and `scaleOrdinal` for positioning and color encoding. The visualization includes custom axis components, a color legend, and tooltips, with data loaded via D3's `csv` parser and formatted using `d3.format`.

TThe-World-Muda
92% match
Loading thumbnail…

HW1 Scatter Plots

This interactive scatter plot visualizes the Iris dataset, showing relationships between sepal and petal measurements across three flower species. Users can dynamically switch which measurements appear on the x and y axes using dropdown menus. The visualization uses D3 scales and axes for data mapping, while React manages the component state and UI controls. Points are rendered as colored circles in SVG, with a legend indicating species assignments. The code follows the React & D3 pattern where React handles the interface and D3’s selection methods update the SVG elements.

YYang Shun Yu
91% match
Loading thumbnail…

Scatter Plot with colors

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across three iris species. The visualization uses D3.js scales (scaleLinear, scaleOrdinal) and React components to render SVG circles, with color encoding species identity. Two dropdown menus enable dynamic selection of which measurements appear on the x and y axes, while D3’s csv loader fetches the data and tooltips display formatted values for each point.

Aadewole-top
91% match
Loading thumbnail…

Iris Scatter Plot v5

This interactive scatter plot visualizes the Iris dataset, showing measurements of sepal and petal dimensions for three flower species. Users can select which attribute appears on each axis using dropdown menus, while points are color-coded by species with a legend on the right. The visualization uses D3 v7 scales and axes for positioning, React with hooks for state management, and renders points as SVG circles with native tooltips. Data is loaded as CSV and parsed by D3's csv loader.

JJohn Lewis
91% 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
91% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot displays the Iris dataset, plotting petal length against sepal width for individual flowers. The visualization is built with React and rendered as SVG elements, using D3 v7 scales (d3.scaleLinear) and axes. Each data point is a circle with a radius of 10, and hovering reveals the petal length as a native tooltip. The code uses d3.extent to set domains, d3.csv for data loading, and d3.format with a custom tick formatter that replaces 'G' with 'B' for axis labels.

Aangelathacker123
91% match
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot explores the Iris dataset, allowing users to select any combination of sepal and petal measurements for the x and y axes via dropdown menus. The visualization renders circles for each flower specimen using React and D3.js, with axes generated by `scaleLinear`, `extent`, and custom React components. Data is loaded asynchronously from a CSV file using D3's `csv` function. Hovering over a point reveals its exact attribute value through an SVG `<title>` tooltip.

AAustin0524
91% match
Loading thumbnail…

Iris Scatter Plot v3

This interactive scatter plot visualizes the Iris dataset, plotting sepal and petal measurements against each other. Users can select different attributes for the x and y axes via dropdown menus, with each circular mark representing an individual flower. The visualization uses React components with D3 v7 scales (scaleLinear) and the extent function to compute domains, rendering SVG circles with hover tooltips. Data loads asynchronously from a CSV file using the d3.csv method.

JJohn Lewis
91% match