Dynamic Anscombe's Scatter Plot

100%

Dynamic Anscombe's Scatter Plot

✓ Published0🌍 Public

Last edited Feb 23, 2017

Created on Feb 20, 2017

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.

AI-generated description

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

88% match

Loading thumbnail…

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

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.

Aalansmithy

87% 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…

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

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

82% match

Loading thumbnail…

Dynamic Scatter plot

This dynamic scatter plot allows users to explore a dataset by selecting which columns to display on the x and y axes via dropdown menus. Each selection triggers a complete redraw of the chart, showing points with a fixed steelblue fill at a radius of five pixels. The visualization is built with D3.js version 7 and rendered as an SVG element within a plain HTML page. It loads data from a remote CSV file and uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.select to manage the interactive updates and axis rendering.

LLayaMyadam@my.unt.edu

78% match

Loading thumbnail…

D3 (v4) Robust, Responsive, Reusable Scatter Plot

This interactive scatter plot, built with D3 v4, displays multiple datasets selected through radio buttons. Upon hovering over a data point, a tooltip appears with its x and y coordinates, repositioning itself to stay within the chart's boundaries. The visualization uses SVG for rendering, jQuery's `ajax_json` helper for loading JSON data, and D3's `scaleLinear` for axes. The chart is responsive and includes custom functions for title wrapping, axis measurement, and interactive button controls.

SSumNeuron

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

77% match