Skip to main content
SimilarExport ZIP
100%

Scatter Plot

✓ Published5🌍 Public
Ddaniel
Last edited Nov 29, 2023
Created on Sep 19, 2023
Forked from Customizing Axes

An interactive scatter plot of the Iris dataset lets users explore relationships between different measurements. Two dropdown menus dynamically change which numerical columns are plotted on the X and Y axes. The visualization is built with D3.js, using scales for axes and ordinal color mapping for the categorical species. Circles animate into position with a staggered delay, and axes and labels update based on the selected data columns.

AI-generated description

2023/9/22 daniel chen scatter plot with menus and colors An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Iris Scatter Plot

The visualization shows an interactive scatter plot of the Iris dataset, where users can select which measurements appear on the x- and y-axes via dropdown menus. Points are colored by species (setosa, versicolor, virginica) and animate smoothly to their new positions when the axes change. The chart uses D3 v5’s scaleLinear, axisBottom, and axisLeft to render the plot, with transitions applied to the circle elements for smooth updates.

MMing Chang
93% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot explores the Iris dataset, showing the relationships between four numerical flower attributes across three species. Users switch the X and Y axes via dropdown menus, and an animated transition moves the colored circles to their new positions. The visualization uses D3.js v5 with a modular structure, leveraging `scaleLinear` for axes, `scaleOrdinal` for species colors, and `axisBottom`/`axisLeft` for grid lines. Data loads from an external CSV file, with circles rendered as SVG elements and a legend identifying each species.

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

Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, showing measurements like sepal length and petal width while color-coding points by species. Users can select which attribute maps to the X and Y axes using dropdown menus. The visualization uses D3 v5 with SVG rendering and animated transitions, employing `scaleLinear`, `axisBottom`, `axisLeft`, and `transition().duration()` to smoothly reposition circles when axes change.

Mminson
92% match
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing the distribution of three iris species across four measurable attributes (sepal and petal length/width). Users can dynamically swap the variables assigned to the x- and y-axes via dropdown menus, with each species colored using a categorical scale. The visualization is built with D3 v5, using `d3.scaleLinear` for axes, `d3.legendColor` for the legend, and SVG rendering for the circles and grid lines. The plot updates by re-rendering the entire SVG when a new axis selection is made.

Iimsohandsome123
92% match
Loading thumbnail…

Scatter Plot [interactive] II

An interactive scatter plot of the Iris dataset shows relationships between two selected numeric attributes, with points colored by species. Users can change the x and y axes via dropdown menus powered by React. The visualization uses D3 scales (d3.scaleLinear, d3.scaleOrdinal) to map data to SVG circles, while hovering over the color legend highlights points of a single species. Data is loaded asynchronously from a CSV URL using d3.csv.

Aadewole-top
92% match
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the Iris dataset, plotting measurements like sepal and petal length against each other. Users select which features to compare via two dropdown menus, which triggers animated transitions as the circles move to their new positions. The visualization uses d3.csv to load data, d3.scaleLinear and d3.axisBottom/axisLeft to construct axes, and d3.transition for the 1-second animations, rendering points as SVG circles color-coded by iris species.

Xx112358
92% match
Loading thumbnail…

Iris Scatter Plot

A scatter plot displays the Iris dataset, with points colored by species (setosa, versicolor, virginica) via an ordinal color scale. Users select the x- and y-axis variables from four measurement options via dropdown menus. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` APIs, with circles rendered as SVG elements. A legend identifies species colors, while axis labels and a title update dynamically with each selection.

Aannie520143
91% match
Loading thumbnail…

Iris Scatter Plot

This example shows an interactive scatter plot of the Iris dataset, with dropdown menus to select which flower measurements appear on the x- and y-axes. Points are colored by species and transition into place with a staggered animation. Built with D3 v5, the visualization uses `scaleLinear`, `axisLeft`, `axisBottom`, and a custom dropdown menu component. A legend and axis selection panel are rendered to the right of the plot.

Yyixinxu2020
91% match