Skip to main content
SimilarExport ZIP
100%

Scatter Plots

✓ Published0🌍 Public
MMilo Kuo
Last edited Sep 25, 2023
Created on Sep 25, 2023
Forked from Hello VizHub

This interactive scatter plot explores the classic Iris dataset, allowing users to compare four flower measurements by selecting which attribute drives the X and Y axes. The visualization renders as an SVG, with the d3.csv function loading the data and d3.select wiring the HTML dropdown menus to update the plotted points. The example demonstrates modular D3 v5 usage, loading the library via UNPKG and importing functions directly from the "d3" module.

AI-generated description

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

This interactive scatter plot visualizes the classic Iris dataset, allowing users to compare any two of the four measured flower features via dropdown menus. The plot displays each flower as a semi-transparent circle colored by its species class, with a legend identifying the three types. Built with D3 v5, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color mapping, and animates points from the center to their positions using a two-second `transition` with staggered delays. The data is loaded from a CSV file, and the interface is rendered as SVG elements.

TToooooooT
91% match
Loading thumbnail…

Iris Scatter Plot 0516017

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between four numeric flower measurements. The visualization uses D3 v5 with SVG rendering, mapping flower species to semi-transparent red, green, and blue circles. Dropdown menus built with D3 selection methods allow users to dynamically switch which measurement appears on each axis, triggering a full re-render of the chart through the `render` function. The chart includes labeled axes, a title, and a manual legend for the three Iris species categories.

Xx112358
90% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric flower measurements by selecting which attribute appears on each axis via dropdown menus. Built with React and D3 v5, the visualization renders SVG circles positioned using linear scales, with labeled axes and tick marks generated by custom React components. The data loads asynchronously from a GitHub gist using D3's `csv` parsing function, and the interactive dropdowns update the chart's state to reflect new attribute selections.

XXiaoyu Su
90% match
Loading thumbnail…

Scatter Plot

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.

Ddaniel
90% match
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot displays the classic Iris dataset, allowing users to compare any two of the four flower measurements (sepal length/width, petal length/width) by selecting them from dropdown menus. Each of the 150 data points is rendered as a colored circle, with hue indicating one of three Iris species. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` for axes, while `transition().duration().delay().attr()` animates the circles smoothly to their new positions when the axis selection changes. The legend and axis dropdowns are placed beside the plot.

Mmagua
89% match
Loading thumbnail…

Scatter Plot

This example visualizes the classic Iris dataset, displaying flower measurements in a scatter plot with points colored by species class. Each circle represents a single flower, positioned by its sepal and petal dimensions using D3’s `d3.scaleLinear` for x and y axes. The code loads data with `d3.csv`, appends SVG circles via `svg.selectAll` and `enter()`, and includes placeholder logic for axis rendering and hover tooltips. The visualization is rendered as an SVG within an HTML page, styled with external CSS, demonstrating basic D3 data-binding and scale patterns.

YYang Shun Yu
89% match
Loading thumbnail…

Scatter Plot with Colour

This interactive scatter plot explores the classic Iris flower dataset, letting users compare numeric attributes by choosing which measurements appear on the x- and y-axes via two dropdown menus. Each point represents a flower specimen, colored by species using a d3.scaleOrdinal with a categorical palette, and tooltips reveal exact petal or sepal values. The React-based visualization uses d3.scaleLinear for both axes, renders circles as SVG elements, and reads the CSV data with d3.csv, with brushing and zooming absent from this implementation.

KKevin McMorrow
89% match
Loading thumbnail…

Scattered plot

This interactive scatter plot visualizes the classic Iris dataset, showing the relationship between two selected flower measurements. The D3.js visualization uses radio buttons to let users choose which of the four attributes (sepal length, sepal width, petal length, petal width) to plot on the x- and y-axes, with the plot rendering as an SVG. Points are colored by iris species (setosa, versicolor, virginica) using D3's `scaleLinear`, `axisLeft`, and `axisBottom` APIs, with data loaded via `csv`.

Sstanley.shen2003@gmail.com
89% match