31:T4da,# Face Charts with Plot Inspired by ProPublica latest investigation [The Secret IRS Files](https://www.propublica.org/article/the-secret-irs-files-trove-of-never-before-seen-records-reveal-how-the-wealthiest-avoid-income-tax) (if you haven't read it yet, you should!). One of the graphics created by [Agnes Chang](https://twitter.com/aggggnessss) encodes financial information of super-rich, the face waffles. I thought it could be a fun project to try to replicate it in my journey learning [Plot](https://observablehq.com/@observablehq/plot).

and @aggggnessss invented a new chart form (!): the face waffle.
— Lena V. Groeger (@lenagroeger) June 8, 2021

32:T5e9,function generateImageGrid(imgsrc, blockSize, canvasWidth, opacity = 0.6) { return new Promise((resolve, reject) => { const img = new Image(); img.crossOrigin = "Anonymous"; img.onload = () => { const canvas = DOM.canvas(canvasWidth, canvasWidth); const ctx = canvas.getContext("2d"); const scale = blockSize / canvas.width; const w = canvas.width * scale; const h = canvas.height * scale; ctx.drawImage( img, 0, 0, img.width, img.height, 0, 0, w, (h * img.height) / img.width ); ctx.imageSmoothingEnabled = false; ctx.drawImage(canvas, 0, 0, w, h, 0, 0, canvas.width, canvas.height); const colors = []; const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const pixels = imageData.data; for ( let y = 0, j = 0; y < canvas.height; j++, y += ~~(canvas.height / blockSize) ) { for ( let x = 0, i = 0; x < canvas.width; i++, x += ~~(canvas.width / blockSize) ) { const index = y * (canvas.width * 4) + x * 4; const b = ~~( (pixels[index] + pixels[index + 1] + pixels[index + 2]) / 3 ); colors.push({ x: i, y: j, color: `rgba(${b},${b},${b},${opacity}` }); } } resolve({ canvas, colors }); }; img.src = imgsrc; }); }33:[{"id":"f59d908ad5f792899d97ba7e4f0a64b7bce58176ef5529c5852f009323ac4483092d13d5e490ffc04a44fb5173a0e5e680488c527a129fdd8c0ebfe8b3aa7021","href":"https://static.observableusercontent.com/files/f59d908ad5f792899d97ba7e4f0a64b7bce58176ef5529c5852f009323ac4483092d13d5e490ffc04a44fb5173a0e5e680488c527a129fdd8c0ebfe8b3aa7021","name":"elon@1.jpg","type":"image/jpeg","lastModified":1626488180994.535,"size":48192},{"id":"0d09c61b475e2b84ead1f9e8bad4e1b95d29a6eeeca1bd8280bad722849cdf610437f783231466ac5772c00432b7058bf0290c717c9564badcd3c3e14371b2ec","href":"https://static.observableusercontent.com/files/0d09c61b475e2b84ead1f9e8bad4e1b95d29a6eeeca1bd8280bad722849cdf610437f783231466ac5772c00432b7058bf0290c717c9564badcd3c3e14371b2ec","name":"Jeff_Bezos_at_Amazon_Spheres_Grand_Opening_in_Seattle_-_2018_(39074799225)_(cropped)@1.jpg","type":"image/jpeg","lastModified":1626358225229.608,"size":32958},{"id":"bf7ebe5b95421bfb98798bb85d1adaa135daffe8c2db761190fe494fd9c6ea740af848d3ccc08bf03d08a14ab1ff9114cf782c89ffda94b6be8c24e86f0871ec","href":"https://static.observableusercontent.com/files/bf7ebe5b95421bfb98798bb85d1adaa135daffe8c2db761190fe494fd9c6ea740af848d3ccc08bf03d08a14ab1ff9114cf782c89ffda94b6be8c24e86f0871ec","name":"E3XLRyVVUAYMMro.jpeg","type":"image/jpeg","lastModified":1626561495646.656,"size":82826}] 2f:{"title":"Face Charts with Plot","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":998,"value":"viewof reported = rangeReported(this)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1088,"value":"viewof paid = rangePaid(this)","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"Plot.plot({\n x: { axis: null },\n y: { axis: null },\n padding: 0,\n margin: 0,\n color: {\n type: \"identity\"\n },\n width: canvasWidth,\n height: canvasWidth,\n marks: [\n Plot.cell(bezosdata.colors, {\n inset: 0.5,\n x: \"x\",\n y: \"y\",\n fill: \"color\"\n }),\n Plot.cell(fakeData(bezosdata.colors.length, reported, colorReported), {\n inset: 0.4,\n x: \"x\",\n y: \"y\",\n fill: \"color\"\n }),\n ,\n Plot.cell(fakeData(bezosdata.colors.length, paid, colorPaid), {\n inset: 0.4,\n x: \"x\",\n y: \"y\",\n fill: \"color\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1217,"value":"### How it works","pinned":false,"hidden":false,"mode":"md"},{"id":1532,"value":"Start with an image. It will be helpful if the image is cropped and squared. Otherwise, the top content will fit in the squared box. ","pinned":false,"hidden":false,"mode":"md"},{"id":1169,"value":"// from https://en.wikipedia.org/wiki/Elon_Musk#/media/File:Elon_Musk_Royal_Society_(crop1).jpg\nviewof yoursrc = Inputs.text({\n value: await FileAttachment(\"elon@1.jpg\").url(),\n submit: true,\n label: \"Your image URL\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1572,"value":"Block size sets the pixel size for the pixelation effect.","pinned":false,"hidden":false,"mode":"md"},{"id":241,"value":"viewof blockSize = Inputs.range([1, 50], {\n step: 1,\n value: 30,\n label: \"Block Size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1578,"value":"Canvas width sets the graphic width.","pinned":false,"hidden":false,"mode":"md"},{"id":260,"value":"viewof canvasWidth = Inputs.range([50, 400], {\n step: 1,\n value: 300,\n label: \"Chart Width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1601,"value":"[`generateImageGrid`](#generateImageGrid) function downsamples the original image, essentially make it pixelated. It outputs an object with the downsampled image as `HTMLCanvasElement` and an array with each downsampled pixel {x,y, color}. This process is the most of the work, as ${linkExternal(\"@mbostock\",\"https://observablehq.com/@mbostock\")} said\n\n> ${linkExternal(\"...working with data should be 80% of the work of visualization\",\"https://observablehq.com/@mbostock/10-years-of-open-source-visualization#l5\")}\n\n\n\nPlot has a ${linkExternal(\"Cell mark\", \"https://observablehq.com/@observablehq/plot-cell\")} that renders 2d arrays into the graphic shape. In this example, the pixels' colors, the green, and yellow test values.","pinned":false,"hidden":false,"mode":"md"},{"id":975,"value":"Thanks, ${linkExternal(\"@fil\",\"https://observablehq.com/@fil\")}, for explaining how to use the identity scale to override the default scale to use literal color values from the data array, also in the ${linkExternal(\"documentation\", \"https://github.com/observablehq/plot#:~:text=you%20can%20opt-out%20of%20a%20scale%20using%20the%20identity%20scale%20type\")}\n\n> You can opt-out of a scale using the identity scale type. This is useful if you wish to specify literal colors or pixel positions within > a mark channel rather than relying on the scale to convert abstract values into visual values.","pinned":false,"hidden":false,"mode":"md"},{"id":1662,"value":"elonimg = generateImageGrid(yoursrc, blockSize, canvasWidth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1109,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1632,"value":"html`\n

\n\n${elonimg.canvas}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1243,"value":"Inputs.bind(rangeReported(), viewof reported)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1241,"value":"Inputs.bind(rangePaid(), viewof paid)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1139,"value":"Plot.plot({\n x: { axis: null },\n y: { axis: null },\n padding: 0,\n margin: 0,\n color: {\n type: \"identity\"\n },\n width: canvasWidth,\n height: canvasWidth,\n marks: [\n Plot.cell(elonimg.colors, {\n inset: 0.5,\n x: \"x\",\n y: \"y\",\n fill: \"color\"\n }),\n Plot.cell(fakeData(bezosdata.colors.length, reported, colorReported), {\n inset: 0.4,\n x: \"x\",\n y: \"y\",\n fill: \"color\"\n }),\n ,\n Plot.cell(fakeData(bezosdata.colors.length, paid, colorPaid), {\n inset: 0.4,\n x: \"x\",\n y: \"y\",\n fill: \"color\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1677,"value":"`fakeData` function generates the colors marks data, an array of `{x, y, color}` calculated as the percentage of the total amount of blocks.\n\n```js\n 0: Object {x: 0, y: 29, color: \"#3b9124\"}\n 1: Object {x: 0, y: 28, color: \"#3b9124\"}\n 2: Object {x: 0, y: 27, color: \"#3b9124\"}\n...\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1047,"value":"function fakeData(total, value, color) {\n const side = Math.sqrt(total);\n const s = Math.ceil(side * value);\n\n return Array(s)\n .fill()\n .map((_, x) => {\n return Array(s)\n .fill()\n .map((_, y) => {\n return {\n x: x,\n y: side - y - 1,\n color: color\n };\n });\n })\n .flat();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1801,"value":"viewof colorReported = Inputs.text({value: \"#3b9124\", type: \"color\", label: \"Reported color\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1804,"value":"viewof colorPaid = Inputs.text({value: \"#f7db82\", label: \"Paid color\", type: \"color\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1927,"value":"----\n*Thanks to ${linkExternal(\"Fabian Iwand\", \"https://observablehq.com/@mootari\")} for feedback and code edits!*\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":1923,"value":"\n### Utils","pinned":false,"hidden":false,"mode":"md"},{"id":1894,"value":"range = (label, color, max = 1, value = undefined) => Inputs.range([0, max], {\n label: html`

${label}`,\n step: .01,\n value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1893,"value":"rangeReported = self => range('reported value', colorReported, 1, .2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1892,"value":"rangePaid = self => range('paid value', colorPaid, reported, self ? self.value : .1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"bezosdata = generateImageGrid(bezossrc, blockSize, canvasWidth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"// original from wikipedia https://en.wikipedia.org/wiki/Jeff_Bezos#/media/File:Jeff_Bezos_at_Amazon_Spheres_Grand_Opening_in_Seattle_-_2018_(39074799225)_(cropped).jpg\nbezossrc = FileAttachment(\n \"Jeff_Bezos_at_Amazon_Spheres_Grand_Opening_in_Seattle_-_2018_(39074799225)_(cropped)@1.jpg\"\n).url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1180,"value":"function linkExternal(content, link) {\n return html`${content}`;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}