Skip to main content
100%

Scatter Plot : Legend filtering

✓ Published0🌍 Public
AaiMojica10
Last edited Apr 30, 2018
Created on Apr 30, 2018

This scatter plot displays Iris flower measurements, mapping sepal length and width along the axes while encoding petal length through point size and species through color and symbol shape. The visualization includes an interactive legend where clicking a species name toggles the opacity of all points, dimming non-selected species to 0.1. Built with D3 v4, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbols`, and SVG `path` elements, with data loaded from a CSV file and tooltips styled via CSS.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Ctuauden/'>Ctuauden</a>'s block: <a href='http://bl.ocks.org/Ctuauden/52d057254665400f561ef73cb6e5841a'>Scatter Plot : Legend filtering</a>

mit Licensed

Similar vizzes

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
96% match
Loading thumbnail…

Scatter Plot with Colour Legend

This interactive scatter plot displays the Iris flower dataset, letting users compare any two measured attributes (sepal length, sepal width, petal length, petal width) by selecting them from dropdown menus. The species of each flower is encoded through color and shown in a separate legend. Built with React and D3 v7, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for the categorical color mapping, and renders all marks and axes as SVG elements. The data is loaded asynchronously from a CSV file using D3’s `csv` function.

KKevin McMorrow
90% match
Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between four measurements (sepal and petal length/width) through dropdown menus that control the x and y axes. Points are colored by species using a d3.scaleOrdinal with a corresponding legend showing the three Iris varieties. The visualization is built with React and D3 v6, rendering SVG circles and axes through custom components like AxisBottom, AxisLeft, and Marks, with data loaded via d3.csv from a remote gist.

CCodeDuckie99
90% match
Loading thumbnail…

Scatter Plot, Color & Interactive Legend

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width, with points colored by species. An interactive legend allows users to hover over species names, highlighting only the corresponding data points and fading the others. The visualization is built with React and rendered as SVG, using d3.scaleLinear for axes and d3.scaleOrdinal for color mapping. Point tooltips display the precise petal length value using d3.format.

AAndre J Denais
89% match
Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot displays measurements from the Iris Dataset, letting users compare four flower attributes (sepal and petal length/width) by selecting which to plot on the X and Y axes. Each point is colored by iris species, with a color legend identifying the three varieties. The visualization is built with React and uses D3’s `scaleLinear`, `scaleOrdinal`, and `extent` functions to map data to positions and colors, rendering circles as SVG elements. Dropdown menus control the axis selections, while D3’s `csv` loads the data asynchronously.

MMario Ibarra
89% match
Loading thumbnail…

Scatter Plot with Colour Legend

This interactive scatter plot visualizes the Iris dataset, plotting petal length against sepal width. Each point is colored by species, with a categorical color legend displaying the three species types (setosa, versicolor, and virginica) using distinct colors. Built with React and D3 v5, the visualization uses `scaleLinear` for the x and y axes, `scaleOrdinal` for the color encoding, and renders as an SVG with circles representing individual data points. The code includes hover tooltips showing the petal length value, and the data is loaded from a CSV file containing 150 iris flower measurements.

CChris Briggs
89% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris flower dataset, mapping petal length on the x-axis, sepal width on the y-axis, and encoding species with color. Each point is rendered as an SVG circle using React components, with scales from `d3.scaleLinear` and `d3.scaleOrdinal`. The visualization includes axes built via `xScale.ticks()`, a color legend generated with `colorScale.domain()`, and tooltips using SVG `<title>` elements. Data is loaded asynchronously with `d3.csv` from a public gist.

Aaakarsh satyam
89% match
Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Dropdown menus let viewers switch the X and Y axes among four numeric attributes, while a color legend distinguishes species using d3.scaleOrdinal with three categorical colors. The visualization renders as SVG using React components, with d3.scaleLinear handling axis scales and d3.extent computing domains. Marks are drawn as colored circles with tooltips showing values. The data loads asynchronously via d3.csv from a GitHub gist.

MMichael Bruno
89% match