Skip to main content
SimilarExport ZIP
100%

D3V4 Scatterplot

✓ Published0🌍 Public
MMNoichl
Last edited Dec 30, 2017
Created on Dec 30, 2017

A D3V4 scatterplot visualizes iris flower dimensions, plotting sepal width on the x-axis and sepal length on the y-axis, with each point colored by species and a legend. The chart uses a TSV data file, parsed with `d3.tsv`, and encodes positions via `d3.scaleLinear`, color via `d3.scaleOrdinal`, and axes via `d3.axisBottom` and `d3.axisLeft`. The SVG rendering employs circles for data points and standard margins, adhering to D3 conventions.

AI-generated description

** Copied from https://bl.ocks.org/mbostock/3887118 Then updated to D3 V4 **

This scatterplot is constructed from a TSV file storing the dimensions of sepals and petals of various iris flowers. The chart employs conventional margins and a number of D3 features:

forked from <a href='http://bl.ocks.org/sebg/'>sebg</a>'s block: <a href='http://bl.ocks.org/sebg/6f7f1dd55e0c52ce5ee0dac2b2769f4b'>D3V4 Scatterplot</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Scatterplot

This scatterplot visualizes the relationship between sepal length and sepal width for three iris species, with each point colored by species and a legend identifying the categories. The chart uses conventional plot margins and axes labeled with measurements in centimeters. It is built with D3 v3, loading data from a TSV file via `d3.tsv`, mapping the data to positions with `d3.scale.linear`, encoding species with `d3.scale.category10`, and rendering as SVG with circles and axes from `d3.svg.axis`.

Mmbostock
90% match
Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the Iris flower dataset, comparing sepal length to sepal width across three species encoded by color. The visualization uses D3 v7’s scaleLinear, axisBottom, and axisLeft to construct the chart, with an ordinal color scale for species classification. Rendered as SVG, it includes a manually drawn legend and gridlines, reading data from a local CSV file through d3.csv. The chart demonstrates ES6 module imports and loading D3 via UNPKG.

YYi-Qing
90% match
Loading thumbnail…

Iris_Scatter_Plot

This scatter plot visualizes the classic Iris dataset, showing the relationship between sepal length and sepal width for three iris species, with each species represented by a distinct color. Data is loaded from a tab-separated values file using `d3.tsv`, and the visualization is rendered as SVG circles using D3 v3. Linear scales (`d3.scale.linear`) map the quantitative axes, while `d3.svg.axis` generates the bottom and left axes with labels. A color legend identifies the species categories, and all points are drawn with a fixed radius of 3.5 pixels.

CChmits
89% match
Loading thumbnail…

Iris_Scatter_Plot

This scatter plot visualizes the classic Iris dataset, showing the relationship between sepal length and sepal width for three iris species, with each species represented by a distinct color. Data is loaded from a tab-separated values file using `d3.tsv`, and the visualization is rendered as SVG circles using D3 v3. Linear scales (`d3.scale.linear`) map the quantitative axes, while `d3.svg.axis` generates the bottom and left axes with labels. A color legend identifies the species categories, and all points are drawn with a fixed radius of 3.5 pixels.

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

D3 Scatter Plot

This D3 scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. The SVG rendering uses d3.scaleLinear to transform raw CSV values into pixel coordinates, with d3.min and d3.max defining the domains. Circles represent individual flowers, colored in a teal tone, while d3.axisLeft and d3.axisBottom generate labeled axes. The code loads data via d3.csv and appends text labels for both axes, using a full-window responsive layout with fixed margins.

Aainhoadieruiz@gmail.com
89% match
Loading thumbnail…

DataViz Scatterplot

This scatterplot visualizes the classic Iris dataset, plotting sepal length against sepal width for 150 flowers. Points are colored by species (setosa, versicolor, virginica) and use distinct symbols (cross, circle, triangle-up) via the D3 `d3.svg.symbol` API, with a legend mapping these shapes to species names. The chart includes labeled axes, a light gray grid, and uses scales from `d3.scale.linear` for positioning and `d3.scale.category10` for colors. Built with D3 v3, it renders SVG elements and loads data from a CSV file.

AArnaudBru
89% match
Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the iris dataset, showing sepal length against sepal width for three flower species, with each species colored distinctly via a custom color legend. The visualization uses D3 v5 to load CSV data and build an SVG scene, employing `scaleLinear` for the axes, `scaleOrdinal` for color encoding, and `axisBottom`/`axisLeft` to render gridlines. Semi-transparent circles reveal overlapping points, while a reusable `colorLegend` module generates a categorical legend with labeled circles and a background rectangle.

YYunLing
89% match