Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published1🌍 Public
Aamnicpo
Last edited Mar 1, 2022
Created on Feb 23, 2022
Forked from HTML Starter

This interactive scatterplot displays Iris flower measurements, plotting sepal length against petal length for individual specimens. The visualization supports panning and zooming through a d3.zoom behavior, which rescales both the x and y axes and repositions the circles accordingly. Using D3 v4 with an SVG rendering approach, the chart loads data from a CSV file containing the classic Iris dataset. A clipPath restricts the points to the plotting area, while an invisible overlay rectangle captures pointer events to initiate zoom transformations.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example shows an interactive scatterplot of the Iris dataset, plotting sepal length against petal length with points colored by species. A horizontal brush (d3.brushX) lets the user select a range along the x-axis; upon release, the chart zooms in by updating the x-scale domain and animating the axis and circle positions over one second using transitions. The data loads from a CSV via d3.csv, and all rendering uses SVG with d3.v4.

Aamnicpo
93% match
Loading thumbnail…

Untitled

This example shows an interactive scatterplot of the Iris dataset, plotting sepal length against petal length with points colored by species. A horizontal brush (d3.brushX) lets the user select a range along the x-axis; upon release, the chart zooms in by updating the x-scale domain and animating the axis and circle positions over one second using transitions. The data loads from a CSV via d3.csv, and all rendering uses SVG with d3.v4.

Aamnicpo
93% match
Loading thumbnail…

Untitled

This interactive scatter plot explores the Iris dataset, displaying measurements of sepal and petal dimensions. Users can change which measurements appear on the x- and y-axes via dropdown menus, with points colored by Iris species. The visualization uses D3 v5 scales and axes within a React framework, rendering circles as SVG elements with a color mapping for the three species classes.

Yyuli19991001
91% match
Loading thumbnail…

Untitled

A scatter plot visualizes the Iris dataset, encoding sepal and petal measurements as points colored by species. The chart uses D3 v3 scales and axes to map numeric values to pixel positions, with an SVG rendering of circles and a color legend. The React-based application loads the data via the `csv` function from D3, and interactive tooltips display the iris variety and coordinates on mouseover.

Cctarmey
90% match
Loading thumbnail…

Untitled

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which attribute appears on the x- and y-axes, updating the plot and axis labels accordingly. Data points are colored by species using a categorical scale. The visualization is built with React and D3 v5, using `d3.csv` to load data, `d3.scaleLinear` for axes, and SVG circles for marks. Axes and tick marks are drawn with custom React components.

HHsu0208
90% match
Loading thumbnail…

Untitled

This interactive scatterplot displays the Iris dataset, with each point colored by species (setosa, versicolor, or virginica) and sized by petal length. The visualization cycles through four feature pairs on the x-axis every few seconds, while the y-axis remains fixed on sepal length. Built with React and D3 v4, it uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render axes and SVG circles, with a legend and axis labels added dynamically.

GGogineni44
90% match
Loading thumbnail…

Untitled

This interactive scatter plot explores the Iris flower dataset, allowing users to compare any two of the four measured attributes (sepal and petal length and width). Selecting a new attribute from the dropdown menus redraws the plot, with points colored by species. The visualization uses D3.js v4 to create an SVG chart with a ggplot2-style gray background and gridlines. It employs `d3.scaleOrdinal` for the color scale and `d3.axisBottom` and `d3.axisLeft` for the axes, re-rendering the graph on each selection change.

Aastolidozo
89% match
Loading thumbnail…

Iris Scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length against sepal width for individual flowers, with hover tooltips revealing exact measurements. The chart uses React with D3 v7, employing `scaleLinear` for axes and `extent` for domain calculation, while SVG circles render the data points. Axis components generate ticks and labels through D3's `ticks()` method. The visualization uses `d3.csv` to fetch and parse the dataset, with marks styled using CSS classes and a Poppins font.

JJames Rhodes
89% match