wattenberger.com

What is Amelia Wattenberger?

Amelia Wattenberger is the personal website of Amelia Wattenberger, a designer and engineer who describes herself as creating things on the web, exploring novel interfaces, turning data into meaning, and empowering developers with AI. At the time captured, she was a Principal Research Engineer on a small R&D team at GitHub, working on novel user interfaces and machine learning.

The site works as a public notebook and portfolio rather than a conventional blog. Its main sections are:

• I'm thinking about... — short, open-ended ideas such as "Chat is AI's command line," "Our interfaces have lost their senses," and "Chatbots are not the future."
• Previous writings — practical technical articles, including "Combining React and D3," "What does 100% mean in CSS?," "Thinking in React Hooks," and "How to learn D3.js."
• What I'm currently noodling on — experiments and side projects spanning AI writing and brainstorming tools, infinite canvases, data visualization, SVG education, generative fonts, laser-cut art, and a house-hunting dashboard.
• What I've been building at work — work projects, including Code Atlas, aimed at making LLM responses more robust and easier to understand.

If you are deciding whether to spend time here, use it as a source of ideas rather than a reference manual. A front-end developer who wants to move between React and data visualization will get the most from the older technical writing; a designer or researcher thinking about how AI should be embedded in interfaces will find the "thinking about" list and project notes more useful. The site is explicitly labeled work in progress, with a link to an older version, so some sections may be incomplete or in flux.

A useful next step: pick one thread that matches your work — for example, infinite canvases or AI writing tools — and read the related project notes alongside the earlier technical articles to see how her design thinking connects to implementation.

What can I learn from Amelia Wattenberger's D3.js and data visualization tutorials?

Amelia Wattenberger's site is a working notebook as much as a portfolio: her D3.js and data visualization material sits alongside interface experiments, so you learn technique and design judgment at the same time. The most useful lens is to treat her writing as a set of recurring problems — scales, force layouts, SVG structure, codebase visualization — rather than a linear course.

What her data visualization work covers

From the page, her writing spans D3 fundamentals ("How to learn D3.js", "Interactive Charts with D3.js", "Combining React and D3", "Use the d3 force"), CSS and SVG mechanics that charts depend on ("The CSS Cascade", "What does 100% mean in CSS?", "Scaling SVG Elements", "How to create a Gauge component in React.js"), and applied projects (visualizing codebase changes over time, visualizing time as a spiral, visualizing Stephen King books, a house-hunting dashboard, exploring how JavaScript tools are used together). She also built a fullstack D3 and data visualization book and course, and runs workshops on data visualization with Svelte.

Two threads are worth noticing. First, performance and simulation: the spiral force-simulation piece is about making physics-based layouts faster, which matters once a chart has hundreds of nodes. Second, React integration: combining React with D3 is a common friction point, and her treatment focuses on where each library should own the DOM.

How to use it

• If you are new to D3, start with the learning-oriented pieces ("How to learn D3.js", "Interactive Charts with D3.js") to build a mental model of selections, scales and data joins before touching a framework.
• If you already ship charts, go to the React+D3 and force-simulation writing, then the applied projects to see how a chart becomes a product.
• If your interest is design rather than code, the SVG, CSS cascade and gauge pieces explain why charts break visually — a frequent cause of "the numbers are right but it looks wrong."

A comparison to keep in mind

A concrete scenario: you have a React dashboard with a network graph that stutters past a few hundred nodes. Read the React+D3 piece for structure, then the force-simulation performance writing for the optimization, and check the codebase-visualization project for how she handles scale in practice. For broader D3 reference and community examples, the official documentation at D3.js and the gallery at Observable are the natural companions; for the React side, React covers the rendering model her integration advice assumes.

Next step: pick one of her applied projects closest to your own data, and try to rebuild a small version of it before reading her explanation — the gap between your attempt and hers is where the learning is.

How can I use Amelia Wattenberger's AI writing tools to improve my writing?

Amelia Wattenberger's site is primarily a personal notebook of ideas and prototypes, not a polished writing-product suite. The page lists AI writing experiments among her current projects, but it does not present them as finished tools with published workflows, pricing or availability details. So the honest answer is: you can borrow her thinking about AI-assisted writing, and you may be able to try prototypes she links to, but you should not expect a ready-made writing app with documented features.

What the site actually shows

• Two related AI writing projects are described: one as "an AI writing tool that helps you improve," and a precursor described as helping you "sculpt ideas like clay."
• A related project, described as "a brainstorming tool for organizing your thoughts," sits in the same cluster of AI experiments.
• Her broader writing on interfaces — including the idea that "chat is AI's command line" and that chatbots are not the future — frames how she thinks these tools should work: less blank chat box, more structured, visual space for thinking.

How to use that in practice

Take the "sculpt ideas like clay" framing seriously. Instead of asking an AI to rewrite a finished draft, use it earlier: dump rough fragments, then ask it to cluster them, name each cluster, and show which claims lack support. That turns the tool into a thinking aid rather than a prose generator, which matches the intent behind her projects.

A concrete loop for a work memo or essay:

1. Write your messy notes without editing.
2. Ask the AI to group them by theme and label the groups.
3. Ask which points contradict each other or rest on assumptions.
4. Rewrite only the weakest section yourself, then ask for a critique, not a rewrite.

Who benefits, and the trade-off

This approach suits writers who already have raw material and want help seeing its structure — researchers, engineers, analysts. It suits people poorly if you want one-click polished paragraphs; the site offers no evidence of that, and her own commentary is skeptical of plain chat interfaces as the end state.

If you want to see how she approaches these problems directly, start at Amelia Wattenberger and look at the current-projects list. For adjacent, more established writing tools, compare with Notion or Obsidian if you prefer structured notes over chat.

What novel interface ideas and projects is Amelia Wattenberger exploring?

Amelia Wattenberger's current work centers on novel interfaces, AI as a thinking tool, and data visualization. Her site lists what she's "thinking about" and "currently noodling on," which is the clearest map of her interests.

Recurring themes

• Chat as a command line / chatbots are not the future — she treats conversational AI as one interface among many, not the endpoint.
• Interfaces that have "lost their senses" and fisheye for text — ideas about making text and information navigable rather than flat.
• Infinite canvases — an "ode to infinite canvases" and how to improve them, plus "evolving the infinite canvas."
• LLMs as a tool for thought, "the internet for the mind," and "putting knowledge in its place."
• Bridging the hard and the soft, and getting creative with embeddings.

Projects she describes as in progress

• AI brainstorming tool for organizing thoughts.
• AI writing tools — one that helps you improve writing, and a precursor that helps "sculpt ideas like clay."
• Moodboarding with Stable Diffusion, and generating a font with text-to-image models.
• Visualizing codebase changes over time, plus Code Atlas at work (making LLM responses more robust and easier to understand).
• Data-viz experiments: time as a spiral, Stephen King books, the state of APIs, house-hunting dashboards, and combining text-to-image with data visualization.
• Craft/JS side projects: laser-cut kumiko patterns, wall art larger than her laser bed, generative 3D in the browser, and Svelte recipes/workshops.

If you want to follow the thread, start with her "I'm thinking about..." list and the "noodling on" entries, then read the linked write-ups. A practical criterion: her work is most useful if you care about how an interface shapes thinking — not just what a model can output. For adjacent context on interface and data-viz thinking, see Observable and D3.

How does Amelia Wattenberger combine AI with data visualization?

Amelia Wattenberger treats AI as a design material for interfaces, not just a backend feature, and pairs it with data visualization in several distinct ways. Her site lists both as active threads: "AI" projects such as brainstorming and writing tools sit alongside "data viz" experiments like visualizing codebase changes, time as a spiral, and the state of APIs. The combination shows up most clearly in two patterns.

AI as the thing being visualized or explained

Several projects use visualization to make machine-learning output legible: combining text-to-image with data visualization, generating a font with text-to-image models, and moodboarding with Stable Diffusion. Her work on Code Atlas at GitHub — making LLM responses more robust and easier to understand — is the same instinct applied to developer tooling: the model's output needs structure a person can inspect.

Visualization as the interface for thinking

Her current themes — "Chat is AI's command line," "LLMs as a tool for thought," "Evolving the infinite canvas," "Getting creative with embeddings" — point to interfaces where a spatial, visual surface replaces the chat box. A brainstorming tool for organizing thoughts and an AI writing tool that "sculpts ideas like clay" are concrete attempts.

If you are building something similar, start with the second row: pick a dataset you already understand and use a model to propose views or annotations, then check whether the visualization still makes sense without the AI. Wattenberger's own writing on D3, React and SVG is a practical foundation for that — see Amelia Wattenberger for the project list and Observable for notebook-style prototyping.

What insights does Amelia Wattenberger share about working at GitHub?

Amelia Wattenberger describes her GitHub role as a Principal Research Engineer on a small R&D team, where she explores novel user interfaces and experiments with machine learning. Her site frames that work around two recurring themes: making LLM responses more robust and easier to understand (a project called Code Atlas), and treating chat as just one interface among many rather than the endpoint.

For someone weighing a similar research-engineering path, the useful signal is the shape of the work: small team, interface experimentation, and AI as a design material rather than a product feature. Her listed "thinking about" topics — chat as AI's command line, interfaces losing their senses, LLMs as tools for thought — suggest the job rewards questioning default patterns and prototyping alternatives.

A practical next step: read her writing on novel interfaces and data visualization alongside the Code Atlas notes, then ask whether your own team gives you room to prototype interfaces that challenge the chatbox default. If the answer is no, that gap matters more than the title.