Skip to main content
SimilarExport ZIP
100%

Datasaurus Dozen D3 Scatter Plot

✓ Published0🌍 Public
KKamalabot
Last edited Jul 11, 2022
Created on Jul 11, 2022

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.

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

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.

KKaustav Sen
96% 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
78% 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
77% match
Loading thumbnail…

D3: Scatterplot!

This interactive scatterplot displays 50 random data points on Cartesian axes, with each circle colored blue or red depending on whether its x-coordinate falls in the left or right half of the plot. Clicking the “Randomize” button generates a fresh dataset and smoothly animates the points, axes, and color updates over two seconds. The visualization is built with D3 3.5.5, using the `d3.scale.linear`, `d3.svg.axis`, and `transition().duration(2000)` APIs, and renders entirely as SVG. The code derives from Scott Murray’s examples, forked from earlier gists by anonymous and jalapic.

MMissHanJ
77% 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
77% 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
76% match
Loading thumbnail…

Fork of Animated Reusable D3 Scatter Plot Sandbox

This animated scatter plot cycles through different pairings of measurements from the Iris dataset every three seconds, morphing the positions of 150 circles as the axes rescale. Built with D3 v6, it uses `selection.join` with transitions to animate entering, updating, and exiting circles, while axes update via `axisLeft` and `axisBottom`. The reusable `scatterPlot` function configures scales with `scaleLinear` and `extent`, rendering SVG with a 1-second transition delay per point.

DDasbach.EJ
76% 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
76% match