Skip to main content
SimilarExport ZIP
100%

Untitled

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

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.

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
100% match
Loading thumbnail…

Untitled

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.

Aamnicpo
93% 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
92% 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 example shows a scatterplot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. It uses D3’s `scaleLinear` and `extent` to compute scales, and renders circles with `selection.join` for data binding. The visualization is built with React 18 and D3 7, where React manages the SVG container and a D3 function handles chart drawing. Axes are added via `axisBottom` and `axisLeft`, with SVG as the rendering output.

Jjeffchengtw
90% match
Loading thumbnail…

Untitled

An interactive scatter plot visualizes the Iris dataset, showing sepal and petal measurements for three iris species. Users select which features appear on the x- and y-axes via dropdown menus, and the plot updates with a staggered 500-millisecond circle transition. Built with D3 v5, the SVG render uses `d3.scaleLinear` for axes, `d3.extent` for domains, and `d3.axisBottom`/`d3.axisLeft` with gridlines. Circles are color-coded by species, and the axes and title update dynamically based on the selected attributes.

AAmanda-Tai
90% 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
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
89% match