Cleaned-up transcript of Rich Hickey's talk "Deconstructing the Database"

100%

Cleaned-up transcript of Rich Hickey's talk "Deconstructing the Database"

✓ Published0🌍 Public

Last edited Jan 11, 2023

Created on Jan 11, 2023

This example shows a cleaned-up transcript of Rich Hickey's talk, formatted as a single scrolling document. The React app renders the transcript text in a monospaced font, with speaker annotations and paragraph breaks preserved. It uses React's `useState` and `useEffect` hooks to handle text selection and scrolling, while the content itself is imported from a local Markdown file. The visualization highlights key phrases in bold and displays the source link, making the talk's structure and arguments easy to follow.

AI-generated description

Similar vizzes

Loading thumbnail…

Alex Ziskind long prompt July 2025.

This example presents a data-visualization of a massive, structured technical guide as a hierarchical, interactive diagram. It uses D3.js’s `d3.hierarchy` and `d3.tree` layout to render the document’s headings as a collapsible node graph, with each node connected by `d3.linkHorizontal` paths. The visualization displays the markdown content’s section titles and subsections, using `d3.zoom` for panning and scaling, and `d3.treemap` for the final layout. The underlying data is the raw Markdown text file, parsed and formatted to show the guide’s structural outline rather than its full textual content.

IIoTeacher

61% match

Loading thumbnail…

Gist 3e6254d26d7dbeebc0b0f0c822baee60

This React example presents a minimal typing-race interface, displaying a header and a text input field. The application records the user’s keystrokes into the component’s state, updating the displayed text in real time. It uses React’s `React.Component`, the `event.target.value` property for input handling, and logs the current state to the console. The example demonstrates a basic two-way binding between a controlled input and the component’s state, showing the typed text as the user types.

115Dkatz

60% match

Loading thumbnail…

Gist of a stolen gist

This example visualizes the structure of a “stolen gist” — a curated piracy resource list — as an interactive hierarchical map. It shows the document’s nested sections and subsections as collapsible, color-coded nodes, revealing the organization of topics like torrenting, Usenet, and streaming. Built with React, it uses a custom recursive rendering of the markdown headings, with d3.forceSimulation to position nodes and CSS transitions for expand/collapse animations, sourced directly from the raw gist file.

IIoTeacher

59% match

Loading thumbnail…

<title>Oral History Transcript

This visualization parses an oral history transcript encoded in TEI XML, displaying the dialogue between two speakers as a series of connected text blocks. It shows the conversational flow, with each speech act rendered as a separate node and the speaker identified by color-coded labels. The code uses D3.js’s `d3.forceSimulation` for layout and `d3.select` with data binding to manage the nodes and links, while the raw XML is loaded via `d3.xml` and traversed with DOM methods to extract speaker turns and text. The visualization highlights gaps in speech (e.g., `<gap n="00:00:28"/>`) by adding time-stamped ellipses, making the transcript’s pacing and pauses explicit.

CCliffordAnderson

59% match

Loading thumbnail…

Scrolling Sections

A narrated data-driven story scrolls through a talk transcript, using D3 v4's `scroller` pattern to bind text sections to a fixed visualization. The display animates filler-word counts and speech patterns from a TSV dataset, highlighting "um," "ah," and "uh" in sequence. As the user scrolls, `d3.select(window).on('scroll.scroller')` updates SVG elements, tracing the speaker's stumbles over time.

335degrees

58% match

Loading thumbnail…

Ep. 20 - Rendering Data with React

This example loads a dataset of CSS named colors from a GitHub Gist and renders each color as a horizontal stripe. A React app fetches the CSV data using the `d3.csv` utility, then maps over the rows to create a series of `div` elements, each with a background color from the `d3['RGB hex value']` field. The visualization shows the full spectrum of CSS color names, stacked to form a tall color swatch, with a simple loading state displayed before the data arrives. React state and hooks (`useState`, `useEffect`) manage the asynchronous data fetch and rendering.

YYee Han

58% match

Loading thumbnail…

Gist 3ea15e735c876056ba750785a7ef8362

This example presents a slide deck titled "DH-talk," formatted as a Google Slides presentation. It uses the reveal.js framework to render HTML-based slides, with content drawing from a Gist repository. The presentation focuses on digital humanities topics, and its visualizations are constructed through the `d3.js` library, including `d3.forceSimulation` for network layouts and `d3.geoPath` for geographical mapping. The code demonstrates how to embed interactive charts directly within the slide framework, merging narrative with data-driven graphics for an educational talk.

CCliffordAnderson

58% match

Loading thumbnail…

Redndering data with React

This example demonstrates how to render a dataset of CSS named colors as horizontal color swatches using React’s state management. The app loads CSV data from a GitHub gist via `d3.csv`, then uses React’s `useState` and `useEffect` hooks to fetch and store the data asynchronously. Once loaded, each row’s `Hex rgb` value is mapped to a div element with a corresponding background color, producing a stacked visual list. The interface also displays a “Loading...” message while the data is pending.

Ccynichole

58% match