Skip to main content
100%

Anscombe's Quartet with simple-statistics and d3js v4 -

✓ Published0🌍 Public
Aalansmithy
Last edited May 14, 2017
Created on May 14, 2017

Anscombe's Quartet is visualized as four separate scatterplots, each displaying a series of 11 data points loaded from a CSV file. The charts share identical axes, scales, and styling—pink circles on a cream background—and each is labeled Series 1 through 4. Using the simple-statistics library, the same summary statistics (mean, sample variance, and correlation coefficient) are calculated for every series and printed beneath each plot, showing nearly identical values. The d3.js v4 code also fits and draws a light-blue regression line per plot, emphasizing how the four datasets, though statistically similar, have very different graphical structures. The example is implemented entirely in SVG, with no animation, and demonstrates the importance of visualizing data before relying on descriptive statistics.

AI-generated description

Anscombe's Quartet

I use Frank Anscombe's quartet alot when teaching data visualisation courses: Despite the arrival of the brilliant Datasaurus Dozen, it's still a powerful illustration of the drawback of relying solely on basic descriptive statistics to summarise data. The data in all 4 of the graphs in the quartet are virtually indentical when using standard descriptive methods - the graphs reveal the truth. Looking at your data before analysing it is something that Anscombe was passionate about:

"Most kinds of statistical calculation rest on assumptions about the behaviour of the data. Those assumptions may be false, and then the calculations may be misleading. We ought always to try to check whether the assumptions are reasonably correct; and if they are wrong we ought to be able to perceive in what ways they are wrong. Graphs are very valuable for these purposes."

Frank Anscombe, Graphs in Statistical Analysis (1973)

I became increasingly embarassed that I kept using screengrabs from Wikipedia in my course slides, so I decided to create my own version using d3js and simple-statistics, now updated to use d3js v4 and simple-statistics v4.1.

mit Licensed

Similar vizzes

Loading thumbnail…

Quartet Scatter Plot

This visualization displays a subset of Anscombe’s Quartet, specifically dataset II, highlighting how a scatter plot can appear identical to others despite differing underlying data. Built with D3 v4, it uses SVG rendering and a sequential color scale to map x-values, with circle and text labels appearing on hover, and an elastic animation effect triggers on mouse interactions. The data is loaded from a local TSV file.

AAbin
87% match
Loading thumbnail…

Dynamic Anscombe's Scatter Plot

This interactive scatter plot demonstrates Anscombe's quartet, showing how four distinct datasets can share nearly identical statistical properties. Users click buttons to switch between groups, and the points animate smoothly to new positions using D3 transitions with staggered delays. Each point is colored via a sequential rainbow scale and reveals its coordinates on hover with elastic scaling effects. The visualization uses D3 v4 with SVG rendering, including axes with gridlines, and loads data from a TSV file.

AAbin
87% match
Loading thumbnail…

anscombe

This example displays the Anscombe’s quartet dataset as a simple scatter plot of x and y coordinates. It uses the D3.js v4 library to read the CSV file, scale the data to fit a 700×700 pixel SVG canvas, and render each data point as a steel-blue circle with a red stroke. The code defines linear scales for both axes and maps the y-values to an inverted range so that larger y-values appear higher on the screen.

KK-Du
85% match
Loading thumbnail…

HTML Starter

Anscombe's Quartet demonstrates how four datasets with identical statistical summaries produce drastically different scatterplots. The visualization animates between quartet members using Svelte's tweened motion store, smoothly interpolating point positions with a cubicOut easing. D3's scaleLinear maps the data coordinates to the responsive SVG viewport. The chart includes radio buttons to manually select a quartet member, and each point renders as an orange semi-transparent SVG circle with dashed axis tick marks.

MMila Frerichs
85% match
Loading thumbnail…

Cuarteto de Anscombe

This interactive visualization presents Anscombe’s Quartet, four datasets with nearly identical summary statistics but strikingly different scatterplots. Buttons labeled I–IV switch between the datasets, animating the points to their new positions via D3 transitions. The visualization uses d3.scaleLinear for axes, SVG lines for gridlines, and SVG circles with red strokes and orange fills for data points. A table displays the shared mean, variance, correlation, and regression line, while a link references the Spanish Wikipedia for more information.

Aaaizemberg
84% match
Loading thumbnail…

Basic starter code for many simple D3 charts, v4

A scatterplot displays Anscombe’s Quartet, with points labeled by their x- and y-coordinates and grouped by quartile. The chart uses D3 v4’s `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisRight`, with axes positioned on the right and bottom of an SVG canvas. Data loads from a tab-separated file via `d3.tsv`, and the x- and y-domain extents are updated based on the loaded values. Each point is drawn as a `circle` with a sibling `text` label, both grouped in a transformed `<g>` element.

LLucyI
82% match
Loading thumbnail…

Anscombe Vega-Lite API

This visualization displays Anscombe's quartet, a set of four datasets with identical statistical properties but distinct visual patterns, rendered as a faceted scatter plot. Circles encode the x and y coordinates, with color distinguishing the four groups. Built using the Vega-Lite API, the example dynamically loads data from a CSV file hosted on Gist, which is sourced from the UCI Machine Learning Repository's Auto MPG dataset. The code creates the visualization in JavaScript using the vega-lite-api library, which is configured with a custom color scheme and font sizes for improved readability, and renders the final chart to SVG.

Rrvdv
79% match
Loading thumbnail…

el cuarteto de Anscombe

This example visualizes Anscombe’s quartet, four datasets with nearly identical summary statistics but strikingly different scatterplot shapes. Using R’s base graphics, it creates a 2-by-2 panel of plots, each displaying one (x, y) pair from the `anscombe` data frame. The code sets shared x- and y-axis limits across all panels to emphasize the differences in data structure, and overlays a linear regression line via `abline(lm(y~x))` for each subset. The visualization highlights the importance of graphing data rather than relying solely on numerical summaries.

Aaaizemberg
78% match