Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published3🌍 Public

Last edited Sep 24, 2022

Created on Sep 17, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to compare flower measurements through dropdown menus that control the x and y axes. The visualization uses React with D3 v5 scales and SVG rendering, featuring a color legend that distinguishes iris species. Hovering over a legend item highlights matching data points while dimming others. The code employs `d3.scaleLinear`, `scaleOrdinal`, `extent`, and `csv` for data parsing and scaling.

Sstefanpullen

90% match

Loading thumbnail…

Fork of D3 Starter

This visualization demonstrates a scatter plot of the Iris dataset, mapping petal length against sepal length with circular marks. The code uses D3 version 7 with the `d3-selection-multi` extension to simplify attribute setting. It employs `scaleLinear` for axes, `extent` for domain calculation, and `axisLeft`/`axisBottom` for rendering ticks. The reusable `scatterPlot` function exposes setter methods for width, height, data, margins, and accessor functions, following a module pattern. The data is loaded asynchronously from a CSV file via `d3.csv`, with numeric parsing applied to each row before rendering as SVG circles.

Aatmr0

90% match

Loading thumbnail…

Fork of Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to compare any two of four flower measurements (sepal/petal length/width) via dropdown menus. Points are color-coded by species, with a legend and animated transitions (using D3’s `transition().duration(1000)`) when axes change. The visualization uses D3 v5 to load CSV data, compute linear scales, render SVG axes with `axisBottom` and `axisLeft`, and bind data to circles. Animated positional updates highlight distribution differences between flower classes.

YYi-Qing

89% match

Loading thumbnail…

Fork of Scatter Plot 0927

This interactive scatter plot displays the Iris flower dataset, with users selecting which measurements map to the x- and y-axes via dropdown menus. Points are colored by species—purple for setosa, red for versicolor, and green for virginica—with a legend beneath the chart. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` for axes, while circles enter with a staggered 2-second transition animation. The data loads from a local CSV file, and SVG rendering supports the interactive filtering and animated updates.

Mminson

89% match

Loading thumbnail…

Fork of Iris Scatter Plot-0616053

An interactive scatter plot of the Iris flower dataset, colored by species, allows users to explore relationships between four flower measurements. The visualization uses D3 v5 to render an SVG chart with selectable X and Y axes, dynamically updating the plot when the user changes the dropdown menus for sepal and petal dimensions. The data is loaded from a local CSV file using `d3.csv`, and the chart is drawn with `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleLinear`, applying species-specific colors and translucent points.

Gginnyching

89% match

Loading thumbnail…

Fork of Fork of Fork of Stylized Scatter Plot

This interactive scatter plot lets users explore the classic Iris flower dataset by switching the x and y axes between sepal and petal measurements. Color encodes the three iris species, and hovering over a legend item fades all non-matching points to emphasize that group. The visualization uses D3 v5 utilities like `scaleLinear`, `scaleOrdinal`, and `csv` for data loading, with React managing component state. SVG rendering draws axes, circles, and the color legend, with native `<title>` elements providing tooltips.

Sstefanpullen

89% match

Loading thumbnail…

Fork of Iris Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, displaying the relationship between two user-selected measurements (sepal length/width or petal length/width) on the x- and y-axes. Colored circles represent the three Iris species (setosa, versicolor, virginica) using a categorical color scale. The D3.js code builds the chart with `scaleLinear` and `scaleOrdinal` for scaling, `axisLeft` and `axisBottom` for axes, and dropdown menus trigger redraws via event listeners. Data is loaded from a CSV file, and points are rendered as SVG circles.

Aaddword527

88% match

Loading thumbnail…

Fork of D3 Starter

This example shows a scatterplot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with an input field that adjusts the x-axis domain. The code uses D3 v7's `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes, with `transition().duration(1000)` animating axis rescaling and circle repositioning when the domain changes. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and the SVG viewport uses `preserveAspectRatio` for responsive scaling.

DDaveCumin

88% match