Skip to content

Instantly share code, notes, and snippets.

tophtucker /
Last active Jun 8, 2020
d3 color-legend example

In response to a question on Twitter by @everybody_kurts:

“Hi @mbostock, I was looking at your stacked area chart at At the end of the file, you import swatches from "@d3/color-legend". I tried finding this on npmjs but to no avail. Is this exclusive to @observablehq only?”

This shows how to use the swatches function from the @d3/color-legend notebook in a plain HTML page. The example data for the swatches (the color scale and margin) is copied from the @d3/stacked-area-chart notebook.

tophtucker /
Last active Sep 13, 2019
Viewport reflowing

Creates as many copies of the document as necessary to show the whole thing, like a sort of pagination. As you scroll, it spools and unspools into as many pages as it needs. So the whole document is kinda visible all at once, in slices.

Why’d I pick The Waste Land? Something with scattered images probably would’ve been better. Idk, sometimes I just get on a kick of using a certain text. Clearly I have very little editorial vision here.

It could be better generalized (so that e.g. there isn’t just a fixed number of pages allocated on load)... and I kinda want all the pages to be drifting around the space... fluttering, bumping. There are also obviously more pragmatic variants, like a dual-page reader that accommodates either page-turning or scrolling. Or a more deterministic layout where the remaining pages are presented in an orderly fashion so you get a better sense of how much you have left to read or w/e. Why would anyway want that anyway. Whyyyy am I doing thissssss————

Long ago, like years ago — wai


From a friend: “1. What's the probability of a HS athlete going pro? 2. Suppose we know a pro athlete. What's the probability she was a college athlete?”

So I was thinking about my favorite intuitive illustrations and explanations of conditional probability and Bayes' theorem, e.g.

I asked for help here, there's some good discussion:



My friend Colin has been trying to give me a better intuition for higher dimensions. His first fun fact was that the volume of an n-dimensional hypersphere peaks somewhere around n=6 or so, I forget, and then approaches 0 as n approaches infinity. Damn! Meanwhile, of course the volume of a hypercube just diverges to infinity, as you'd expect. So if you inscribe a hypersphere in a hypercube, as dimension increases, more and more of the volume is in "the corners" — ultimately, almost all of it.

That's not what I'm trying to show here, it's just cool. This is somewhat different.

Colin also pointed out that, in a high-dimensional multivariate random normal distribution (with identity covariance matrix), all the mass ends up coming to be found in a sort of donut at some distance from the middle. There's very little mass in the middle. Of course the origin is still the mean/median/mode. The problem is that the middle is just so dang small, and there's SO MUCH SPACE as you go a little further out. So if you're jus


Pinch apart to split the viewport in two, so you can do parallel reading. Pinch together to recombine. Only tested on iPhone & iPad; should work on other multitouch devices?; doesn't do anything (or make any sense) on non-touch single-pointer mouse/trackpad devices, whatever we're calling that classic category these days. But you can see it demo'ed in this tweet.


The Web is missing lenses and mirrors and such, I think — images! maps! — fundamental mechanics for getting various views on the same underlying content. We have the freedom to paint any pixel according to any arbitrary rule, and yet it's weirdly hard to . . . like, hold your place in a long document, as one would with a finger marking a page in a book as you skim ahead. Sometimes I highlight the last sentence I read with the mouse so it jumps out when I scroll back up, which is a nice near-unconscious hack that takes advantage of something I know about how document state work