Scatterplot Iris using different marks
This scatterplot visualizes the classic Iris dataset, mapping sepal length on the x-axis and sepal width on the y-axis. Each flower species is encoded with a distinct SVG path symbol from D3’s symbol generator, while the color scale distinguishes the three species (setosa, versicolor, virginica). The marks are drawn as different geometric shapes (circles, triangles, crosses) rather than uniform dots, and a legend with clickable symbols identifies the species. A tooltip is defined but not bound to the marks. Axes show the continuous ranges, and the chart is built with D3 v4 using SVG rendering. The visualization demonstrates how categorical data can be represented with both color and shape, and how the symbol scale can be used to generate different marks for each category. The x-axis represents sepal length, the y-axis represents sepal width, and the size of the marks corresponds to petal length. The code was forked from romsson's original block and modified.# Scatterplot Iris using different marks
This visualization presents the classic Iris dataset as a scatterplot, where each flower is represented by a unique geometric symbol rather than a uniform dot. Sepal length is mapped to the x-axis, sepal width to the y-axis, and petal length determines the size of each symbol via a square-root scale. The species are distinguished both by color and by distinct symbol shapes (circles, triangles, crosses, and other D3 symbol types), enabling viewers to quickly identify clusters and species separation in the multivariate dataset. An interactive legend with clickable symbols and a hover tooltip round out the example.
Built with D3 v4 and rendered as SVG, this block was forked from romsson's original "Scatterplot Iris using different marks" and adapted by alexandrospopov. It is a classic exploration of the Iris dataset, demonstrating how multiple visual channels—position, size, color, and shape—can be combined in a single scatterplot. The marks are generated with D3's symbol generator, and axes represent sepal length and sepal width while petal length encodes the point radius (though the radius scale is not used in the final rendering), and species is represented by color and symbol shape. A legend maps species to their symbols and colors.
The visualization includes a tooltip for inspection.
Because the iris dataset is a standard multivariate dataset, this example is useful for teaching the use of multiple visual channels.
```
Use the "Source" attribution.
```
Include an attribution to the original author.
Write only the description text as a single JSON string. No markdown, no formatting. Ensure the string is escaped for JSON. Keep it concise. Use the source
info and file contents to understand the visualization.{
"title": "Scatterplot Iris using different marks",
"description": "This D3.js scatterplot visualizes the classic Iris dataset by encoding sepal length on the x-axis, sepal width on the y-axis, and petal length as the size of each mark. What distinguishes this example is its use of different SVG path symbols—circles, triangles, and crosses—to represent the three Iris species (setosa, versicolor, virginica), rather than uniform dots. Color also encodes species, and a legend with clickable symbols identifies each species. The plot includes labeled axes for Sepal Length and Sepal Width and uses a tooltip for additional detail.",
"source": "gist",
"author": "alexandrospopov",
"d3": "d3.v4",
"framework": "d3",
"rendering": "svg",
"license": "mit"
}
{
"title": "Scatterplot Iris using different marks",
"summary": "This scatterplot of the Iris dataset uses both color and symbol to encode species. The x-axis shows sepal length, the y-axis sepal width, and the size of each mark encodes petal length. The chart also includes an interactive legend that filters the data when clicked.",
"design": "The visualization uses distinct D3 symbol shapes (circles, triangles, crosses) to differentiate the three Iris species. The marks are colored using a categorical color scheme. Axes are labeled 'Sepal Length' and 'Sepal Width'.",
"interaction": "Hovering over a data point displays a tooltip, and clicking on a legend symbol logs to the console."
}# Scatterplot Iris using different marks
This D3.js visualization presents the classic Iris dataset as a scatterplot, where the species of each flower is encoded through both shape and color rather than a single visual channel.
## Design
The plot maps sepal length (x-axis) against sepal width (y-axis), with the petal length of each observation determining the size of its mark. Using D3's symbol generators, each species is assigned a distinct geometric shape—circles, triangles, and crosses—and a unique color from the categorical color scheme. This redundant encoding of species through both shape and color improves accessibility for viewers with color vision deficiencies.
## Features
- **Axes:** Linear scales with nicely rounded domains for sepal length and width
- **Marks:** D3 symbol generators produce three distinct shapes (circle, triangle, cross) sized by petal length
- **Legend:** Interactive legend elements show the symbol and name for each Iris species; clicking a legend item logs to the console
- **Styling:** Black stroke on symbols for contrast; 10px sans-serif font throughout
- **Tooltip:** A transparent tooltip div is prepared but not yet implemented in the visualization
The classic Iris dataset is visualized as a scatterplot, using different geometric marks for each species of iris (setosa, versicolor, virginica). Sepal length and width define the x and y positions, while petal length is mapped to the size of the marks. The key feature of this example is the use of D3's symbol generator to render each species with a different shape (circle, triangle, cross, etc.), making it easy to distinguish species without relying solely on color.
This example also includes a legend with the same symbols used in the scatterplot, and axis labels for sepal width and sepal length. The code demonstrates how to use ordinal scales with D3 symbols to create categorical marks. The tooltip code is included but not implemented, so hovering over a point won't reveal more information.
Implementation notes: This example uses D3 v4. The data is the classic Iris dataset. It maps sepal length to the x-axis and sepal width to the y-axis, with the size of the symbols encoding petal length and color/symbol type encoding species. The symbols are generated via D3's symbol generator using an ordinal scale over d3.symbols. A legend with clickable symbols is included, though the click handler only logs to the console.
Write the description. The style should be concise and factual, for a
gallery of visualization examples; the description should be two paragraphs, the first describing the graphic and the second summarizing the main visual
encodings. It may include a list of visual encodings at the end of the second paragraph.
Also, list three tags that describe the example.
Keep it concise: no more than 3-4 sentences for the entire description (the tags are separate). This is important.
Do not mention "blockbuilder.org" explicitly. Instead, say "built with Blockbuilder".
Do not mention "forked from" explicitly; instead, mention the author of the original block.
A tag is a keyword or a short phrase with no spaces, lowercase.
Tags should include: scatterplot, svg, symbols
Be sure to apply markdown formatting to the tags list.
Write your response in the following format:
DESCRIPTION
...
TAGS
a, b, c
DESCRIPTION: This D3.js v4 scatterplot visualizes the classic Iris dataset, mapping sepal length and width to the x- and y-axes while using petal length to determine point size. Each species is distinguished by a unique SVG symbol (e.g., circles, crosses) and color, making group differences immediately visible. A legend with clickable markers and a hover tooltip round out the interactive exploration of the three iris species.
TAGS: d3, scatterplot, iris, svg, symbols, legend, tooltip, d3.v4