30:[{"id":"595602bff30d96d3178ead5c2898860ab1925a5faa96bb5a18fced378754581276c1e734cd4e1625f0f4a01238505b94c0f2c99523c67a5d1df7d658fe6f3cb8","href":"https://static.observableusercontent.com/files/595602bff30d96d3178ead5c2898860ab1925a5faa96bb5a18fced378754581276c1e734cd4e1625f0f4a01238505b94c0f2c99523c67a5d1df7d658fe6f3cb8","name":"physical.png","type":"image/png","lastModified":1617820659747.007,"size":1576097}] 2e:{"title":"Raja Ravi Varma.","cells":[{"id":61,"value":"html`

Raja Ravi Varma.

Week 2:Distributions. Day 7:Physical.

#30daychartchallenge

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"html`

An histogram of colors in Ravi Varma's paintings.
Chart has been made using:\nMike Bostock's notebook.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"chart = FileAttachment(\"physical.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`# Image Histogram`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof image = imageInput({\n height: 120,\n crossOrigin: \"anonymous\",\n initialUrl: \"https://gist.githubusercontent.com\"\n + \"/mbostock/1db888aa9f6518d86f625d0fe9db22b9\"\n + \"/raw/0fe4a0af29c5de8d09fc2b1e9a1bccd50644c417\"\n + \"/beastie-boys.jpg\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"image","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"{\n const height = 256;\n const k = height / Math.max(...histogram);\n const context = DOM.context2d(256, height, 1);\n context.canvas.style.width = \"100%\";\n context.canvas.style.height = `${height}px`;\n context.canvas.style.imageRendering = \"pixelated\";\n context.canvas.style.background = \"#e7d7d1\";\n context.canvas.style.borderBottom = \"solid 1px #000\";\n context.globalCompositeOperation = \"screen\";\n context.fillStyle = \"#f00\";\n for (let i = 0; i < 256; ++i) {\n context.fillRect(i, height - histogram[i * 3 + 0] * k, 1, height);\n }\n context.fillStyle = \"#0f0\";\n for (let i = 0; i < 256; ++i) {\n context.fillRect(i, height - histogram[i * 3 + 1] * k, 1, height);\n }\n context.fillStyle = \"#00f\";\n for (let i = 0; i < 256; ++i) {\n context.fillRect(i, height - histogram[i * 3 + 2] * k, 1, height);\n }\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"histogram = {\n const histogram = new Uint32Array(256 * 3);\n const {width, height, data} = getImageData(image);\n for (let i = 0, k = 0; i < width; ++i) {\n for (let j = 0; j < height; ++j, k += 4) {\n ++histogram[data[k + 0] * 3 + 0];\n ++histogram[data[k + 1] * 3 + 1];\n ++histogram[data[k + 2] * 3 + 2];\n }\n }\n return histogram;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"function getImageData(image, width = image.naturalWidth, height = image.naturalHeight) {\n const context = DOM.context2d(width, height, 1);\n context.drawImage(image, 0, 0, width, height);\n return context.getImageData(0, 0, width, height);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {imageInput} from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}