Skip to main content
SimilarExport ZIP
100%

HTML Starter

✓ Published0🌍 Public
MMila Frerichs
Last edited Dec 16, 2020
Created on Dec 8, 2020
Forked from 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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
78% match
Loading thumbnail…

HTML Starter

The visualization plots four individuals' ages against their heights as colored circles on a scatterplot with labeled axes. Each circle animates upward from the baseline to its final position using d3 transitions with staggered delays. Hovering over a point enlarges it and displays the person's name via a text element. D3 v5 scales, axes, and the Tableau10 color scheme manage the mapping, while the data is hardcoded in the chart script.

Ddanielstaal
78% 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
77% match
Loading thumbnail…

HTML Starter

This visualization generates 50 random data points and renders them as circles in a scatterplot using SVG. It demonstrates a minimal HTML setup with D3 v6 and React, showing how to create axes, scales, and dynamic circle sizing based on data values. The code uses d3-scaleLinear, d3-scaleSqrt, d3.axisBottom, and d3.axisLeft to map random coordinates and apply a square-root scale for circle radii. Styling is applied through a separate CSS file, and the example serves as a starting template for more complex visualizations.

SST-commits
76% match
Loading thumbnail…

HTML Starter

This example presents three animated circle charts, each with its own dataset and button. Clicking a button cycles through data values, causing the corresponding circle’s radius to transition smoothly while its numeric label updates. The visualization uses D3 v4 with `d3.select`, `d3.scaleLinear` for mapping data to radius and color, and `transition().attr` to animate changes. Each circle’s fill shifts along a gradient, and buttons trigger the updates through custom click handlers.

Ssgalhamdani
76% match
Loading thumbnail…

HTML Starter

This example presents three animated circle charts, each with its own dataset and button. Clicking a button cycles through data values, causing the corresponding circle’s radius to transition smoothly while its numeric label updates. The visualization uses D3 v4 with `d3.select`, `d3.scaleLinear` for mapping data to radius and color, and `transition().attr` to animate changes. Each circle’s fill shifts along a gradient, and buttons trigger the updates through custom click handlers.

Ssgalhamdani
76% match
Loading thumbnail…

HTML Starter

This example displays two animated line charts comparing "Away" and "Home" values across eight time points, with interactive hover effects that highlight lines and reveal individual data points. The visualization uses D3 v5 scales (d3.scaleLinear), axes, and line generators to render SVG paths, with circles marking each value. The code also incorporates React as the framework and includes smooth transitions and hover tooltips that display numeric values.

Rremyapk
75% match
Loading thumbnail…

HTML Starter

This example creates a static scatter plot of automotive data, charting horsepower against weight. The visualization uses D3 v6's scaleLinear, axisBottom, and axisLeft APIs to render axes and plot circles for each car model. Data is loaded remotely from a CSV file hosted on vizhub.com, with margins and dimensions calculated from the SVG element. The plot includes labeled axes, a titled heading, and red semi-transparent circles, all rendered as SVG.

Nnouralkhoury
73% match