Skip to main content
SimilarExport ZIP
100%

myfirstd3

✓ Published0🌍 Public
Kkenny-wq
Last edited Nov 13, 2023
Created on Sep 12, 2023
Forked from HTML Starter

This example visualizes the Iris dataset as an interactive scatter plot, allowing users to select which quantitative columns appear on the X and Y axes via two dropdown menus. The chart updates dynamically, with each point colored by the iris species (setosa, versicolor, or virginica) and axis labels reflecting the chosen variables. The visualization uses D3 v5 APIs such as `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.extent` to build the axes and scales, while data is loaded from a CSV file using `d3.csv`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

1st

An interactive scatter plot of the Iris dataset displays measurements of sepal and petal dimensions, with each of the three species rendered in a distinct color and identified in a fixed legend. Users select attributes for the x- and y-axes from two dropdown menus. The chart uses D3 v5 scales and axes (`scaleLinear`, `axisLeft`, `axisBottom`), with circles animated via `transition().delay()` as they reposition. Data is loaded asynchronously from a CSV file, and SVG rendering is updated dynamically upon menu selection.

Vvegetable.c@nycu.edu.tw
84% match
Loading thumbnail…

Iris

This interactive scatterplot visualizes the classic Iris dataset, allowing users to compare any two measured features (sepal/petal length and width) via dropdown menus. D3 v7 axes and scales update with animated transitions when a new axis is chosen. Circles are color-coded by iris species, with a legend showing the three classes. The data is loaded from a CSV using `d3.csv`, and the visualization leverages `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` for smooth updates.

ZZeroKurosakii
83% match
Loading thumbnail…

0

This interactive scatter plot displays the Iris dataset, allowing the user to compare any two measured features by selecting them from dropdown menus for the X and Y axes. The visualization uses D3 scales and axes to map the data, with circles animating to their new positions when the selection changes. It is rendered as an SVG, and the code demonstrates the use of `scaleLinear`, `axisBottom`, and `axisLeft` to build the chart.

Eeyxxr1260@gmail.com
82% 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
82% 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
82% match
Loading thumbnail…

Fork of D3 Starter

This interactive scatterplot lets users explore the classic Iris dataset, comparing any two of the four numeric flower measurements on the x- and y-axes while color-coding points by species. The visualization uses D3 v7 to load CSV data, render SVG circles, and update axes and titles dynamically through select elements. Scales, axes, and event listeners are built with d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.csv, with styling for each Iris class defined in CSS.

Aa15923647
82% match
Loading thumbnail…

DATA VISUALIZATION HW1

This interactive scatter plot visualizes the Iris dataset, with dropdown menus to select which sepal or petal measurement appears on the X and Y axes. D3 scales map the selected attributes to positions, while an ordinal color scale distinguishes the three iris species, with a color legend. The visualization uses React for state management and SVG rendering, with the `useData` hook loading the CSV. Alternative axes reveal different clustering patterns across the four measurement dimensions.

Nnathanowen06
82% match
Loading thumbnail…

iris

This interactive scatter plot visualizes the Iris flower dataset, letting users select which measurements (sepal length/width, petal length/width) map to the x- and y-axes via dropdown menus. It colors each point by species (setosa, versicolor, virginica) using a d3.scaleOrdinal with red, blue, and green, and includes a legend. Built with D3 v5, the visualization renders as SVG with animated transitions that grow circles from a central point over two seconds. It uses d3.csv to load data, d3.scaleLinear for axes, and d3.axisLeft/axisBottom with gridlines.

Iianjwo
82% match