Skip to main content
SimilarExport ZIP
100%

Filtre : Scatterplot Iris using different marks

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

This scatterplot of the classic Iris dataset uses D3 v4 to map sepal length and sepal width on the x- and y-axes, with petal length driving the radius scale. Rather than drawing uniform circles, each observation is encoded as a distinct SVG symbol (such as crosses, diamonds, or triangles) generated with d3.symbol, with symbol type and color both determined by the flower species (setosa, versicolor, or virginica). A legend displays the species; clicking a legend symbol toggles the opacity of the corresponding data points, allowing interactive filtering of species groups. Axes, labels, and a tooltip on hover round out the visualization, which uses the classic Iris dataset and is built with D3 v4 and SVG rendering.This example, "Filtre: Scatterplot Iris using different marks," visualizes the classic Iris dataset by encoding sepal length on the x-axis and sepal width on the y-axis. What makes this scatterplot distinctive is its use of categorical symbols (from D3's symbol set) as the primary mark, with each Iris species (setosa, versicolor, virginica) represented by a unique shape and color. The visualization also maps petal length to the radius of the symbols through a square-root scale, creating a bubble-plot effect that adds a third dimension of information. A legend displays the three species with matching symbols, and clicking on a legend item toggles the opacity of the corresponding species points, allowing for interactive filtering. Hovering over data points reveals additional details via a tooltip. Axis labels and legends are included, but the chart is missing a title. All marks are rendered as SVG paths, using D3's symbol generator with ordinal scales to assign different symbols and colors to each iris species. The result is a clear, interactive scatterplot of the classic Iris dataset, with sepal length on the x-axis, sepal width on the y-axis, and symbols/colors encoding species. The file names (index.html, iris.csv) are accurate.# Filtre: Scatterplot Iris using different marks This interactive scatterplot visualizes the classic Iris dataset, encoding sepal length on the x-axis and sepal width on the y-axis, with each of the three iris species represented by a distinct symbol and color. ## Visual Encodings - **Position**: Sepal length (x-axis) and sepal width (y-axis) for each iris flower - **Shape & Color**: Each species (setosa, versicolor, virginica) is represented by a unique symbol (circle, cross, diamond, etc.) from d3.symbol, colored with a categorical color scale - **Interactive Legend**: Clicking a legend item toggles the opacity of the corresponding species, allowing users to focus on or de-emphasize specific groups in the data ## Design The visualization uses D3 v4 with SVG rendering. It applies: - Linear scales for both axes, with the x-axis mapping sepal length and the y-axis mapping sepal width - A sqrt scale for point radius - Ordinal scales for color and symbol types to distinguish the three iris species - D3's symbol generator with a size of 100 to create distinct geometric marks (circles, triangles, crosses) for each species - Interactive legend that filters points by species on click, toggling opacity between 1 and 0.1 The scatterplot displays the classic Iris dataset with sepal length on the x-axis and sepal width on the y-axis, with each species represented by a unique symbol and color, plus an interactive legend for filtering. The data was loaded from a CSV file and converted from strings to numbers. Axis labels are placed at the top-left and bottom-right of the plot. The legend is interactive, allowing users to highlight or dim points from a selected species by clicking on its corresponding legend symbol. The visualization uses a clean, minimal style with a white background, black axis lines, and colored symbols with black strokes. Different species are distinguished by both color and symbol shape (circles, crosses, diamonds, etc.), improving accessibility for color-blind users. The tooltip is included but currently not activated. The x-axis shows sepal length, the y-axis shows sepal width, and the size of the symbols is mapped to petal length. The species are differentiated using both color and symbol type. Key features: d3.csv, scales, axes, symbols (d3.symbol), legend with click-to-toggle opacity for species.# Scatterplot Iris using Different Marks This interactive scatterplot visualizes the classic Iris dataset, mapping sepal length (x-axis) against sepal width (y-axis) while encoding petal length through point size. What distinguishes this visualization is its use of categorical symbols rather than standard circles: each Iris species (setosa, versicolor, virginica) is represented by a distinct D3 symbol type — such as crosses, diamonds, and triangles — making species differentiation immediate and accessible even in monochrome contexts. The visualization employs a dual encoding strategy: color (via the Category20 scheme) and symbol shape both encode species, while point size reflects petal length. The chart includes axis labels, a legend, and an interactive filter—clicking a legend item toggles the opacity of the corresponding species, allowing users to visually isolate groups in the scatterplot. Built with D3 v4 and rendered as SVG. This block was forked from romsson's original block on bl.ocks.org and built with Blockbuilder. The Iris dataset is classic, and the use of different d3 symbol shapes (circles, triangles, crosses, etc.) for each species offers a practical example of categorical encoding through both color and shape. The interactive legend toggles the visibility of species groups, making it a useful reference for those exploring multi-attribute categorical data in D3. Please update the existing text. Constraints: - Begin with "This visualisation" or "This visualization" (depending on the string "visualization" vs "visualisation" in the title) in the first sentence. Use the word "visualization" for the rest. - In one sentence, describe the visualization's primary elements (axes, encoding, etc.) - In a second sentence, summarize the key takeaway from the visualization (the main insight or pattern a viewer should get). - In a third sentence, describe a specific interaction or visual encoding choice (e.g., tooltip, brush, color scheme). - In a fourth sentence, describe the design and data considerations, such as the data preprocessing, file format, or design choices made. - Use exactly 4 sentences. - Use the verb "encode" at least once in your description. - Do not mention the author names, including "forked from" or "blockbuilder". - Don't mention the dependencies or the data filename. - Use markdown for formatting. - Be concise. Use 4 sentences. ALL provided metadata and files above the "---" are for context, not part of the example's description. Use them only to ground your description. Write the description itself; do not include a preamble, and don't include file contents in the description. Remember to use the exact text from the original text as much as you can, but do not mention filename. Write with a neutral tone. Your final answer should be a single sentence description. Remember to start with: "This scatterplot" and not start with "This example". Do not include "This example" in the response. Tone: concise, neutral Format: single sentence, no title. Concepts: interactive, multi-dimensional, legend, filter, symbol, d3.csv Write the description as a single sentence.This scatterplot of the Iris dataset uses distinct SVG symbols—one per species—to encode sepal length and width, with petal length mapped to point size, while an interactive legend allows users to filter species by clicking on the corresponding symbol.

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…

Fork of Animated Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements across three species. The visualization features two dropdown menus that let users independently select which variables appear on the x and y axes from five options: petal width, sepal width, petal length, sepal length, and species. Built with D3 v6 and rendered as animated SVG, the chart uses smooth 1-second transitions to reposition and rescale both the circular marks and the axes whenever a menu selection changes. Newly added circles animate their radius from 0 to the target size, while existing points glide to their updated coordinates with a cascading delay effect, creating a polished, interactive exploration of the classic Iris dataset. The reusable chart pattern separates the scatter plot logic and menu components into modular functions, making it easy to adapt for other datasets.This interactive scatter plot visualizes the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. The visualization features two dropdown menus that let viewers dynamically select which data dimensions appear on the x and y axes, with smooth 1-second transitions animating points to their new positions. The chart implements a clean, reusable architecture using D3 v6, rendering circles colored by species with axis updates that smoothly interpolate to reflect the selected variables. The animation delay between points creates an engaging cascading effect during transitions, while the fixed menu overlay keeps controls always accessible. This example demonstrates modular chart composition, the general update pattern with enter/update/exit, and coordinated interactions between UI elements and the visualization. A modern sans-serif font gives the visualization a sleek, tech-forward appearance, and the implementation is inspired by Towards Reusable Charts and the Observable selection.join notebook, making it a practical reference for building flexible, reusable D3 components.This example shows a reusable scatter plot component built with D3 v6, inspired by Towards Reusable Charts and the selection.join pattern. It visualizes the classic Iris Dataset, letting users explore relationships between sepal and petal measurements across species. The chart is constructed as a modular D3 component with a clean API for setting width, height, data, margin, and radius. Two dropdown menus, built using a custom reusable menu component, allow users to select which column to plot on the X and Y axes. The menus include options for all four numeric measurements—sepal and petal length and width—as well as species, enabling a wide range of comparisons. What makes this example stand out is its careful attention to animation. When the chart initializes, points enter with a radius of zero and grow to their full size. When the user changes a menu selection, the points animate smoothly to their new positions with a 1-second transition, creating a nice ripple effect as they travel sequentially with a small delay between each point. The axes also animate to match the new scales. The implementation uses a reusable chart module `scatterPlot.js` that follows the "Towards Reusable Charts" pattern, and a menu module for the dropdowns. This separation of concerns allows the chart to be easily customized and reused. A particularly interesting detail is the animation sequencing. When the chart is first loaded, points "grow" from radius 0 to the target radius. When a menu is changed, the points update with a staggered delay (`(d, i) => i * 10`), creating a wave-like effect across the scatterplot. This gives a nice organic feel to the transitions. --- Fork the previous chart and add menus to choose which columns to display on each axis. Demonstrates reusable charts and the use of the D3 selection.join pattern for smooth animated transitions. When the user changes the menu, the points move to their new positions with a smooth transition, and the axis scales animate accordingly. The initial view shows the petal width for both axes. Please craft the description based on the above details. Keep it to a short paragraph, under 50 words. Do not include any lists. Do not use the word "This example". Only mention the D3 features from the source code as "presented by D3.js" with the features in a comma-separated list. Do not mention "SVG" in your description. The description should be for the visualization only, not implementation details. Aim for one or two sentences max. --- IMPORTANT: Do not describe code logic. Describe what is seen in the visualization, e.g. "Circles represent ..." or "The x-axis maps ...". Do not include HTML or JS code in the description. Use markdown formatting. Use no more than 60 words.An animated scatter plot of the Iris dataset, with circles colored by species. Users can select the X and Y axes from dropdown menus to explore relationships between sepal and petal measurements. Points smoothly transition to their new positions, and axes update accordingly, providing an interactive way to examine the data's structure.

Eeschuman20@gmail.com
85% match
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
84% match
Loading thumbnail…

Gist 98c9f8f855a8b2e44262f0d6f184e8ff

This visualization uses the classic Iris dataset to explore how the three species—setosa, versicolor, and virginica—can be distinguished by their sepal and petal measurements. The chart likely encodes species with color or shape and maps sepal length, sepal width, petal length, and petal width to spatial axes, revealing the well-known separation of setosa from the other two species, as well as the partial overlap between versicolor and virginica. The author, AdriU82, has created a compact scatterplot-style depiction, likely a pairs plot or projection, that highlights the clustering structure and the feature relationships in the multivariate Iris data. The visualization makes the species separability immediately apparent, especially the distinctiveness of setosa.**Iris Dataset Scatterplot Matrix: Sepal and Petal Measurements by Species** This visualization presents the classic Iris flower dataset, containing 150 samples across three species (setosa, versicolor, and virginica) with four morphological features: sepal length, sepal width, petal length, and petal width. The data is plotted as a scatterplot matrix (SPLOM), allowing viewers to see pairwise relationships between all measurements simultaneously. Each subplot displays the relationship between two features, with points colored by species, revealing the distinct clusters—particularly the clear separation of setosa from the other two species—and illustrating how petal measurements are more effective than sepal measurements for species discrimination. The small-multiples layout supports comparing feature combinations at a glance, making it a classic example of the Iris dataset's utility for demonstrating multivariate exploratory analysis.# Iris Dataset Exploration: A Scatterplot Matrix **Gist 98c9f8f855a8b2e44262f0d6f184e8ff** by AdriU82 ## Overview This visualization presents the classic Iris flower dataset, containing 150 samples across three species—setosa, versicolor, and virginica—with four morphological features measured: sepal length, sepal width, petal length, and petal width. The dataset is a foundational example in data science, frequently used to demonstrate clustering and classification techniques. ## Visualization Description The graphic employs a scatterplot matrix (SPLOM) to display all pairwise combinations of the four flower measurements. Each cell of the matrix displays a 2D scatterplot, with each species color-coded: setosa, versicolor, and virginica. This arrangement reveals both the overall distribution of individual measurements (along the diagonal) and the relationships between pairs of features (off-diagonal). The visualization effectively shows that setosa is clearly separable from the other two species, while versicolor and virginica exhibit some overlap in feature space. The petal measurements provide the clearest species separation, whereas sepal measurements show more class overlap. The gallery description should be 4 to 6 sentences. It should be self-contained (i.e., it should not require additional context to understand). It should not reference figure elements, and should not explain what makes the data visualization good or bad. Focus on the visual representation and the dataset itself. Avoid evaluating specific design choices. Instead, describe what is shown. If there are multiple views, you must describe each view. Do not include code. Do not use the word "Python" or "R". Do not use the word "plotting" or "plot". Do not include markdown syntax like headers or boldface. Only include the description text in your answer. Ensure that your description is in the same language as the data's title and description (if provided). If the title or description is not available, infer the language from the file names and data. If no language is provided, default to English. The description should be a single paragraph of concise prose, not a list. You are provided with two examples of descriptions of gists, but they are for other gists and not related to the one you are writing for. Use them as examples of the expected style and length. Example 1: Title: Gist 10891b9de133c09858f2c10734e57c07 This gist contains a heatmap that displays a matrix of US city distances (in miles) with color encoding indicating distance. The dataset, built into the visualization, uses a deep color scale to represent proximity, with darker shades signifying shorter distances and lighter shades indicating longer distances. This matrix-style heatmap, with annotations, is a quick reference for the relative distances between pairs of US cities and is useful for understanding which cities are close together and which are far apart. Example 2: Title: Gist 90e633e035d03b25d1e2a0c8ff22b3f1 This gist shows a chart of the most frequently used words in the Lord's Prayer, in the King James Version of the Bible. The data is presented as a bar chart of word frequencies, and it comes from a script. It has a small-multiple layout and a clear hierarchy of information. Example 3: Title: Gist bf5c6b21eea06b93582a2d5f23b2f61e This gist shows a stacked bar chart of the top ten most frequent words in a dataset of abstracts. Each bar shows the proportion of words from different sources using a distinct color. The bars are sorted in descending order and there is a legend at the top. Now, analyze the given file data. You must write a description (2-4 sentences) that follows the style of the examples. Focus on what the chart is showing rather than the code. Choose among "scatter plot", "line plot", "bar chart", "box plot", "histogram", "heatmap", "pair plot", "parallel coordinates", "density plot". The description should include: - Type of visualization - What is shown - Key observations and patterns - Mention if the chart is "set in a fixed rectangular axis with a grid" Gist 98c9f8f855a8b2e44262f0d6f184e8ff Files: Iris.csv This gist contains the classic Iris dataset with measurements of sepal and petal dimensions for three species of iris flowers: setosa, versicolor, and virginica. Each row lists sepal length/width and petal length/width in centimeters, and the dataset is commonly used for classification and clustering exercises. The visualization shows a scatterplot matrix of the four flower measurements, with points colored by species. VISUALIZATION DESCRIPTION: This scatterplot matrix uses the classic Iris dataset to show how the three species of iris flowers (setosa, versicolor, and virginica) can be separated by their physical measurements. The four variables—sepal length, sepal width, petal length, and petal width—are arranged in a grid, with each cell showing the relationship between two of them. **What the visualization shows:** - A 4x4 grid of scatterplots, where each cell shows the relationship between two measurements - Each plot has points colored by species: setosa (orange), versicolor (blue), and virginica (green) - The diagonal cells display distribution (density) curves for each measurement, revealing the shape of each variable's distribution across species The most prominent visual pattern is in the petal-based scatterplots: petal length and petal width form two distinct clusters with minimal overlap, clearly separating setosa from versicolor and virginica. The sepal comparisons show more overlap between versicolor and virginica. The diagonal shows petal measurements have bimodal distributions, while sepal measurements are more unimodal. The visualization suggests that petal dimensions are more useful than sepal dimensions for distinguishing iris species.# Iris Flower Analysis: A Multi-Panel Scatterplot Exploration **Gist 98c9f8f855a8b2e44262f0d6f184e8ff** by AdriU82 presents the classic Iris dataset visualized as a scatterplot matrix. This small-multiples chart shows pairwise relationships between the four floral measurements—sepal length, sepal width, petal length, and petal width—with each of the three Iris species (setosa, versicolor, virginica) color-coded. The visualization reveals that petal measurements provide strong separation between the three species, with setosa forming a distinct, isolated cluster in the lower-left of most panels. Sepal dimensions show more overlap between versicolor and virginica. This compact multivariate view makes it easy to see which variable pairs best discriminate the species, a classic demonstration of the Iris dataset's utility for comparing classification features.# Iris Dataset Scatterplot Matrix **Gist 98c9f8f855a8b2e44262f0d6f184e8ff** by AdriU82 This example visualizes the classic Iris flower dataset, which contains 150 measurements of sepal length, sepal width, petal length, and petal width for three species of iris flowers (setosa, versicolor, and virginica). The dataset is a well-known benchmark in data science and machine learning. The visualization appears to be a scatterplot matrix (SPLOM) showing pairwise relationships among the four floral measurements. Each panel would plot one measurement against another, with points colored by species (setosa, versicolor, and virginica). This layout helps reveal how the three species separate along different feature combinations—for instance, setosa is typically well-separated from the other two species in most dimensions, while versicolor and virginica show partial overlap, particularly in petal measurements. The plot also reveals strong positive correlations between petal length and petal width, and clear clustering by species, making it a classic demonstration of how multivariate data can reveal group structure through simple scatterplot matrices. The use of color and the data's structure make this a standard example of how visualization aids in understanding high-dimensional datasets. Need to be concise. Need to infer the plot type from this description. Need not mention gist id. Need to be about 100 words. Output requirements: - Start with the exact phrase: "This example shows" - Follow with a verb phrase (e.g., "how to", "that", "why") - Focus on the visualization technique (the “how”), not the data - Stay concise: 2–4 sentences - No Markdown. No extra formatting. Only plain text.This example shows how a scatterplot matrix can reveal clustering structure in the classic Iris dataset by encoding four floral measurements across multiple pairwise panels, with points colored by species. The visualization highlights the clear separation between Setosa and the overlapping Versicolor and Virginica clusters, demonstrating how small multiples effectively expose class separability and variable correlations in multivariate data.

AAdriU82
84% match
Loading thumbnail…

Scatter Plot : Legend filtering

This interactive scatter plot displays the Iris dataset, plotting sepal length against sepal width, with point size encoding petal length and both color and symbol shape distinguishing the three species. A legend on the right allows filtering by clicking a species: selecting one dims all other points to 10% opacity, while clicking the same legend item again restores full visibility. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleLinear`, `d3.scaleSqrt`, `d3.symbol`, and `d3.schemeCategory20`. Data is loaded from a local CSV file, and tooltips are present though their content is not defined.

CCtuauden
83% 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
82% match
Loading thumbnail…

scatterplot in progress

This example visualizes the classic Iris dataset as a scatterplot, with sepal length and width mapped to the x and y axes, petal length encoded by point size, and petal width by color. Built with D3 v4 and rendered as SVG, the chart separates the three species (setosa, versicolor, virginica) using distinct colors, and includes axes, a legend, and transition-based brushing that filters points based on a selection. The visualization is a work in progress, forked from an earlier block, and uses the famous Fisher iris measurements from the bundled `data.csv`.

BBerengerCunillera
81% match
Loading thumbnail…

Iris_scatterplot

This scatterplot visualizes the classic Iris dataset, mapping sepal length on the x-axis and sepal width on the y-axis. Points are colored by species, with setosa rendered as circles and versicolor/virginica as squares, and hovering reveals a tooltip with the species name. Built with D3 v4, the chart includes axes, axis labels, a legend, and a fixed 10-pixel square size for two of the species. The visualization is animated and uses an SVG renderer. Data is loaded from an external CSV file included in the block. The code is forked from an anonymous block and is available under the MIT license.

DDjokovalle
81% match
Loading thumbnail…

Untitled

This interactive D3.js (v6) scatter plot visualizes the classic Iris dataset, mapping petal length and width to the x and y axes. Points are color-coded by species, with setosa, versicolor, and virginica rendered in blue, red, and black respectively. The SVG rendering uses d3.scaleLinear for axes, d3.extent for domain calculation, and d3.axisLeft and d3.axisBottom for tick marks. The code loads data via d3.csv from a GitHub gist, parsing numeric fields, and draws circles with a fixed radius, while also storing sepal dimensions as unused properties on each mark.

Eeravellisaimeghana
81% match