Skip to main content
SimilarExport ZIP
100%

Tutorial 2 D3

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

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Tutorial 2 D3

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.

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

D3 Scatter Plot

This visualization reproduces the classic Iris flower dataset as a D3.js scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. Each circle represents a flower sample, colored by its variety (setosa, versicolor, or virginica) using a categorical color mapping. The chart uses an SVG rendering with D3 scales and axes, and includes tooltips showing variety and coordinates. Data is loaded from a CSV via `d3.csv`, with axes generated using `d3.axisBottom` and `d3.axisLeft`.

Sscott306lr
88% match
Loading thumbnail…

D3 Scatter Plot

This visualization displays a scatter plot of the classic Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis. The code loads the data using `d3.csv`, converts the numeric fields, and uses `d3.scaleLinear` with `d3.extent` to set the scales. Circles are rendered with `d3.selectAll` and `.join`, while `d3.axisLeft` and `d3.axisBottom` provide the labeled axes, with all drawing done in SVG.

SSam Hege
88% match
Loading thumbnail…

Iris Scatter Plot

This is a D3.js scatter plot that visualizes the Iris dataset, showing petal length against petal width for 150 flowers of three species. Each species is represented by a colored circle, with colors assigned using `d3.scaleOrdinal` (Iris-setosa in dark blue, Iris-versicolor in magenta, and Iris-virginica in light blue). The visualization uses `d3.scaleLinear` for both axes and renders the SVG elements with `axisBottom` and `axisLeft` for labeled tick marks. Data is loaded from a TSV file via `d3.tsv` and parsed before rendering.

JJepyagg
88% match
Loading thumbnail…

D3 Scatter Plot

This example visualizes the classic Iris dataset as a scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. Circles represent individual flowers, with axes labeled via D3’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs. The code loads CSV data using `d3.csv`, parses numerical fields, and renders the plot as SVG circles sized with a fixed radius. The visualization fills the browser window, using viewport dimensions for the chart’s width and height, and demonstrates a straightforward data-joining workflow with `selectAll` and `join`.

Lliu yang
88% match
Loading thumbnail…

D3 Scatterplot

This visualization displays the classic Iris dataset, plotting petal length against sepal length. Each flower sample is rendered as a fixed-radius circle in an SVG canvas that fills the browser viewport. The code uses D3 v7's `csv` loader to fetch data from a GitHub gist, then employs `scaleLinear` with `extent` to compute domains for both axes. Axis ticks are generated using `axisLeft` and `axisBottom`, with the categorical iris species left uncolored in this minimal example. The rendering relies on D3's declarative selection-based joins to bind data to SVG circle elements, with dimensions set to the window's inner height and width.

Mmegan-grannan
88% match
Loading thumbnail…

D3 scatter plot

This D3 scatter plot visualizes the Iris flower dataset, plotting petal length against sepal length for individual samples. The SVG rendering uses d3.scaleLinear to map data values to pixel coordinates, with d3.axisLeft and d3.axisBottom providing labeled scales. d3.csv loads the external data source, and d3.select creates circles for each data point. The chart fills the browser window, with margins separating the plot area from its axes.

UUzoemeka Okechukwu Innocent
88% match