30: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; }31:[] 2e:{"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"},{"id":13,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":4,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}