Coordinated Scatterplot Iris (d3.v4)

100%

Coordinated Scatterplot Iris (d3.v4)

✓ Published0🌍 Public

Last edited Oct 17, 2017

Created on Oct 17, 2017

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.

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>

mit Licensed

Similar vizzes

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

93% match

Loading thumbnail…

D3 Scatter Plot

This D3.js scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. The code loads CSV data from a remote Gist, converts string values to numbers, and uses `d3.scaleLinear` with `d3.extent` to map data domains to screen coordinates. Individual data points are rendered as SVG circles with tooltips showing their coordinates. Axis ticks are generated using `d3.axisLeft` and `d3.axisBottom`, with the chart filling the entire browser window.

GGullyPlook

90% match

Loading thumbnail…

D3 Scatterplot

This example visualizes the Iris dataset as a scatterplot, mapping petal length on the x-axis and sepal length on the y-axis. Each flower is rendered as a circle using D3’s selection and data-join methods. The code loads the data via `d3.csv`, scales positions with `d3.scaleLinear`, and adds axes through `d3.axisLeft` and `d3.axisBottom`. The SVG is sized to the full window, and the plot includes customizable margins and tick font sizing.

Aajoua

89% match

Loading thumbnail…

Scatter Plots (Iris)

This example visualizes the classic Iris dataset, plotting sepal length against sepal width. Each dot is color-coded by species using D3's `scaleOrdinal`, with hover tooltips revealing exact measurements. The SVG chart is built with D3 v7, using `csv` and `autoType` to load and parse the remote data, `scaleLinear` for axes, and `axisBottom`/`axisLeft` for tick marks. The plot updates responsively to its container width, and the `title` element provides interactive detail.

KKrishna.

89% match

Loading thumbnail…

Basic Scatter Plot

This example visualizes the classic Iris dataset, plotting sepal length against petal length for 150 flowers of three species. Using D3.v4, it constructs an SVG scatter plot with labeled, ticked axes, employing `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for coordinate mapping and axis generation. The visualization also demonstrates custom axis label styling and margin-based layout, with data loaded from a CSV file.

CCurran Kelleher

89% match

Loading thumbnail…

Basic Scatter Plot

This scatter plot visualizes the Iris dataset, plotting sepal length against petal length for 150 iris flowers. The code uses D3 v4 to create an SVG visualization, employing `d3.scaleLinear` for both axes and `d3.axisBottom` and `d3.axisLeft` to render the axes. The data is loaded from a CSV file using `d3.csv`. Each flower is represented as a circle, with its position determined by the scaled values of the two measured dimensions.

CCurran Kelleher

89% match

Loading thumbnail…

Basic Scatter Plot

This scatter plot visualizes the Iris dataset, plotting sepal length against petal length for 150 flowers. The code uses D3 v4 to create SVG circles, with axes customized via `d3.axisBottom` and `d3.axisLeft`, including negative tick sizes and padding. Data is loaded from a CSV file and parsed with a row function that converts measurements to numbers. Linear scales map the data domains to the plot dimensions, with a margin-based layout for the chart area.

CCurran Kelleher

89% match

Loading thumbnail…

D3 scatterplot

This example visualizes the Iris flower dataset as a scatterplot, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v7 with SVG rendering, loading the CSV data via `d3.csv` and parsing numeric fields. Linear scales (`d3.scaleLinear`) and extent-based domains position circles for each data point, while `d3.axisLeft` and `d3.axisBottom` generate the labeled axes. The chart fills the browser window, with margins and tick styling set via CSS.

HHtet Yan Oo

89% match