traitement_steam

100%

traitement_steam

✓ Published0🌍 Public

Last edited Oct 24, 2017

Created on Oct 24, 2017

Two coordinated scatterplots display the classic Iris dataset, contrasting sepal measurements on the left with petal measurements on the right. Each plot maps one measurement to the x-axis, another to the y-axis, and a third to circle radius via `d3.scaleSqrt`, while species determines color through `d3.scaleOrdinal` with `d3.schemeCategory20`. The code uses D3 v4 to render SVG circles with axes from `d3.axisBottom` and `d3.axisLeft`. Hovering over a dot increases its stroke width for emphasis, but no linked highlighting or selection between charts is implemented beyond this.

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/0869b7ae854c148121bb4ca7c9dc9095'>Scatterplot Iris (d3.v4)</a>

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/87ed36c72b16fd785540fd2af012c4dc'>Coordinated Scatterplot Iris (d3.v4)</a>

forked from <a href='http://bl.ocks.org/GTHamonville/'>GTHamonville</a>'s block: <a href='http://bl.ocks.org/GTHamonville/684e536d6a725d2fa44f23f33b34a506'>Coordinated Scatterplot Iris (d3.v4)</a>

mit Licensed

Similar vizzes

Loading thumbnail…

traitement_donnee_steam

This example presents two side-by-side scatterplots of the Iris dataset, comparing sepal and petal measurements across species. The left chart plots sepal length against sepal width, while the right chart plots petal length against petal width, with circle radius encoding a third quantitative variable and color encoding the categorical species via the d3.scaleOrdinal color scheme and d3.scaleSqrt for area. Built with d3.v4 and SVG, it includes axis labels, mouseover highlighting that thickens the selected dot’s stroke, and a transparent tooltip container using plain D3 selection methods and event handlers.

GGTHamonville

93% match

Loading thumbnail…

Coordinated Scatterplot Iris (d3.v4)

Two coordinated scatterplots display the classic Iris dataset, comparing sepal and petal measurements across the three species. Each circle is positioned by one pair of measurements, with point size encoding a third measurement and color encoding species. Built with D3 v4 and SVG, the plots use linked hover interactions—hovering a point in either chart highlights the corresponding point in both—by filtering all circles with matching data. Axes are automatically scaled from the data, and a tooltip is prepared for detail display, though it is not fully implemented. The two charts share the same color scale for species, facilitating cross-comparison of the dataset's four numerical variables.

BBerengerCunillera

84% match

Loading thumbnail…

td3

This visualization displays two side-by-side scatterplots of the Iris dataset, plotting sepal length against sepal width. Each point is encoded with a symbol and color representing the flower species, while point size reflects petal length. Built with D3 v4, the code uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` to generate distinct patterns for setosa, versicolor, and virginica. The SVG renderings are created by appending paths to separate chart divs, with scales computed from the CSV data using `d3.extent` and `d3.axisBottom`/`d3.axisLeft` for axes.

MMathReynaud

84% match

Loading thumbnail…

Coordinated Scatterplot Iris (d3.v4)

This example displays the Iris flower dataset in two coordinated scatterplots using D3.js v4 and SVG rendering. The left chart plots sepal length against sepal width, while the right chart shows petal length against petal width, with each dot sized by a third attribute and colored by species via `d3.scaleOrdinal`. Hovering over a point highlights it in both charts by increasing its stroke width. The code uses `d3.csv` to load the dataset and `d3.axisBottom` and `d3.axisLeft` for the axes.

GGTHamonville

83% match

Loading thumbnail…

scatterplot_iris

This scatterplot visualizes the classic Iris dataset, mapping sepal length on the x-axis, sepal width on the y-axis, and encoding petal length via the radius of each circle. The chart is rendered as SVG circles using D3 v4, with the x and y axes scaled linearly and the color scale using d3.schemeCategory20 to distinguish the three iris species. Hovering over a point triggers a tooltip that displays the species name. A legend identifies the species by color, and axis labels indicate the measurements plotted.

DDjokovalle

83% match

Loading thumbnail…

iris

This visualization displays the classic Iris flower dataset as a scatterplot, mapping sepal length and width to the x and y axes, petal length to point size, and species to color. The rendering uses D3 v4’s SVG output. Data loading relies on `d3.csv` for parsing the CSV file, while scales are built with `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal`, plus axes from `d3.axisBottom` and `d3.axisLeft`. A categorical legend, built with circle elements, identifies the three species (setosa, versicolor, virginica), and a tooltip div is appended to the body but never made visible.

GGTHamonville

83% match

Loading thumbnail…

Mathilde_TD2

A D3.js scatterplot maps sepal length against sepal width for the classic Iris dataset, with each of the three species distinguished by a unique marker shape (triangle, cross, star) and color (red, orange, blue). The visualization also overlays per-species least-squares regression lines, computed from the CSV data, using `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.symbol` for the custom point glyphs. SVG rendering is used throughout.

MMathReynaud

83% match

Loading thumbnail…

Scatter plot testing

This scatter plot visualizes the classic Iris dataset, mapping sepal length and width to the x- and y-axes while encoding petal length through circle radius and species via color. The D3 v4 code loads the CSV, uses linear and sqrt scales for positioning and sizing, and renders SVG circles with ordinal color mapping. Axes are drawn using d3.axisBottom and d3.axisLeft.

AAtomy9

83% match