Skip to main content
100%

Scatterplot Iris using different marks

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

This scatterplot visualizes the classic Iris dataset, mapping sepal length and width along the x- and y-axes while encoding petal length with point size. The three iris species are distinguished by both color (using d3.schemeCategory20) and by different d3 symbol shapes (circles, crosses, diamonds, etc.) generated with the d3.symbol API. Axes are labeled, and a legend identifies the species using the same symbols and colors. A tooltip is defined but not activated. Built with D3 v4 and SVG, the chart demonstrates how multiple visual channels—position, size, color, and shape—can be combined in a single scatterplot. Data is the classic Iris dataset loaded from a CSV.

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…

Scatterplot Iris using different marks

This scatterplot visualizes the classic Iris dataset, mapping sepal length and width along the x- and y-axes, with petal length determining the size of each mark. Each of the three iris species (setosa, versicolor, virginica) is represented by a distinct SVG symbol generated using D3’s symbol generator, with colors from the Category20 scale. The plot includes axis labels, a legend with clickable symbols, and a tooltip. Built with D3 v4, the example demonstrates how different marks—circles, crosses, diamonds, and other geometric symbols—can encode categorical data in a scatterplot, and it shows the flexibility of D3’s ordinal scales for symbols and colors. Data is loaded from a CSV file containing the classic Iris flower measurements.

Aadurivault
97% 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
95% 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
94% 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
93% 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 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
92% match
Loading thumbnail…

scatterplot_iris

This scatterplot visualizes the classic Iris dataset, mapping sepal length on the x-axis, sepal width on the y-axis, and encoding petal length via the radius of each circle. The chart is rendered as SVG circles using D3 v4, with the x and y axes scaled linearly and the color scale using d3.schemeCategory20 to distinguish the three iris species. Hovering over a point triggers a tooltip that displays the species name. A legend identifies the species by color, and axis labels indicate the measurements plotted.

DDjokovalle
92% match
Loading thumbnail…

Scatterplot Iris (d3.v4)

This scatterplot visualizes the classic Iris dataset using D3.js v4, mapping sepal length and width to the x- and y-axes. Each flower is represented by a circle whose radius encodes petal length, while color distinguishes species (setosa, versicolor, virginica) via a categorical scale. The chart includes labeled axes, a legend, and hover tooltips that display the species of each point. Built with SVG and animation, the visualization offers an interactive overview of the dataset’s structure and species groupings.

BBerengerCunillera
92% match