Skip to main content
SimilarExport ZIP
100%

Datasaurus Dozen D3 Scatter Plot

✓ Published1🌍 Public
KKaustav Sen
Last edited May 25, 2021
Created on May 24, 2021

This visualization cycles through the twelve datasets of the Datasaurus Dozen, revealing how datasets with nearly identical summary statistics can have wildly different distributions. Each dataset is displayed as a scatter plot for three seconds before transitioning to the next using a joined circle transition. The code uses d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.transition to animate the points, axes, and plot title. Data is loaded from the TidyTuesday GitHub repository via d3.csv, with SVG rendering and opacity set on each circle.

AI-generated description

The data comes from Alberto Cairo courtesy of Steph Locke + Lucy McGowan.

Taken from the #TidyTuesday github repo here.

This represents 12 different datasets with almost identical summary statistics but wildly different underlying distributions.

Moral of the story: Always plot your data!

Question: Can I make the plot title first go up and then come down? line 123 of scatterPlot.js

MIT Licensed

Similar vizzes

Loading thumbnail…

Datasaurus Dozen D3 Scatter Plot

The Datasaurus Dozen D3 Scatter Plot cycles through 12 datasets with nearly identical summary statistics but dramatically different shapes, demonstrating the importance of visualizing data. Each dataset appears for three seconds, with circles transitioning smoothly to new positions via `transition()` and `selection.join()`. The plot title and axes update dynamically using D3 scales (`scaleLinear`), axes (`axisBottom`, `axisLeft`), and SVG rendering. Data comes from the TidyTuesday repository, originally from Alberto Cairo, courtesy of Steph Locke and Lucy McGowan.

KKamalabot
96% match
Loading thumbnail…

D3 Scatterplot (Animations)

This D3 scatterplot demonstrates animated transitions between datasets. The visualization initially renders 15 random data points as circles, with x- and y-axes scaled to the data’s domain. When a user clicks the text header, new random data replaces the old, and the circles smoothly transition to their updated positions while the axes rescale accordingly. The code uses d3.svg.axis for the axes and d3.selectAll("circle").transition() to animate the updates, with scales from d3.scale.linear.

BBenHeubl
78% match
Loading thumbnail…

Animated Reusable D3 Scatter Plot

This animated scatter plot cycles through the numeric columns of the Iris dataset, updating the x-axis to display each variable while the y-axis remains fixed on the final column. Rendered as SVG, the visualization uses D3’s scaleLinear, axisBottom, axisLeft, and transition APIs to animate circle positions and axis titles every three seconds. The reusable scatterPlot component applies a staggered enter and update transition to the marks.

KKaustav Sen
76% match
Loading thumbnail…

[Ex.10] Animated Reusable D3 Scatter Plot with labels

This example presents an animated scatter plot of the Iris Dataset, cycling through different x-axis variables every three seconds. Built with D3 v6, it uses selection joins and transitions to smoothly update circle positions and axis scales. The reusable chart function accepts configurable accessors for data values, labels, and margins, with axis rendering via `axisLeft` and `axisBottom`.

AAndrea Mignone
75% match
Loading thumbnail…

Scatter Plot episode 12

This interactive scatter plot visualizes the Iris dataset, letting users switch the x and y axes via dropdown menus. D3 v6 selection joins animate circles with staggered delays as axes and point positions update. The chart uses d3.scaleLinear for quantitative columns, d3.scalePoint for categorical species, and transitions to smoothly grow and reposition SVG circles.

BBart van Pelt
75% match
Loading thumbnail…

D3Animated Reusable D3 Scatter Plot

A reusable D3 scatter plot animates the Iris dataset, cycling through four numeric columns as the x-axis variable every three seconds. Written with D3 v6, the chart uses a `scatterPlot` closure function with configurable accessors for width, height, data, margins, and radius. It renders SVG circles with `selection.join` for enter, update, and exit transitions, growing new points from radius zero and staggering updates with `transition.delay`. Axes update smoothly using `axisLeft`, `axisBottom`, `scaleLinear`, and `extent`. The data loads from a remote CSV, parsed with numeric coercion.

KKamalabot
75% match
Loading thumbnail…

Reusable D3 Scatter Plot

This example displays the Iris Dataset as an animated scatter plot, cycling through different dimension pairs (petal width, sepal width, and length) every two seconds. The visualization uses D3’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data points and render axes, while a reusable `scatterPlot` function updates circles and axes in place. Data is loaded via `d3.csv`, and the animation is driven by `setInterval`, with SVG rendering handled throughout.

MMichael Bergerson
75% match
Loading thumbnail…

scatter

This example presents an animated scatterplot comparing two datasets loaded from separate JavaScript files. Green and red circles represent positive and negative y-values, transitioning between the datasets every three seconds. Built with D3 v4, the visualization uses `d3.scaleLinear` for axes and `d3.transition` to animate circle positions and radii. An SVG line marks the zero baseline, with axis updates handled by `d3.axisTop` and `d3.axisLeft`.

EEranM6
75% match