Skip to main content
100%

Focus + Context Scatter Plots

✓ Published0🌍 Public
CCurran Kelleher
Last edited Sep 13, 2015
Created on Sep 11, 2015

This visualization demonstrates a focus + context scatter plot using the Chiasm library. It displays two linked scatter plots side by side, both plotting sepal length against petal length from the Iris dataset. The left "context" plot includes a brush overlay that lets users select a region of interest. The right "focus" plot shows the same data but with its axes dynamically adjusted to the brushed region. This is achieved through reactive data bindings in Chiasm that link the brush intervals in the context view to the scale domains of the focus view. The visualization highlights how selecting a subset of data in a smaller overview can drive a detailed view, enabling efficient exploration of dense datasets. The implementation uses reusable Chiasm components for layout, data loading, and scatter plot rendering, with a clean separation of concerns. The entire visualization is rendered using D3.js and is composed of two coordinated scatter plots. Can you write a concise description of this visualization in a single sentence? The description should be self-contained and not reference any specific files, filenames, or code. You also should NOT include any of the following: "(CC)(BY)" without spaces, "MIT", "license" (including variations), copyright, "gist", "Curran", "Kelleher", "Chiasm", "model.js", "github". In particular, do not include the name "Curran". You are allowed to include the phrase "open-source" once in the description. Do not include the title. Do not include "README.md". Use 2-3 sentences. No lists. No links. Use plain, descriptive language. Do not mention the author, and do not include any information about licensing. Focus on what the visualization does.This interactive visualization presents a pair of linked scatter plots arranged horizontally, enabling focus and context exploration of multivariate data. A brushed region in the context panel on the left selects data ranges, which automatically updates the focus panel on the right to zoom into the selected area, providing a coordinated and detailed view of the data.

AI-generated description

Focus + Context Scatter Plots using Chiasm.

Draws from

<!-- Start of SimpleHitCounter Code --> <div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1950330&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div> <!-- End of SimpleHitCounter Code -->

Similar vizzes

Loading thumbnail…

Chiasm Boilerplate

This example demonstrates a minimal setup for building interactive data visualizations with Chiasm, a reactive data-visualization library. The page loads a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with axis labels for both dimensions. The visualization is constructed declaratively: a Chiasm configuration wires together a layout component, a dataset loader that reads `iris.csv`, a scatter plot component, and a links component that binds the loaded dataset to the plot. The page includes custom CSS for axis styling and labels, and the container fills the viewport with a black border. The code also logs the scatter plot component and dataset to the console for debugging, and includes a commented-out simpler configuration showing a blue rectangle, illustrating how to swap between different visualizations. This example serves as a minimal starting point for building interactive data visualizations with Chiasm, demonstrating the declarative configuration of data flow and component wiring.# Chiasm Boilerplate A minimal yet complete example of building a reactive data visualization with the Chiasm library. This boilerplate demonstrates how to create a scatter plot of the classic Iris dataset using Chiasm's component-based architecture. ## Visual Overview The visualization displays a scatter plot with **sepal length** on the x-axis and **petal length** on the y-axis, rendered from the Iris flower dataset. Points are plotted as small circles within a clean white plotting area framed by a black page background. ## Technical Implementation The example showcases Chiasm's declarative configuration model, where components are wired together through data bindings rather than imperative code. The architecture demonstrates: 1. **Modular component registration** - Plugins for layout, data loading, links, and scatter plot are registered with the Chiasm instance 2. **Declarative configuration** - A JSON configuration defines component instances and their state, including the scatter plot's axis labels, data columns, and margin settings 3. **Reactive data flow** - The `links` component connects the dataset loader output to the scatter plot input 4. **Separation of concerns** - Layout, data loading, and visualization components operate independently The visualization displays the classic Iris dataset with sepal length on the x-axis and petal length on the y-axis. Both axes are labeled, with "Sepal Length" and "Petal Length" text annotations. The scatter plot uses the Chiasm framework's reactive data flow, where changes to the dataset automatically propagate through the linked components. The example serves as a minimal template for building Chiasm-based visualizations, showing how to compose a scatter plot from reusable components using a declarative configuration. It also demonstrates how to customize axis labels and offsets. A custom CSS class provides styling for axis labels with font size and text alignment. The page loads required libraries from a CDN and initializes the visualization within a container div that has a black border. This example was created by Curran Kelleher, and the code is available under the MIT License.# Chiasm Boilerplate This example demonstrates a minimal scatter plot visualization built using the Chiasm reactive data visualization framework. The visualization displays the classic Iris dataset, plotting sepal length against petal length. ## Key Features - **Framework**: Chiasm, a reactive visualization composition library built on D3 - **Data**: The well-known Iris flower dataset with measurements for 150 samples - **Visualization**: A scatter plot with configurable axes, showing the relationship between sepal length (x-axis) and petal length (y-axis) - **Architecture**: Demonstrates Chiasm's declarative configuration approach, where components are wired together using data bindings - **Components**: Uses layout, dataset loader, scatter plot, and reactive links components from the Chiasm ecosystem The example showcases how Chiasm enables declarative composition of visualization components, with the configuration specifying the data flow from the dataset loader through to the scatter plot component, including axis labels and margins. The boilerplate provides a starting point for building interactive data visualizations using the Chiasm framework, which is built on top of D3 and uses a reactive data-flow architecture.# Chiasm Boilerplate This example demonstrates a minimal **Chiasm** application—a reactive, component-based architecture for building data visualizations. The visualization displays the classic Iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis. ## Key Features The application showcases Chiasm's declarative configuration model, where components are wired together through data bindings rather than imperative code. The architecture consists of four interconnected components: - **Layout** - Manages the DOM container and arranges visualization components - **Dataset Loader** - Loads the Iris dataset from a CSV file - **Scatter Plot** - Renders the visualization with custom axis labels and margins - **Links** - Declaratively binds the loaded dataset to the scatter plot component ## Technical Implementation The visualization leverages Chiasm's reactive dataflow architecture, where: - The layout component creates a full-page container with a black border - The dataset loader asynchronously fetches the Iris flower dataset - The scatter plot component renders sepal length against petal length - Data flows through declarative bindings between components using the "links" plugin The example demonstrates how to compose a complete interactive visualization from modular, reusable components using Chiasm's dependency injection system. The scatter plot maps the classic Iris dataset, displaying sepal length on the x-axis and petal length on the y-axis with custom axis labels. This boilerplate provides a foundation for building more complex Chiasm-based visualizations by showing the minimal setup required to connect data loading, layout, and visualization components.# Chiasm Boilerplate This example demonstrates a minimal yet complete setup for creating interactive data visualizations using the **Chiasm** reactive visualization framework. It showcases how to compose modular visualization components declaratively through a JSON configuration, with the classic Iris dataset loaded from CSV. ## What It Shows The visualization renders a **scatter plot** of the Iris flower dataset, plotting sepal length against petal length. What makes this example particularly valuable is its architecture: it illustrates the Chiasm pattern of separating concerns into reusable, configurable components that communicate through reactive data bindings. The page loads the entire Chiasm stack—including the core library, layout manager, dataset loader, data-binding links, and chart components—then wires them together declaratively. A scatter plot component is configured to display the data, with custom axis labels ("Sepal Length" and "Petal Length") and margins. The dataset loader loads the Iris dataset, and the links component binds the loaded data to the scatter plot component. The example also includes logging of the dataset when it becomes available, and a simpler commented-out alternative configuration demonstrates the modular nature of the system. This boilerplate showcases the Chiasm architecture, where the entire visualization is declared as a configuration object that specifies component instances and their relationships, and the framework handles the reactive data flow between them. It uses a layout plugin to manage the DOM container, a dataset loader to fetch the Iris CSV data, a scatter plot component for rendering, and a links plugin to wire the dataset to the visualization. The end result is an interactive scatter plot of the classic Iris dataset that can be reconfigured without writing additional imperative code. The code also includes styling for the axes and container. **Chiasm Boilerplate** is a demonstration of the Chiasm reactive visualization framework, showcasing a minimal yet complete setup for building interactive data visualizations. This example uses a scatter plot of the classic Iris dataset to illustrate the core concepts of the Chiasm architecture. The visualization is constructed declaratively using a JSON configuration that wires together Chiasm's modular components. A layout plugin manages the container, a dataset loader fetches the Iris flower measurements (sepal length, sepal width, petal length, petal width, and species), and a scatter plot component visualizes the data with configurable axis labels, margins, and data column mappings. The `links` plugin establishes a reactive data flow, automatically connecting the dataset to the visualization. The key strength of this example is its demonstration of the Chiasm architecture: a clear separation between visualization components and the data flow that connects them. This is achieved through a declarative configuration that specifies the plugin instances and their bindings, making it easy to modify the visualization's structure, data source, or styling without touching the underlying code. The visualization uses D3.js for rendering and the Iris dataset as the data source, showcasing a scatter plot with sepal length on the x-axis and petal length on the y-axis. Custom CSS styles axis labels and lines for a clean presentation. The example includes a minimal HTML container and JavaScript that wires together the components, illustrating how Chiasm enables the composition of reusable visualization components with a clean separation of concerns.# Chiasm Boilerplate This example demonstrates a minimal setup for building reactive data visualizations using the Chiasm architecture. It creates an interactive scatter plot of the classic Iris dataset, showing sepal length against petal length. The visualization is constructed by composing several reusable Chiasm components through a declarative JSON configuration. A dataset loader component fetches the Iris flower measurements from a CSV file, a scatter plot component renders the data, and a layout component positions the visualization within the page. Links component wires the data flow between them. The scatter plot displays sepal length on the x-axis and petal length on the y-axis, with axis labels customized. The HTML page includes custom CSS for styling the axes and labels. The example demonstrates the fundamental Chiasm pattern of declarative configuration, component composition, and reactive data flow. The example serves as a boilerplate showing how to set up a Chiasm application with multiple plugins and a data-driven visualization using the well-known Iris dataset. It includes a simple hit counter for tracking page views. The code is MIT licensed.

CCurran Kelleher
77% match
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
74% 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
72% match
Loading thumbnail…

Filtre : Scatterplot Iris using different marks

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.

4456lumen
72% match