Quote Atlas — What the Crowd Remembers

Build a MotherDuck Dive visualizing the most-loved book quotes located inside the actual book text (from Project Gutenberg). The data:

books — one row per book: Gutenberg id/title/author/urls/rank, Goodreads avg rating, ratings count, review count, the 1–5★ distribution (five columns), first-published year, page count, genres, plus per-book quote aggregates and a fame_share.
quotes — one row per Goodreads quote: book id, quote text, likes, tags, and where it sits in the book (pct_through 0–1, plus a context snippet with surrounding text). ~70% are located in-text; the rest are paraphrases or from different translations and carry a “not in this edition” flag.
characters — per-book character mention-density buckets (lanes) across the text.
Design philosophy: clean, serif (use Georgia — Dives can’t load web fonts), quiet/muted colors, no chart-junk. This must be interactive, non-dead-fish visual storytelling in the spirit of Bret Victor / LukeW / IDEO, not a dashboard of bar charts. Persist all view state (selected book, active movement) in the URL.

Build three linked “movements,” switchable via a centered toggle directly under the header rule:

The Library — all books as a sortable list. Each row carries a quote barcode: one tick per quote placed at its pct_through position, tick heat/opacity = likes. Each row also shows the five-bar ★ distribution (not a single star number) plus the avg rating. Hide zero-quote books. Header reads e.g. “10k quotes located across 161 books.”

The Spine — one book as a tall vertical text-axis. Quote ticks run down the spine (tick length ∝ √likes), beside character mention-density lanes. Put character names bold at the top of each lane, outside it, like runners at a starting line. Uniform quote-text size in the list (likes shown via tick length + ♥ count, not font size). Hovering any quote (in the list or on the spine) draws a clear near-black line across the spine and character lanes at that quote’s position. Quotes that can’t be placed appear under a proper subtitle: a 2px rule, a small-caps “NOT LOCATED IN THIS EDITION” label, and “N more loved lines couldn’t be placed” in large bold serif with a one-line explanation (translation mismatch).

The Crowd-Abridged Edition (the showpiece) — render the whole book as one column, but collapse unread stretches to markers like · · · 4,400 words · · · and render the loved lines large, font size weighted by likes. Show ~480 chars of context before / ~560 after each quote. The reader experiences 100k+ words compressed to the few dozen lines that survived the crowd. The bold quote span must begin and end exactly on the quote boundaries within its context.

Rendering details that matter: preserve paragraph/newline breaks in quote context (render with pre-line); strip Gutenberg artifacts (_italics_ markers, leaked chapter-number lists); ensure highlight boundaries match the quote text precisely.

Build it with custom HTML/CSS + scales (for positioning/sizing), not off-the-shelf chart components. Use useSQLQuery against the tables.