2c:null 2d:["$","title",null,{"children":"Humanæ | Shaun Lebron | Observable"}] 32:T664,view = { function loadImg(url) { return new Promise(resolve => { const img = new Image(); img.src = url; img.onload = () => resolve(img); }); } let mostRecentUrl = null; async function setFace(face, url) { mostRecentUrl = url; await loadImg(url); if (mostRecentUrl === url) { face.style.backgroundImage = `url(${url})`; } } const size = 11; const el = html`

${colors.map(d => { const div = html`

`; div.addEventListener('mouseover', async () => { const face = el.querySelector('.face'); // load low-res asap await setFace(face, d.thumbUrl); // load high-res after cursor pauses enough await Promises.delay(50); if (mostRecentUrl === d.thumbUrl) { setFace(face, d.imageUrl); } }); return div; })}

`; return el; }33:[] 30:{"id":"ff6ef58e143e0db2","slug":"humanae","title":"Humanæ","thumbnail":"5bc969522f1e4e54c451354bee72ed83f87ce5d1dcca5f1c1f19f4fa0132be49","access_level":"public","create_time":"$D2018-05-18T04:16:15.868Z","update_time":"$D2018-05-22T13:16:31.740Z","view_time":null,"first_public_time":"$D2018-05-18T19:38:35.052Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"ed9847273198461c","login":"shaunlebron","name":"Shaun Lebron","avatar_url":"https://avatars-next.observableusercontent.com/681c504a781cacec69ea0df79eb5a6a890b26146edebc8d1ee3153812c528dc4","tier":"starter_2024"},"version":201,"publish_version":201,"role":null,"authored":false,"authors":[{"type":"individual","id":"22dcd5a87171b339","login":"shaunlebron","name":"Shaun Lebron","avatar_url":"https://avatars-next.observableusercontent.com/681c504a781cacec69ea0df79eb5a6a890b26146edebc8d1ee3153812c528dc4","tier":null}],"members":[{"type":"individual","id":"22dcd5a87171b339","login":"shaunlebron","name":"Shaun Lebron","avatar_url":"https://avatars-next.observableusercontent.com/681c504a781cacec69ea0df79eb5a6a890b26146edebc8d1ee3153812c528dc4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Humanæ","cells":[{"id":0,"value":"md`# Humanæ\n\n_A spectrum of human skin color._\n\n_(built by scraping [Humanæ], an art project by Angélica Dass)_\n\n_See [TED Talk](https://www.youtube.com/watch?v=NiMgOklgeos)._\n\n[Humanæ]:http://humanae.tumblr.com/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md`\n(colors are currently sorted by [HCL hue](https://en.wikipedia.org/wiki/HCL_color_space))\n\nNOTE: the Pantone color codes are artistic imitations, not officially [indexed](https://www.pantone.com/color-finder). (source [discussion](https://photo.stackexchange.com/questions/86974/humanae-pantone-colors-to-rgb-conversion#comment152178_86974))`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"colors = {\n const data = await d3.json('https://cdn.rawgit.com/shaunlebron/ae80b68cba20ecfa785718cc85020519/raw/d2665503034187f2b3b6eb6a682712bcd8a033e9/humanae.json');\n for (let d of data) {\n d.hue = d3.hcl(d.color).h;\n d.thumbUrl = d.imageUrl.replace(/_\\d+\\.jpg$/, '_100.jpg');\n }\n data.sort((a,b) => a.hue - b.hue);\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"