Skip to main content
SimilarExport ZIP
100%

Interactive scatterplot Iris using different marks

✓ Published0🌍 Public
RRenonDis
Last edited Jan 26, 2018
Created on Jan 26, 2018

This interactive scatterplot visualizes the classic Iris dataset, plotting sepal length against sepal width. Each flower is drawn as a distinct SVG symbol, with its shape and color encoding the species. The visualization includes a legend; clicking a legend entry dims points from other species, allowing for easy comparison. The code uses d3.csv to load data, d3.scaleOrdinal with d3.symbols to generate different mark types, and d3.axisBottom and d3.axisLeft for the axes.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/5c6d0c7d20ed65798ff42e792204a7e9'>Scatterplot Iris using different marks</a>

mit Licensed

Similar vizzes

Loading thumbnail…

[interactive] Scatterplot Iris using different marks

This interactive scatterplot displays the classic Iris dataset, plotting sepal length against sepal width. Each flower is represented by a distinct SVG symbol whose shape and color encode its species. The visualization uses d3.scaleOrdinal with d3.symbols to generate different mark types, while d3.scaleLinear maps the quantitative axes. A legend allows filtering by clicking on a species, which dims all other symbols by reducing their opacity. The code relies on d3.csv for data loading and d3.axisBottom and d3.axisLeft for the axes.

AArnaudBru
96% match
Loading thumbnail…

Interactive Scatterplot Iris using different marks

This interactive scatterplot visualizes the classic Iris dataset, using four quantitative variables to position and size each flower sample. The x and y axes map sepal length and width, while petal length controls the size of each point through a square-root scale. Each of the three Iris species is encoded with a unique symbol and color, assigned via d3.symbols and d3.scaleOrdinal. Clicking a legend item filters the plot by dimming non-selected species, offering a simple way to compare groups. The visualization is built with D3.js v4, rendering marks as SVG paths within an HTML page.

AArnaudBru
93% match
Loading thumbnail…

Scatterplot Iris using different marks

This scatterplot of the Iris dataset uses geometric symbols to encode the flower species, with sepal length and width mapped to the x and y axes. The size of each symbol additionally encodes petal length. Rendered using D3.js v4 with SVG, the visualization employs `d3.scaleOrdinal` to assign both colors from the `d3.schemeCategory20` palette and distinct symbol types via `d3.symbols`. An interactive legend allows users to isolate a single species by clicking its label, which filters the displayed marks by toggling their opacity.

MMathReynaud
92% match
Loading thumbnail…

Scatterplot Iris using different marks

This example visualizes the classic Iris dataset as a scatterplot, mapping sepal length and width to the x- and y-axes. Each data point is rendered as a distinct SVG symbol—circle, cross, or diamond—based on the flower’s species, with color further distinguishing the three classes. The code uses d3.scaleLinear for axes, d3.scaleOrdinal for color and symbol assignment, and d3.symbol with the d3.symbols array to generate the mark paths. A legend maps species to both symbol type and color, while petal length is encoded by a square-root size scale.

BBaptisteL54
92% match
Loading thumbnail…

Scatterplot Iris using different marks

This D3.js v4 visualization displays the classic Iris dataset as a scatterplot, mapping sepal length and width to the x- and y-axes while using different symbol shapes from `d3.symbols()` to distinguish the three iris species. A legend allows interactive filtering by clicking a species, which dims all other points to 0.1 opacity. The SVG rendering uses `d3.scaleOrdinal` for colors and `d3.scaleSqrt` for point sizing based on petal length.

RRemiFaure
92% match
Loading thumbnail…

Scatterplot Iris using different marks

This scatterplot of the Fisher Iris dataset maps sepal length and width on the x- and y-axes, using distinct marker shapes to encode the three species, while petal length determines point size via a square-root scale. The chart employs D3 v4’s `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` with `d3.symbols` to generate varied path marks. It renders as an SVG, includes axis labels, and adds a legend, all built from the inline `iris.csv` data.

RRemiFaure
89% match
Loading thumbnail…

Iris Scatter Plot

An interactive scatter plot visualizes the classic Iris dataset, mapping sepal and petal measurements to the x and y axes. The visualization offers two dropdown menus that let users change which flower attribute is displayed on each axis. The code uses D3 v5 to load the CSV data, create linear scales, and render SVG circles that transition to new positions with a one-second animation. Points are colored by iris species (setosa, versicolor, or virginica), with a legend and axis labels rendered via `d3.axisBottom` and `d3.axisLeft`.

Wwinniepooh520
89% match
Loading thumbnail…

Iris_scatterplot_sepal

This example visualizes the classic Iris dataset, plotting sepal length against sepal width for 150 flowers. Points are encoded with different shapes and colors to distinguish the three species: setosa (circles), versicolor (red squares), and virginica (black squares). The visualization includes axis labels, a categorical color legend, and interactive tooltips that display the species on hover. Built with D3 v4 using SVG, it also demonstrates the use of ordinal color scales, square-root size scaling, and filter-based shape encoding.

DDjokovalle
89% match