An interactive, single-page timeline from Data 4 The People that traces how Americans lost a shared set of facts, from the penny press to AI-generated news, and shows the path we’re building to earn that trust back.
It was built as the visual backbone of a short presentation on our vision, work, and goals. It also works on its own as a shareable web page.
The page makes one argument, in order:
It ends with two links: our current site and our labs site, where we demo what’s next.
The timeline is a single path. The current step always sits in the center of the screen, and the camera pans to each new step.
| # | Step | Era |
|---|---|---|
| 0 | Title: Who do you trust for the news? | |
| 1 | The printed page | 1830s onward |
| 2 | News at the speed of sound (radio) | 1920 onward |
| 3 | Television took over | 1950s–1980s |
| 4 | The internet changes everything | 1990s |
| 5 | Anyone can publish anything (blogs) | Late 1990s–2000s |
| 6 | Social media boom | 2004 onward |
| 7 | Reach becomes the business model (influencers) | 2008 onward |
| 8 | The newsroom gets squeezed | 2005–today |
| 9 | Is anyone even there? (AI) | 2023 onward |
| 10 | Where we are now | Today |
| 11 | A fix for the AI age | Data 4 The People |
| 12 | Empower citizen data journalists | The tools |
| 13 | Mentors check the work | The standard |
| 14 | A network of curious creators | The community |
| 15 | Logo and links to our sites |
Every factual claim is sourced, as you’d expect from a data journalism organization.
Statistics reflect the sources as of September 2026. The Reuters Institute figures are global (48 markets), not U.S.-only; the cards say “worldwide” where that applies.
| Action | Keys and gestures |
|---|---|
| Next step | → ↓ Space, Page Down, Enter, scroll down, swipe up, or Next |
| Previous step | ← ↑ Page Up, scroll up, swipe down, or Back |
| First or last step | Home or End |
| Jump to a past step | Click its circle |
| Open a specific step | Add # and the step number to the address, e.g. index.html#9 |
Most presentation clickers send arrow or Page Down keys, so they work out of the box. Test yours before presenting.
?motion=off to the address, e.g. index.html?motion=off.The timeline takes about 3.5–4 minutes at roughly 15 seconds per step. This is meant as a short intro before the live demos of the two sites linked on the final step. If you run long, the easiest cuts are to merge the blogs and social media steps, or the tools and mentors steps.
The whole visualization is one self-contained file, output/index_final.html; rename it index.html when deploying. The code, styling and logo are all inside it, and there is no build step and no server code.
output/index_final.html in any modern browser.index.html, at the top level of the repository (or in /docs).https://<user-or-org>.github.io/<repo>/, usually within a minute or two.GitHub Pages is free for public repositories; private repositories need a paid plan. After an update, force-refresh (Ctrl+Shift+R, or Cmd+Shift+R on a Mac) if you don’t see the change.
External requests: the page loads the fonts Newsreader and Public Sans from Google Fonts, with fallbacks if they’re unavailable. Everything else is built into the file.
talk/index.html is a presenter’s scene for live talks. It opens with an analogy, hands off to the timeline, and comes back for the close.
Each person is a house on stilts in open water. The house is their sense of what is real, and the water is the noise. Houses built on rotting wood fall as the storm grows, new wood wears down, and steel rusts but stands. Half of the 40 houses are rotten and fall. Each one shakes, a stilt snaps, the house drops and tips over, the roof tears off, and it hits the water with a splash and a spreading ring of foam. When a house near the front falls, the screen shakes. After the timeline, the survivors are reinforced and the fallen houses are rebuilt on steel.
Address: https://data4thepeople.github.io/funding_visualizations/talk/
| Stage | What happens |
|---|---|
| 0 | Dark screen |
| 1 | Calm water, about 40 houses |
| 2 | The noise picks up: wind, rain, choppy water |
| 3 | Storm: the first rotten houses fall |
| 4 | Surge: the water rises, most rotten houses fall (the large one in front falls about 10 seconds in), new wood wears, steel rusts |
| 5 | Aftermath: the last rotten houses fall |
Timeline (output/index_final.html) runs in a frame. Next on its last step returns to the scene. Back on its first step returns to stage 5. |
|
| 6 | The storm eases toward dawn |
| 7 | Survivors are reinforced, with welding sparks at each step: bright steel sleeves climb every stilt, two new piles drive down from the deck, cross braces are welded in, and a shine runs up the finished steel. The three front houses go first. |
| 8 | Fallen houses are rebuilt on steel over 12 seconds each: a dashed outline of the new house appears, steel stilts rise from the water and new piles drive down, braces are welded in, the deck slides in, the walls rise with sparks along the top edge, the roof drops into place, and the lights come on with a glow. The big front house goes first. |
| 9 | The noise returns, and every house holds |
| 10 | Calm returns, and a card shows the logo with links to data4thepeople.com and labs.data4thepeople.com (they open in new tabs) |
Collapses and repairs play out over 20 to 30 seconds inside a stage, so the scene keeps moving while you talk. Clicking ahead early makes any pending collapses happen within a few seconds.
Controls: → ↓ Space, Page Down, Enter, or click for next; ← ↑ Page Up for back; F full screen; M sound; B or . black screen; R start over; H help. Clickers that send arrow or Page Down keys work throughout, including inside the timeline.
Rehearsing: add #rebuild to the address to start at the aftermath, as if the timeline is done. Add ?speed=4 to run the scene four times faster.
Sound is made in the browser, so there are no audio files. It starts after the first click or key press.
Offline: serve the repository (python3 -m http.server 8741) and open http://localhost:8741/talk/. Opened straight from disk, the scene still runs, but the clicker cannot hand back from the timeline, so use the Back to the houses button in the lower left instead.
talk/image-prompt.md has an optional AI image prompt for a realistic title still.
The output/checks/ folder holds three small test pages. They load index_final.html in a frame, step through it, and measure where the card, the icon, and the buttons land. They are development tools only; the visualization does not need them to run or deploy.
check.html measures the desktop and landscape layouts. For each step it reports the gap between the card and the icon, whether the pulse ring stays clear of the card, and whether the card is fully on screen. Add ?w=740&h=360 to the address to test an exact size.check_narrow.html measures the portrait phone layout (the bottom-sheet card). It reports whether the title screen fits, whether the sheet covers the active icon or the buttons, and which cards scroll inside the sheet. It defaults to 360x740; use ?w=390&h=844 for another size.shot.html shows one step at an exact size, for screenshots: shot.html?w=360&h=740&s=7.Browsers block these measurements on pages opened straight from disk, so serve the repository first:
python -m http.server 8741
Then open, for example, http://localhost:8741/output/checks/check.html. Each check page prints one line starting with RESULTS= when it finishes, with one JSON entry per step. The same pages also run headless:
chrome --headless=new --virtual-time-budget=30000 --window-size=1920,1080 --dump-dom http://localhost:8741/output/checks/check.html | grep RESULTS=
The check pages copy a few layout constants from the main file (the 820px width switch, the scale steps, the 80px pulse-ring radius) and point at ../index_final.html. If those constants change, or the file is renamed, update the check pages to match.
All text lives in the <script> near the bottom of index.html.
S is the source list. Each entry has a label t and a URL u; an empty URL shows the label without a link.N is the list of steps. Each step can have:
era, title and body: the card texttake: an “Our read” interpretation, shown separately from factsstat: one figure, or a list of two, each with num, lab and a short srcsrc: the list of sources from S shown at the bottom of the cardcred: a 0–1 value that sets the line color and the meter positionx, y: the step’s position on the map; side sets which side of the circle the card appears onS, so adding a source there adds it everywhere.Keep facts in body and stat, each backed by an entry in src. Keep argument in take.
Created by Data 4 The People. Logo © Data 4 The People. Cited statistics belong to their respective sources.