scatterplot in progress

100%

scatterplot in progress

✓ Published0🌍 Public

Last edited Oct 17, 2017

Created on Oct 17, 2017

This example shows a scatterplot of the classic Iris dataset, rendered with D3 v4 as an SVG. The code begins by generating 10 random data points to create a preliminary scatterplot, mapping values linearly to x and y positions with circle radius scaled by a square-root transform and colored via an ordinal color scale. After drawing this initial plot with axes, it then loads the Iris dataset from a CSV file and parses its numerical fields, logging the data to the console — suggesting an in-progress step toward replacing the random points with the actual Iris measurements.

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/4c9487b46840585b7e24fa92e3a37b53'>scatterplot in progress </a>

mit Licensed

Similar vizzes

Loading thumbnail…

scatterplot in progress

This example demonstrates a scatterplot that initially displays randomly generated points, then transitions to plotting the classic Iris dataset. The visualization uses D3.js scales to map sepal length, sepal width, and petal length to the x position, y position, and point size respectively, with categorical colors applied to the circles. The axes are created with d3.axisBottom and d3.axisLeft. The chart is rendered as an SVG, and the code includes both a preliminary random-data phase and a final phase that loads and plots the Iris dataset from a CSV file, with the x, y, and r scales re-domained accordingly.

FFlazyy

93% match

Loading thumbnail…

scatterplot in progress

This scatterplot, titled "scatterplot in progress," visualizes the classic Iris dataset using D3.js v4. It plots sepal length on the x-axis against sepal width on the y-axis, with each point's radius mapped to petal length and color mapped to species using a categorical scale. The visualization includes axis labels generated by D3's axis components and a legend identifying the three iris species. The chart is rendered as SVG within a fixed 960x500 viewport, with black circles overlaid on a white background, and the title hints at its iterative, work-in-progress nature.

BBerengerCunillera

87% match

Loading thumbnail…

scatterplot in progress

This example visualizes the classic Iris dataset as a scatterplot, with sepal length and width mapped to the x and y axes, petal length encoded by point size, and petal width by color. Built with D3 v4 and rendered as SVG, the chart separates the three species (setosa, versicolor, virginica) using distinct colors, and includes axes, a legend, and transition-based brushing that filters points based on a selection. The visualization is a work in progress, forked from an earlier block, and uses the famous Fisher iris measurements from the bundled `data.csv`.

BBerengerCunillera

87% match

Loading thumbnail…

Basic Scatter Plot

This example visualizes the classic Iris dataset with a basic scatter plot, using D3 v4 to render circles in SVG that map sepal length and width. Each circle’s fill encodes the flower species via a color legend, generated with the d3-legend plugin. Axis ticks and labels are customized with scales, and the plot is fully responsive to the viewport.

CCurran Kelleher

86% match

Loading thumbnail…

scatterplot in progress

This example visualizes the classic Iris dataset as a scatterplot, mapping sepal length and sepal width to the x- and y-axes while encoding petal length in the radius of each circle and species in color. Built with D3 v4 and rendered as SVG, the chart loads iris.csv and applies linear scales for all three variables, with the radius scale bounded between 2 and 15 pixels. The visualization uses a categorical color scheme (d3.schemeCategory20) to distinguish the three iris species, and axes are drawn on the bottom and left edges of the plotting area.

BBerengerCunillera

86% match

Loading thumbnail…

Scatter Plot

This example visualizes the classic Iris dataset, displaying flower measurements in a scatter plot with points colored by species class. Each circle represents a single flower, positioned by its sepal and petal dimensions using D3’s `d3.scaleLinear` for x and y axes. The code loads data with `d3.csv`, appends SVG circles via `svg.selectAll` and `enter()`, and includes placeholder logic for axis rendering and hover tooltips. The visualization is rendered as an SVG within an HTML page, styled with external CSS, demonstrating basic D3 data-binding and scale patterns.

YYang Shun Yu

86% match

Loading thumbnail…

scatter plot

This example presents a scatter plot of the classic Iris dataset, loaded from a GitHub-hosted CSV using D3.js’s `d3.csv`. The visualization is rendered as an SVG element that fills the entire browser window, with dimensions set to the viewport’s height and width via `window.innerHeight` and `window.innerWidth`. The code parses the dataset’s four numeric columns (sepal length, sepal width, petal length, petal width) into integers using the `parseRow` function, though it does not yet map these fields to visual positions or draw any points. Instead, it establishes the SVG canvas and logs the parsed data to the console, leaving the plotting logic incomplete.

Kkhalil-ryu

85% 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

85% match