Originally conceived for What Is Code as a recirculation module to link to other pages. The idea is just to show source and rendered html in some animated manner. It doesn't work cross-origin so I have some dummy html pages here, so they are fetching dummy source but linking to real source, but if it were same-origin it could just fetch the real url.
In response to a question on Twitter by @everybody_kurts:
“Hi @mbostock, I was looking at your stacked area chart at https://observablehq.com/@d3/stacked-area-chart. 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.
Click and drag the i,j,k in the upper right to reorder. Refresh for random dimensions.
One can imagine more spreadsheety stuff, extending to 4D arrays and higher, and aggregating/slicing/collapsing/folding along different dimensions.
No, I'm not at all sure I'm using the term "swizzle" correctly. I don't understand matrices.
Been meaning to try this for a long time! Inspired to go for it by Omar's recent work! I forget how to work with gists!
- Account for padding and such
- “Snap” words to the next line where they fit whole
- Wrap into different containers? Different directions?
- Ultimate goal: diagonal accelerometer scroll
Sample text is from Moby Dick, Chapter XCVI: The Try-Works
TOTALLY SUPER DUPER NOT MY WORK! Trying to illuminate how FizzyText (seen here, source here, isolated from dat.GUI dependency here) works. Original appears to have been written by George Michael Brower.
In the original, which I find brilliant:
- Solid black text is drawn onto an invisible canvas, from which it gets bitmap data
- The bitmap data is read like a collision detection array, where black means "you're on top of text" and white means "you're not"
- Particles of size r=0 are randomly spawned on a visible canvas
- The particles grow if they're on top of a (non-rendered) black pixel, and shrink till they disappear if not
- When they shrink to r=0, they respawn randomly somewhere
- The particles follow a Perlin noise flow field, a very sensible and fluid kind of random movement, in which nearby particles