Skip to main content
SimilarExport ZIP
100%

Interactive Scatterplot Iris using different marks

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

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.

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>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/30e2a51c9ee18979000226d94cd243d4'>Interactive Scatterplot Iris using different marks</a>

forked from <a href='http://bl.ocks.org/ArnaudBru/'>ArnaudBru</a>'s block: <a href='http://bl.ocks.org/ArnaudBru/753987e5c8635141cbc16a617bc1789c'>Interactive Scatterplot Iris using different marks</a>

mit Licensed

Similar vizzes

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

Iris Scatter Plot

This interactive scatter plot displays the classic Iris dataset, allowing users to compare any two of the four flower measurements (sepal length/width, petal length/width) by selecting them from dropdown menus. Each of the 150 data points is rendered as a colored circle, with hue indicating one of three Iris species. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` for axes, while `transition().duration().delay().attr()` animates the circles smoothly to their new positions when the axis selection changes. The legend and axis dropdowns are placed beside the plot.

Mmagua
90% match
Loading thumbnail…

Iris Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot, allowing the selection of any two of the four measured attributes (sepal length, sepal width, petal length, petal width) for the x- and y-axes via dropdown menus. Each of the 150 iris flowers is represented as a colored circle, with red, blue, and green mapping to the three species. The D3.js code uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and constructs the SVG rendering by binding circles to the data, updating their positions based on the chosen columns. A legend to the right lists the species and their corresponding colors.

Hharker2011
90% match
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing measurements of sepal and petal length and width for three iris species, with each species distinguished by color. The visualization uses d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render the plot as SVG circles. Users can select any of the four measurement variables for either the x-axis or y-axis through dropdown menus built with d3.select and d3.merge, which triggers complete re-renders via the render function. A legend displays the species color mapping using d3.scaleOrdinal.

Eerin1234567
90% match
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing the distribution of three iris species across four measurable attributes (sepal and petal length/width). Users can dynamically swap the variables assigned to the x- and y-axes via dropdown menus, with each species colored using a categorical scale. The visualization is built with D3 v5, using `d3.scaleLinear` for axes, `d3.legendColor` for the legend, and SVG rendering for the circles and grid lines. The plot updates by re-rendering the entire SVG when a new axis selection is made.

Iimsohandsome123
90% match
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions for three flower species. Users select which numeric attribute appears on the x- and y-axes through dropdown menus, and the visualization updates accordingly. Each point is colored by species using a d3.scaleOrdinal color scale, with a legend showing the species categories. The chart uses d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for gridlines, and renders marks as SVG circles.

Eeuphokumiko
89% match