DataBods examples

One demo per milestone. See DESIGN_PLAN.md for what each one should show.

• M0 · Smoke test: a WebGL2 canvas cleared to the theme background.
• M1 · Survey bods: 374 respondents flying between charts; colour, sort and hover.
• M2 · Chart grammar: sizing, bubbles ↔ bars, 100% bars, filters, multi-response clones, multiples, stats, glyphs.
• M3 · Story builder: every change is a recorded step; undo, jump back, add captions and slides, play it as a story. Play the sample story.
• M4 · Deep data: seven linked shop tables; people → baskets → purchases and back, nesting up to five levels, lazy loading, mark budget.
• M5 · Graphs: a website as a graph: links, visitor paths and the site tree as edges; gridify, circle, spiral, hex, concentric, tree, radial and force layouts in any order; bloom, bump, perturb, drag, murmuration.
• M6 · Time: a week of web server log: visitors move between pages as they browse, pages glow with recent traffic; play, scrub, speed. Also from CSV tables or from a .bods file (after npm run bods).
• M7 · Journeys: the visitors draw the map: links appear as people travel them and thicken into highways, pages grow and pulse as visitors land, comet trails; the site as designed beside the site as travelled.
• M8 · Segments & funnels: segment visitors by any visit or user variable (device, source, search keywords, subnet, country, plan, satisfaction…) and by journey length; a checkout funnel as a map, a chart of furthest steps and where drop-outs went; logged-in users' profiles joined to their visits.
• M8 · Coast walks: places with real positions: walkers checking in at stops along the Costa Brava, on a map; the same journeys, trails, links and click-a-stop views as for web pages.
• Log loader: open your own web server access log (and optionally a users table and IP ranges) from disk, with rules for which URL parameters make a page and which pages to merge or leave out; it opens in the journeys view. Files never leave the browser.
• M9 · Sales journeys: a shop's year of purchases: products customers buy one after another draw the links; who bought a product; customers moving between stores on a map.
• M9 · Answer map: survey answers as a map, linked where people giving one answer are more likely to give another; click an answer for the likelihoods of the rest.
• M12 · Maps: projections (Mercator, plate carrée, Equal Earth) with country outlines that morph with the bods; stores and coast walks over the coastline; a gallery's exhibits and visitors on its floor plan, an image. Also the gallery and the coast, and Bristol: a year of street crime, five years of road collisions and every food business with its hygiene rating, on streets and water from OpenStreetMap (run node tools/make-bristol-data.mjs first).
• M13 · Timetables: a day of public transport from open timetables (GTFS), every vehicle waiting at its stops and travelling on the timetable's times: Zürich, Geneva, Bristol, services from Heathrow, buses across Wales, Girona and the Costa Brava. Run npm run transit first (downloads the feeds); or import any GTFS feed with the importer.
• M14 · Tracks: movers along their own paths, from any table of positions over time (an id, a time, latitude/longitude or x/y, optionally altitude): flights over Europe (in 3D they climb and descend), visitors walking through a gallery's doorways, and timetabled buses following their routes' shapes (npm run transit -- costa-brava), and ships between the Baltic and the North Sea on a summer Saturday from AIS, by class (cruise ships, ferries, tankers, cargo…; node importers/ais/ais.mjs). The movement toolbar finds stop points, makes a grid of zones, and draws zones and gates on the map; visits and crossings then work like any journeys. Measures: speeds, slowdown and flows on the links, and places sized by who is there now. A security camera's frame and a tracker's output in its pixels, placed on the floor plan by four matched points ("Match points…" in the map toolbar).
• The tour: a narrated five-minute walk through everything, with music (read the script).
• Benchmark: synthetic bods (?rows=100000), frame and layout timings.

Open the app: data, settings and story panels in one place: open a demo or your own files (CSV tables, a SQL dump, a web log, .bods), explore, and record a story with text, timing, an audio track and choices for the viewer.