Skip to content

Instantly share code, notes, and snippets.

@tophtucker
tophtucker / README.md
Last active Feb 4, 2021
d3 color-legend example
View README.md

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.

@tophtucker
tophtucker / README.md
Last active Oct 21, 2020
Beginning to reverse-engineer FizzyText
View README.md

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
@tophtucker
tophtucker / index.html
Last active Jan 4, 2020
Inferring device position from acceleration
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
View README.md

Swizzling! (Or pandas DataFrame "reshaping" / "pivoting" / "(un)stacking".)

Click and drag the i,j,k in the upper right to reorder. Click anywhere else to donate to ACLU or CAIR. 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.

View index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<body>
@tophtucker
tophtucker / flyer.png
Last active Sep 13, 2019
Drifting flyers on a torus
@tophtucker
tophtucker / README.md
Last active Sep 13, 2019
Letter flow
View README.md

Roll over the text.

Owes a huge debt to George Michael Brower’s FizzyText.

@tophtucker
tophtucker / index.html
Last active Sep 13, 2019
Lenticular II
View index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<body>
@tophtucker
tophtucker / index.html
Last active Sep 13, 2019
Lenticular III
View index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<body>