Skip to main content
SimilarExport ZIP
100%

Tutorial 2 D3

✓ Published0🌍 Public
JJboulery
Last edited Jan 25, 2018
Created on Jan 25, 2018

This D3.js v4 visualization plots the classic Iris dataset, showing the relationship between petal length and petal width for three iris species. Each species is represented by a distinct symbol and color from the d3.schemeCategory10 palette. The chart uses d3.csv to load data, d3.scaleLinear for axes, and d3.axisBottom/left for tick marks. A linear regression line, calculated from the dataset's means, is drawn using d3.line. Hovering over a point displays its coordinates via a text tooltip, and a legend identifies the species. The SVG is generated using d3.select and d3.append.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Tutorial 2 D3

This visualization displays the Iris flower dataset, plotting petal length against petal width. Each of the three species (setosa, versicolor, virginica) is represented by a distinct SVG symbol—circle, cross, or diamond—and colored using a categorical scale. The view includes a linear regression line calculated from the data and displayed with its equation, alongside a legend. Mouseover interactions reveal a tooltip showing the exact coordinates of each point. Built with D3 v4, the code uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.symbol`, `d3.line`, and `d3.csv` to load the external CSV.

JJboulery
94% match
Loading thumbnail…

Tutorial 2 D3

This scatterplot maps the classic Iris flower dataset, plotting petal length against petal width for 150 samples. It uses the D3.js v4 library, rendering as an SVG with axis ticks and labels. The code employs `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for the chart frame, and `d3.symbol` with `d3.symbolCircle`, `d3.symbolCross`, and `d3.symbolDiamond` to distinguish the three species—setosa, versicolor, and virginica—by both shape and color. Data is loaded from a local `iris.csv` file.

JJboulery
93% match
Loading thumbnail…

D3: Drawing with iris data

This example visualizes the classic Iris dataset by plotting sepal length against sepal width for three species of iris flowers. Each species is distinguished by a unique symbol shape and color: red triangles for setosa, orange crosses for virginica, and blue stars for versicolor. The visualization also overlays a least-squares regression line for each species, computed from the data, to show trends in the relationship. Built with D3 v4, the code loads the CSV data and uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.symbol` to render the SVG scatterplot and its axes.

MMathReynaud
85% match
Loading thumbnail…

D3: Drawing with iris data

This example visualizes the classic Iris dataset by plotting sepal length against sepal width for three species of iris flowers. Each species is distinguished by a unique symbol shape and color: red triangles for setosa, orange crosses for virginica, and blue stars for versicolor. The visualization also overlays a least-squares regression line for each species, computed from the data, to show trends in the relationship. Built with D3 v4, the code loads the CSV data and uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.symbol` to render the SVG scatterplot and its axes.

MMathReynaud
85% match
Loading thumbnail…

D3 scatter plot template with colors

This D3.js scatter plot template visualizes the Iris flower dataset, plotting petal length against sepal length. Each of the 150 data points is colored by species (setosa, versicolor, or virginica), with hover tooltips showing exact coordinates. Using SVG rendering, the code loads the CSV via `d3.csv`, applies `d3.scaleLinear` for both axes, and creates circles with `d3.axisLeft` and `d3.axisBottom` for labeled axes. The `d3.join` pattern binds data, while a custom `fillColor` function assigns species-specific hues.

LLouis Astorg
85% match
Loading thumbnail…

Iris scatter plot

This scatter plot visualizes the classic Iris dataset, plotting petal width against petal length for 150 flowers. Each point is a colored circle representing one of three species (setosa, versicolor, virginica), with colors assigned using D3's category-10 ordinal scale. The chart is rendered in SVG, with axes and labels for petal width and length, and a legend identifying species colors. The data is loaded from a CSV and mapped to positions using linear scales.

AAntoineDiers
84% match
Loading thumbnail…

Creating a Scatter Plot with D3.js

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width to the x- and y-axes and coloring each point by species (setosa, versicolor, or virginica). It uses D3.js v6 with a linear scale and axis generators (`d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`) to render SVG circles. Data is loaded via `d3.csv` from a remote URL, with numeric fields parsed on ingestion. The plot is sized to the full window and includes custom tick styling.

SShivaKarpe
84% 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
84% match