2c:null 2d:["$","title",null,{"children":"Raja Ravi Varma. | Urmila | Observable"}] 32:[{"id":"595602bff30d96d3178ead5c2898860ab1925a5faa96bb5a18fced378754581276c1e734cd4e1625f0f4a01238505b94c0f2c99523c67a5d1df7d658fe6f3cb8","href":"https://static.observableusercontent.com/files/595602bff30d96d3178ead5c2898860ab1925a5faa96bb5a18fced378754581276c1e734cd4e1625f0f4a01238505b94c0f2c99523c67a5d1df7d658fe6f3cb8","name":"physical.png","type":"image/png","lastModified":1617820659747.007,"size":1576097}] 30:{"id":"a3aa798f0f18deae","slug":"raja-ravi-varma","title":"Raja Ravi Varma.","thumbnail":"4b4c9448a3c2d733525cd20078813f298a3cd9af523c07c3fd516cfea61dac85","access_level":"public","create_time":"$D2021-04-07T16:19:02.941Z","update_time":"$D2021-05-02T12:11:47.077Z","view_time":null,"first_public_time":"$D2021-04-07T18:57:59.297Z","fork":{"id":"7b9063f879ae2b02","slug":"image-histogram/2","title":"Image Histogram","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":1,"starred":false,"owner":{"type":"team","id":"700e8d2a68a68d16","login":"urmilaj","name":"Urmila","avatar_url":"https://avatars-next.observableusercontent.com/7d3b6c22c4e6d80831981a8062d1fdd61bf018caa1adf68e501b87fb72430c51","tier":"starter_2024"},"version":85,"publish_version":85,"role":null,"authored":false,"authors":[{"type":"individual","id":"a8b59130ff113103","login":"urmilaj","name":"Urmila","avatar_url":"https://avatars-next.observableusercontent.com/7d3b6c22c4e6d80831981a8062d1fdd61bf018caa1adf68e501b87fb72430c51","tier":null}],"members":[{"type":"individual","id":"a8b59130ff113103","login":"urmilaj","name":"Urmila","avatar_url":"https://avatars-next.observableusercontent.com/7d3b6c22c4e6d80831981a8062d1fdd61bf018caa1adf68e501b87fb72430c51","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"043e5f95e13c0b1e","slug":"30daychartchallenge","title":"#30DayChartChallenge","owner":{"id":"700e8d2a68a68d16","login":"urmilaj","name":"Urmila"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"chart = FileAttachment(\"physical.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`# Image Histogram`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"image","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import {imageInput} from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"