http://simonwillison.net/2026-03-26T16:21:09+00:00Simon Willison2026-03-26T16:21:09+00:002026-03-26T16:21:09+00:00https://simonwillison.net/2026/Mar/26/quantization-from-the-ground-up/#atom-tag

<p><strong><a href="https://ngrok.com/blog/quantization">Quantization from the ground up</a></strong></p> Sam Rose continues <a href="https://simonwillison.net/tags/sam-rose/">his streak</a> of publishing spectacularly informative interactive essays, this time explaining how quantization of Large Language Models works (which he says might be "<a href="https://twitter.com/samwhoo/status/2036845101561835968">the best post I've ever made</a>".)</p> <p>Also included is the best visual explanation I've ever seen of how floating point numbers are represented using binary digits.</p> <p><img alt="Screenshot of an interactive float32 binary representation tool showing the value -48.92364502, with color-coded bit fields labeled S (sign), EXPONENT (blue), and SIGNIFICAND (pink), displaying the 32-bit pattern 11000010010000111101100001110100000, and a slider control at the bottom along with minus, plus, and reset buttons." src="https://static.simonwillison.net/static/2026/float.jpg" /></p> <p>I hadn't heard about <strong>outlier values</strong> in quantization - rare float values that exist outside of the normal tiny-value distribution - but apparently they're very important:</p> <blockquote> <p>Why do these outliers exist? [...] tl;dr: no one conclusively knows, but a small fraction of these outliers are <em>very</em> important to model quality. Removing even a <em>single</em> "super weight," as Apple calls them, can cause the model to output complete gibberish.</p> <p>Given their importance, real-world quantization schemes sometimes do extra work to preserve these outliers. They might do this by not quantizing them at all, or by saving their location and value into a separate table, then removing them so that their block isn't destroyed.</p> </blockquote> <p>Plus there's a section on <a href="https://ngrok.com/blog/quantization#how-much-does-quantization-affect-model-accuracy">How much does quantization affect model accuracy?</a>. Sam explains the concepts of <strong>perplexity</strong> and ** KL divergence ** and then uses the <a href="https://github.com/ggml-org/llama.cpp/tree/master/tools/perplexity">llama.cpp perplexity tool</a> and a run of the GPQA benchmark to show how different quantization levels affect Qwen 3.5 9B.</p> <p>His conclusion:</p> <blockquote> <p>It looks like 16-bit to 8-bit carries almost no quality penalty. 16-bit to 4-bit is more noticeable, but it's certainly not a quarter as good as the original. Closer to 90%, depending on how you want to measure it.</p> </blockquote> <p>Tags: <a href="https://simonwillison.net/tags/computer-science">computer-science</a>, <a href="https://simonwillison.net/tags/ai">ai</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a>, <a href="https://simonwillison.net/tags/generative-ai">generative-ai</a>, <a href="https://simonwillison.net/tags/llms">llms</a>, <a href="https://simonwillison.net/tags/sam-rose">sam-rose</a>, <a href="https://simonwillison.net/tags/qwen">qwen</a></p>

2026-03-11T22:58:06+00:002026-03-11T22:58:06+00:00https://simonwillison.net/2026/Mar/11/sorting-algorithms/#atom-tag

<p><strong><a href="https://tools.simonwillison.net/sort-algorithms">Sorting algorithms</a></strong></p> Today in animated explanations built using Claude: I've always been a fan of animated demonstrations of sorting algorithms so I decided to spin some up on my phone using Claude Artifacts, then added Python's timsort algorithm, then a feature to run them all at once. Here's the <a href="https://claude.ai/share/2c09f6f7-57ed-47eb-af2e-fc39ddc4c39f">full sequence of prompts</a>:</p> <blockquote> <p>Interactive animated demos of the most common sorting algorithms</p> </blockquote> <p>This gave me bubble sort, selection sort, insertion sort, merge sort, quick sort, and heap sort.</p> <blockquote> <p>Add timsort, look up details in a clone of python/cpython from GitHub</p> </blockquote> <p>Let's add Python's <a href="https://en.wikipedia.org/wiki/Timsort">Timsort</a>! Regular Claude chat can clone repos from GitHub these days. In the transcript you can see it clone the repo and then consult <a href="https://github.com/python/cpython/blob/d19de375a204c74ab5f3a28ec42335bae139033d/Objects/listsort.txt">Objects/listsort.txt</a> and <a href="https://github.com/python/cpython/blob/d19de375a204c74ab5f3a28ec42335bae139033d/Objects/listobject.c">Objects/listobject.c</a>. (I should note that when I asked GPT-5.4 Thinking to review Claude's implementation <a href="https://chatgpt.com/share/69b1fc93-f360-8006-b8b7-22c3da639367">it picked holes in it</a> and said the code "is a simplified, Timsort-inspired adaptive mergesort".)</p> <blockquote> <p>I don't like the dark color scheme on the buttons, do better</p> <p>Also add a "run all" button which shows smaller animated charts for every algorithm at once in a grid and runs them all at the same time</p> </blockquote> <p>It came up with a color scheme I liked better, "do better" is a fun prompt, and now the "Run all" button produces this effect:</p> <p><img alt="Animated sorting algorithm race visualization titled &quot;All algorithms racing&quot; with controls for SIZE (50) and SPEED (100), Stop and Shuffle buttons, and a &quot;Back to single&quot; button. A legend shows Comparing (pink), Swapping (orange), Pivot (red), and Sorted (purple) indicators. Seven algorithms race simultaneously in card panels: Bubble sort (Sorting… — Comparisons: 312, Swaps: 250), Selection sort (Sorting… — Comparisons: 550, Swaps: 12), Insertion sort (Sorting… — Comparisons: 295, Swaps: 266), Merge sort (#3 — Comparisons: 225, Swaps: 225), Quick sort (#2 — Comparisons: 212, Swaps: 103), Heap sort (Sorting… — Comparisons: 358, Swaps: 203), and Timsort (#1 — Comparisons: 215, Swaps: 332). Finished algorithms (Timsort, Quick sort, Merge sort) display fully sorted purple bar charts and are highlighted with purple borders." src="https://static.simonwillison.net/static/2026/sorts-32-colors-lossy.gif" /> <p>Tags: <a href="https://simonwillison.net/tags/algorithms">algorithms</a>, <a href="https://simonwillison.net/tags/computer-science">computer-science</a>, <a href="https://simonwillison.net/tags/javascript">javascript</a>, <a href="https://simonwillison.net/tags/sorting">sorting</a>, <a href="https://simonwillison.net/tags/ai">ai</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a>, <a href="https://simonwillison.net/tags/generative-ai">generative-ai</a>, <a href="https://simonwillison.net/tags/llms">llms</a>, <a href="https://simonwillison.net/tags/claude">claude</a>, <a href="https://simonwillison.net/tags/vibe-coding">vibe-coding</a></p>

2026-02-28T23:09:39+00:002026-02-28T23:09:39+00:00https://simonwillison.net/guides/agentic-engineering-patterns/interactive-explanations/#atom-tag

<p><em><a href="https://simonwillison.net/guides/agentic-engineering-patterns/">Agentic Engineering Patterns</a> &gt;</em></p> <p>When we lose track of how code written by our agents works we take on <strong>cognitive debt</strong>.</p> <p>For a lot of things this doesn't matter: if the code fetches some data from a database and outputs it as JSON the implementation details are likely simple enough that we don't need to care. We can try out the new feature and make a very solid guess at how it works, then glance over the code to be sure.</p> <p>Often though the details really do matter. If the core of our application becomes a black box that we don't fully understand we can no longer confidently reason about it, which makes planning new features harder and eventually slows our progress in the same way that accumulated technical debt does.</p> <p>How do we pay down cognitive debt? By improving our understanding of how the code works.</p> <p>One of my favorite ways to do that is by building <strong>interactive explanations</strong>.</p> <h2 id="understanding-word-clouds">Understanding word clouds</h2> <p>In <a href="https://minimaxir.com/2026/02/ai-agent-coding/">An AI agent coding skeptic tries AI agent coding, in excessive detail</a> Max Woolf mentioned testing LLMs' Rust abilities with the prompt <code>Create a Rust app that can create "word cloud" data visualizations given a long input text</code>.</p> <p>This captured my imagination: I've always wanted to know how word clouds work, so I fired off an <a href="https://simonwillison.net/2025/Nov/6/async-code-research/">asynchronous research project</a> - <a href="https://github.com/simonw/research/pull/91#issue-4002426963">initial prompt here</a>, <a href="https://github.com/simonw/research/tree/main/rust-wordcloud">code and report here</a> - to explore the idea.</p> <p>This worked really well: Claude Code for web built me a Rust CLI tool that could produce images like this one:</p> <p><img alt="A word cloud, many words, different colors and sizes, larger words in the middle." src="https://raw.githubusercontent.com/simonw/research/refs/heads/main/rust-wordcloud/wordcloud.png" /></p> <p>But how does it actually work?</p> <p>Claude's report said it uses "<strong>Archimedean spiral placement</strong> with per-word random angular offset for natural-looking layouts". This did not help me much!</p> <p>I requested a <a href="https://simonwillison.net/guides/agentic-engineering-patterns/linear-walkthroughs/">linear walkthrough</a> of the codebase which helped me understand the Rust code in more detail - here's <a href="https://github.com/simonw/research/blob/main/rust-wordcloud/walkthrough.md">that walkthrough</a> (and <a href="https://github.com/simonw/research/commit/2cb8c62477173ef6a4c2e274be9f712734df6126">the prompt</a>). This helped me understand the structure of the Rust code but I still didn't have an intuitive understanding of how that "Archimedean spiral placement" part actually worked.</p> <p>So I asked for an <strong>animated explanation</strong>. I did this by pasting a link to that existing <code>walkthrough.md</code> document into a Claude Code session along with the following:</p> <p><div><markdown-copy><textarea>Fetch https://raw.githubusercontent.com/simonw/research/refs/heads/main/rust-wordcloud/walkthrough.md to /tmp using curl so you can read the whole thing Inspired by that, build animated-word-cloud.html - a page that accepts pasted text (which it persists in the `#fragment` of the URL such that a page loaded with that `#` populated will use that text as input and auto-submit it) such that when you submit the text it builds a word cloud using the algorithm described in that document but does it animated, to make the algorithm as clear to understand. Include a slider for the animation which can be paused and the speed adjusted or even stepped through frame by frame while paused. At any stage the visible in-progress word cloud can be downloaded as a PNG.</textarea></markdown-copy></div> You can <a href="https://tools.simonwillison.net/animated-word-cloud">play with the result here</a>. Here's an animated GIF demo:</p> <p><img alt="Words appear on the word cloud one at a time, with little boxes showing where the algorithm is attempting to place them - if those boxes overlap an existing word it tries again." src="https://static.simonwillison.net/static/2026/animated-word-cloud-demo.gif" /></p> <p>This was using Claude Opus 4.6, which turns out to have quite good taste when it comes to building explanatory animations.</p> <p>If you watch the animation closely you can see that for each word it attempts to place it somewhere on the page by showing a box, run checks if that box intersects an existing word. If so it continues to try to find a good spot, moving outward in a spiral from the center.</p> <p>I found that this animation really helped make the way the algorithm worked click for me.</p> <p>I have long been a fan of animations and interactive interfaces to help explain different concepts. A good coding agent can produce these on demand to help explain code - its own code or code written by others.</p> <p>Tags: <a href="https://simonwillison.net/tags/ai">ai</a>, <a href="https://simonwillison.net/tags/llms">llms</a>, <a href="https://simonwillison.net/tags/coding-agents">coding-agents</a>, <a href="https://simonwillison.net/tags/ai-assisted-programming">ai-assisted-programming</a>, <a href="https://simonwillison.net/tags/cognitive-debt">cognitive-debt</a>, <a href="https://simonwillison.net/tags/generative-ai">generative-ai</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a>, <a href="https://simonwillison.net/tags/agentic-engineering">agentic-engineering</a></p>

2025-12-19T18:33:41+00:002025-12-19T18:33:41+00:00https://simonwillison.net/2025/Dec/19/sam-rose-llms/#atom-tag

<p><strong><a href="https://ngrok.com/blog/prompt-caching/">Sam Rose explains how LLMs work with a visual essay</a></strong></p> Sam Rose is one of my favorite authors of <a href="https://simonwillison.net/tags/explorables/">explorable interactive explanations</a> - here's <a href="https://samwho.dev/">his previous collection</a>.</p> <p>Sam joined ngrok in September as a developer educator. Here's his first big visual explainer for them, ostensibly about how prompt caching works but it quickly expands to cover tokenization, embeddings, and the basics of the transformer architecture.</p> <p>The result is one of the clearest and most accessible introductions to LLM internals I've seen anywhere.</p> <div style="text-align: center"><img alt="Animation. Starts in tokens mode with an array of 75, 305, 24, 887 - clicking embeddings animates those into a 2D array showing each one to be composed of three floating point numbers." src="https://static.simonwillison.net/static/2025/tokens-embeddings.gif" style="max-width: 100%"></div> <p>Tags: <a href="https://simonwillison.net/tags/ai">ai</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a>, <a href="https://simonwillison.net/tags/generative-ai">generative-ai</a>, <a href="https://simonwillison.net/tags/llms">llms</a>, <a href="https://simonwillison.net/tags/sam-rose">sam-rose</a>, <a href="https://simonwillison.net/tags/tokenization">tokenization</a></p>

2025-08-05T05:20:18+00:002025-08-05T05:20:18+00:00https://simonwillison.net/2025/Aug/5/a-friendly-introduction-to-svg/#atom-tag

<p><strong><a href="https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/">A Friendly Introduction to SVG</a></strong></p> This SVG tutorial by Josh Comeau is fantastic. It's filled with neat interactive illustrations - with a pleasing subtly "click" audio effect as you adjust their sliders - and provides a useful introduction to a bunch of well chosen SVG fundamentals.</p> <p>I finally understand what all four numbers in the <code>viewport="..."</code> attribute are for! <p><small></small>Via <a href="https://lobste.rs/s/ome2lo/friendly_introduction_svg">Lobste.rs</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/svg">svg</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a>, <a href="https://simonwillison.net/tags/josh-comeau">josh-comeau</a></p>

2025-05-08T21:00:22+00:002025-05-08T21:00:22+00:00https://simonwillison.net/2025/May/8/reservoir-sampling/#atom-tag

<p><strong><a href="https://samwho.dev/reservoir-sampling/">Reservoir Sampling</a></strong></p> Yet another outstanding interactive essay by Sam Rose (<a href="https://simonwillison.net/tags/sam-rose/">previously</a>), this time explaining how reservoir sampling can be used to select a "fair" random sample when you don't know how many options there are and don't want to accumulate them before making a selection.</p> <blockquote> <p>Reservoir sampling is one of my favourite algorithms, and I've been wanting to write about it for years now. It allows you to solve a problem that at first seems impossible, in a way that is both elegant and efficient.</p> </blockquote> <p>I appreciate that Sam starts the article with "No math notation, I promise." Lots of delightful widgets to interact with here, all of which help build an intuitive understanding of the underlying algorithm.</p> <p><img alt="Animated demo. As a slider moves from left to right the probability of cards drawn from a deck is simulated. Text at the bottom reads Anything older than 15 cards ago is has a less than 0.01% chance of being held when I stop." src="https://static.simonwillison.net/static/2025/sam-rose-cards.gif" /></p> <p>Sam shows how this algorithm can be applied to the real-world problem of sampling log files when incoming logs threaten to overwhelm a log aggregator.</p> <p>The dog illustration is <a href="https://samwho.dev/dogs/">commissioned art</a> and the MIT-licensed code is <a href="https://github.com/samwho/visualisations/tree/main/reservoir-sampling">available on GitHub</a>. <p><small></small>Via <a href="https://news.ycombinator.com/item?id=43928315">Hacker News</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/algorithms">algorithms</a>, <a href="https://simonwillison.net/tags/logging">logging</a>, <a href="https://simonwillison.net/tags/rate-limiting">rate-limiting</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a>, <a href="https://simonwillison.net/tags/sam-rose">sam-rose</a></p>

2024-08-11T22:56:33+00:002024-08-11T22:56:33+00:00https://simonwillison.net/2024/Aug/11/transformer-explainer/#atom-tag

<p><strong><a href="https://poloclub.github.io/transformer-explainer/">Transformer Explainer</a></strong></p> This is a very neat interactive visualization (with accompanying essay and video - scroll down for those) that explains the Transformer architecture for LLMs, using a GPT-2 model running directly in the browser using the ONNX runtime and Andrej Karpathy's nanoGPT project.</p> <p><img alt="Screenshot of the Transformer Explainer interface, running a prompt &quot;the sky is&quot; which returns &quot;blue&quot; as the most obvious next word." src="https://static.simonwillison.net/static/2024/transformer-explainer.jpg" /> <p>Tags: <a href="https://simonwillison.net/tags/ai">ai</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a>, <a href="https://simonwillison.net/tags/d3">d3</a>, <a href="https://simonwillison.net/tags/generative-ai">generative-ai</a>, <a href="https://simonwillison.net/tags/llms">llms</a>, <a href="https://simonwillison.net/tags/gpt-2">gpt-2</a></p>

2024-07-13T22:51:45+00:002024-07-13T22:51:45+00:00https://simonwillison.net/2024/Jul/13/load-balancing/#atom-tag

<p><strong><a href="https://samwho.dev/load-balancing/">Load Balancing</a></strong></p> Sam Rose built this interactive essay explaining how different load balancing strategies work. It's part of <a href="https://samwho.dev/">a series</a> that includes <a href="https://samwho.dev/memory-allocation/">memory allocation</a>, <a href="https://samwho.dev/bloom-filters/">bloom filters</a> and more. <p>Tags: <a href="https://simonwillison.net/tags/algorithms">algorithms</a>, <a href="https://simonwillison.net/tags/load-balancing">load-balancing</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a>, <a href="https://simonwillison.net/tags/sam-rose">sam-rose</a></p>

2024-06-05T15:43:57+00:002024-06-05T15:43:57+00:00https://simonwillison.net/2024/Jun/5/an-animated-introduction-to-fourier-series/#atom-tag

<p><strong><a href="https://www.andreinc.net/2024/04/24/from-the-circle-to-epicycles">An animated introduction to Fourier Series</a></strong></p> Outstanding essay and collection of animated explanations (created using p5.js) by Andrei Ciobanu explaining Fourier transforms, starting with circles, pi, radians and building up from there.</p> <p>I found Fourier stuff only really clicked for me when it was accompanied by clear animated visuals, and these are a beautiful example of those done really well. <p><small></small>Via <a href="https://news.ycombinator.com/item?id=40578705">Hacker News</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/mathematics">mathematics</a>, <a href="https://simonwillison.net/tags/processing">processing</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a></p>

2024-05-20T21:19:07+00:002024-05-20T21:19:07+00:00https://simonwillison.net/2024/May/20/crdt-text-buffer/#atom-tag

<p><strong><a href="https://madebyevan.com/algos/crdt-text-buffer/">CRDT: Text Buffer</a></strong></p> Delightfully short and clear explanation of the CRDT approach to collaborative text editing by Evan Wallace (of Figma and esbuild fame), including a neat interactive demonstration of how the algorithm works even when the network connection between peers is temporarily paused. <p><small></small>Via <a href="https://lobste.rs/s/42dxsn/crdt_text_buffer">Lobste.rs</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/crdt">crdt</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a></p>

2024-02-23T15:59:33+00:002024-02-23T15:59:33+00:00https://simonwillison.net/2024/Feb/23/bloom-filters-explained-by-sam-rose/#atom-tag

<p><strong><a href="https://samwho.dev/bloom-filters/">Bloom Filters, explained by Sam Rose</a></strong></p> Beautifully designed explanation of bloom filters, complete with interactive demos that illustrate exactly how they work. <p>Tags: <a href="https://simonwillison.net/tags/bloom-filters">bloom-filters</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a>, <a href="https://simonwillison.net/tags/sam-rose">sam-rose</a></p>

2024-02-22T23:38:56+00:002024-02-22T23:38:56+00:00https://simonwillison.net/2024/Feb/22/okay-color-spaces/#atom-tag

<p><strong><a href="https://ericportis.com/posts/2024/okay-color-spaces/">Okay, Color Spaces</a></strong></p> Fantastic interactive explanation of how color spaces work by Eric Portis. <p><small></small>Via <a href="https://twitter.com/leaverou/status/1760495271748780355">Lea Verou</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/colour">colour</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a></p>

2023-12-04T22:24:04+00:002023-12-04T22:24:04+00:00https://simonwillison.net/2023/Dec/4/llm-visualization/#atom-tag

<p><strong><a href="https://bbycroft.net/llm">LLM Visualization</a></strong></p> Brendan Bycroft’s beautifully crafted interactive explanation of the transformers architecture—that universal but confusing model diagram, only here you can step through and see a representation of the flurry of matrix algebra that occurs every time you get a Large Language Model to generate the next token. <p>Tags: <a href="https://simonwillison.net/tags/ai">ai</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a>, <a href="https://simonwillison.net/tags/generative-ai">generative-ai</a>, <a href="https://simonwillison.net/tags/llms">llms</a></p>

2023-10-04T15:10:52+00:002023-10-04T15:10:52+00:00https://simonwillison.net/2023/Oct/4/an-interactive-intro-to-crdts/#atom-tag

<p><strong><a href="https://jakelazaroff.com/words/an-interactive-intro-to-crdts/">An Interactive Intro to CRDTs</a></strong></p> Superb interactive essay by Jake Lazaroff, providing a very clear explanation of how the fundamental mechanisms behind CRDTs (Conflict-free Replicated Data Types) work. The interactive explanatory demos are very neatly designed and a lot of fun to play with. <p><small></small>Via <a href="https://news.ycombinator.com/item?id=37764581">Hacker News</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/crdt">crdt</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a></p>

2023-05-10T13:58:36+00:002023-05-10T13:58:36+00:00https://simonwillison.net/2023/May/10/see-this-page-fetch-itself-byte-by-byte-over-tls/#atom-tag

<p><strong><a href="https://subtls.pages.dev/">See this page fetch itself, byte by byte, over TLS</a></strong></p> George MacKerron built a TLS 1.3 library in TypeScript and used it to construct this amazing educational demo, which performs a full HTTPS request for its own source code over a WebSocket and displays an annotated byte-by-byte representation of the entire exchange. This is the most useful illustration of how HTTPS actually works that I’ve ever seen. <p><small></small>Via <a href="https://twitter.com/b0rk/status/1656287855612682240">Julia Evans</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/encryption">encryption</a>, <a href="https://simonwillison.net/tags/http">http</a>, <a href="https://simonwillison.net/tags/https">https</a>, <a href="https://simonwillison.net/tags/tls">tls</a>, <a href="https://simonwillison.net/tags/websockets">websockets</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a></p>

2023-05-09T17:35:42+00:002023-05-09T17:35:42+00:00https://simonwillison.net/2023/May/9/explain-neurons/#atom-tag

<p><strong><a href="https://openaipublic.blob.core.windows.net/neuron-explainer/paper/index.html">Language models can explain neurons in language models</a></strong></p> Fascinating interactive paper by OpenAI, describing how they used GPT-4 to analyze the concepts tracked by individual neurons in their much older GPT-2 model. “We generated cluster labels by embedding each neuron explanation using the OpenAI Embeddings API, then clustering them and asking GPT-4 to label each cluster.” <p><small></small>Via <a href="https://openai.com/research/language-models-can-explain-neurons-in-language-models">OpenAI blog</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/ai">ai</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a>, <a href="https://simonwillison.net/tags/openai">openai</a>, <a href="https://simonwillison.net/tags/generative-ai">generative-ai</a>, <a href="https://simonwillison.net/tags/gpt-4">gpt-4</a>, <a href="https://simonwillison.net/tags/llms">llms</a>, <a href="https://simonwillison.net/tags/embeddings">embeddings</a>, <a href="https://simonwillison.net/tags/gpt-2">gpt-2</a></p>

2022-12-31T17:31:05+00:002022-12-31T17:31:05+00:00https://simonwillison.net/2022/Dec/31/draw-svg-rope-using-javascript/#atom-tag

<p><strong><a href="https://muffinman.io/blog/draw-svg-rope-using-javascript/">Draw SVG rope using JavaScript</a></strong></p> Delightful interactive tutorial by Stanko Tadić showing how to render an illustration of a rope using SVG, starting with a path. The way the tutorial is presented is outstanding. <p><small></small>Via <a href="https://news.ycombinator.com/item?id=34197379">Hacker News</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/graphics">graphics</a>, <a href="https://simonwillison.net/tags/javascript">javascript</a>, <a href="https://simonwillison.net/tags/svg">svg</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a></p>

2022-02-07T19:27:40+00:002022-02-07T19:27:40+00:00https://simonwillison.net/2022/Feb/7/sha256-algorithm-explained/#atom-tag

<p><strong><a href="https://sha256algorithm.com/">Sha256 Algorithm Explained</a></strong></p> Absolutely beautiful interactive animated explanation by Domingo Martin of the SHA256 hashing algorithm. <p><small></small>Via <a href="https://news.ycombinator.com/item?id=30244534">Hacker News</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/algorithms">algorithms</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a></p>

2020-12-08T03:38:57+00:002020-12-08T03:38:57+00:00https://simonwillison.net/2020/Dec/8/cameras-and-lenses/#atom-tag

<p><strong><a href="https://ciechanow.ski/cameras-and-lenses/">Cameras and Lenses</a></strong></p> Fabulous explotable interactive essay by Bartosz Ciechanowski explaining how cameras and lenses work. <p><small></small>Via <a href="https://twitter.com/theavalkyrie/status/1336145214436741120">@theavalkyrie</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/photography">photography</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a></p>

2020-01-10T05:12:31+00:002020-01-10T05:12:31+00:00https://simonwillison.net/2020/Jan/10/visual-introduction-machine-learning/#atom-tag

<p><strong><a href="http://www.r2d3.us/visual-intro-to-machine-learning-part-1/">A visual introduction to machine learning</a></strong></p> Beautiful interactive essay explaining how a decision tree machine learning module is constructed, and using that to illustrate the concept of overfitting. This is one of the best explanations of machine learning fundamentals I’ve seen anywhere. <p>Tags: <a href="https://simonwillison.net/tags/machine-learning">machine-learning</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a></p>

2019-01-12T02:55:51+00:002019-01-12T02:55:51+00:00https://simonwillison.net/2019/Jan/12/fourier-transforms/#atom-tag

<p><strong><a href="http://www.jezzamon.com/fourier/index.html">An Interactive Introduction to Fourier Transforms</a></strong></p> I love interactive exploitable explanations and this is the best I’ve seen in a while: Jez Swanson breaks down exactly what a Fourier transform does, first by letting you interactively draw and deconstruct wave patterns and then by showing Epicycles andcexplsining JPEG compression. All with not a formula in sight! <p><small></small>Via <a href="https://www.metafilter.com/178704/Cyclical-reasoning">MetaFilter</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/mathematics">mathematics</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a></p>

2018-06-20T21:10:48+00:002018-06-20T21:10:48+00:00https://simonwillison.net/2018/Jun/20/teachable-machine-tensorflowjs/#atom-tag

<p><strong><a href="https://beta.observablehq.com/@nsthorat/how-to-build-a-teachable-machine-with-tensorflow-js">Notebook: How to build a Teachable Machine with TensorFlow.js</a></strong></p> This is a really cool Observable notebook. It explains how to build image classification that runs in the browser on top of Tensorflow.js, and includes interactive demos that hook into your webcam and let you hold up items and use them to train a classifier. Since it’s built on Observable every single underlying line of source code is available to browse as part of the essay. <p><small></small>Via <a href="https://twitter.com/nsthorat/status/10094961298919465172">@nsthorat</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/javascript">javascript</a>, <a href="https://simonwillison.net/tags/machine-learning">machine-learning</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a>, <a href="https://simonwillison.net/tags/tensorflow">tensorflow</a>, <a href="https://simonwillison.net/tags/observable">observable</a></p>

2018-04-12T16:41:42+00:002018-04-12T16:41:42+00:00https://simonwillison.net/2018/Apr/12/what-do-you-mean-average/#atom-tag

<p><strong><a href="https://beta.observablehq.com/@maryzam/what-do-you-mean-average">What do you mean &quot;average&quot;?</a></strong></p> Lovely example of an interactive explorable demonstrating mode/mean/median, built as an Observable notebook using D3. <p><small></small>Via <a href="https://twitter.com/maryzamcode/status/983848153697996800?s=21">@maryzamcode</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/explorables">explorables</a>, <a href="https://simonwillison.net/tags/d3">d3</a>, <a href="https://simonwillison.net/tags/observable">observable</a></p>

2018-01-31T19:07:55+00:002018-01-31T19:07:55+00:00https://simonwillison.net/2018/Jan/31/usgs-world-earthquake-map-observable-notebook/#atom-tag

<p><strong><a href="https://beta.observablehq.com/@jashkenas/quakespotter-0-1">USGS World Earthquake Map (observable notebook)</a></strong></p> Here’s an extended version of the notebook constructed by Jeremy Ashkenas in that Observable YouTube demo. You really need to check this thing out—the notebook itself has sliders in that you can manipulate (even on a mobile browser) or you can click to edit the code and see your changes reflected in real-time. If you sign in with GitHub you can fork the project to your own account and save your changes. <p>Tags: <a href="https://simonwillison.net/tags/jeremy-ashkenas">jeremy-ashkenas</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a>, <a href="https://simonwillison.net/tags/observable">observable</a></p>

2018-01-31T17:01:16+00:002018-01-31T17:01:16+00:00https://simonwillison.net/2018/Jan/31/observable-earthquake-globe-ten-minutes/#atom-tag

<p><strong><a href="https://www.youtube.com/watch?v=uEmDwflQ3xE">Observable: An Earthquake Globe in Ten Minutes</a></strong></p> Well worth your time. Jeremy Ashkenas uses Observable to live-code an interactive visualization of recent earthquakes around the world, using USGS data (fetched as JSON), d3, topoJSON and an Observable notebook. I’m sold—this is truly ground-breaking new technology. <p>Tags: <a href="https://simonwillison.net/tags/javascript">javascript</a>, <a href="https://simonwillison.net/tags/jeremy-ashkenas">jeremy-ashkenas</a>, <a href="https://simonwillison.net/tags/visualization">visualization</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a>, <a href="https://simonwillison.net/tags/d3">d3</a>, <a href="https://simonwillison.net/tags/observable">observable</a></p>

2017-11-21T14:50:03+00:002017-11-21T14:50:03+00:00https://simonwillison.net/2017/Nov/21/joyjs/#atom-tag

<p><strong><a href="http://ncase.me/joy-demo/">JOY.js</a></strong></p> Delightful new exploratory programming environment from Nicky Case. Try the Turtle demo, which takes Logo and updates it for the modern web. <p><small></small>Via <a href="https://twitter.com/ncasenmare/status/931950392191127557">Nicky Case</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/javascript">javascript</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a></p>

2017-11-09T18:44:03+00:002017-11-09T18:44:03+00:00https://simonwillison.net/2017/Nov/9/pink-trombone/#atom-tag

<p><strong><a href="https://dood.al/pinktrombone/">Pink Trombone</a></strong></p> Explorable explanation of the human vocal system by Neil Thapen. View source for some pleasantly readable JavaScript / canvas / window.AudioContext code. <p><small></small>Via <a href="http://explorabl.es/">Explorable Explanations</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/explorables">explorables</a></p>

2017-11-07T20:48:45+00:002017-11-07T20:48:45+00:00https://simonwillison.net/2017/Nov/7/feature-visualization/#atom-tag

<p><strong><a href="https://distill.pub/2017/feature-visualization/">Feature Visualization</a></strong></p> Another gorgeous paper published on Distill, the journal that prides itself on including interactive visualizations to help provide clear explanations of machine learning. <p><small></small>Via <a href="https://news.ycombinator.com/item?id=15646037">Hacker News</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/machine-learning">machine-learning</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a></p>

2017-10-16T14:47:25+00:002017-10-16T14:47:25+00:00https://simonwillison.net/2017/Oct/16/quadtrees/#atom-tag

<p><strong><a href="http://jimkang.com/quadtreevis/">An interactive explanation of quadtrees</a></strong></p> Neat explorable explanation of quadtrees, using interactives built on top of D3. <p><small></small>Via <a href="https://medium.com/@deathmtn/weird-but-worth-it-a762820820a2">Weird, but worth it: combining canvas and SVG</a></small></p> <p>Tags: <a href="https://simonwillison.net/tags/explorables">explorables</a>, <a href="https://simonwillison.net/tags/d3">d3</a></p>

2017-10-15T13:17:30+00:002017-10-15T13:17:30+00:00https://simonwillison.net/2017/Oct/15/explorable/#atom-tag

<p><strong><a href="http://explorabl.es/">Explorable Explanations</a></strong></p> I’m fascinated by web articles and essays that embed interactive visualizations—taking advantage of the unique capabilities of the medium to help explain complex concepts. Explorable Explanations collects exactly these, under the banner of “learning through play”. They also gather tools and tutorials to help build more of them. <p>Tags: <a href="https://simonwillison.net/tags/interactives">interactives</a>, <a href="https://simonwillison.net/tags/explorables">explorables</a></p>