3f:null 40:["$","title",null,{"children":"Getting Colors from Images | Mark Woodall | Observable"}] 46:[{"id":"14d3510402871462610a05ac48c31d232ee0fb0253be9f448ea57767b5d6db6fb2395318523a993907853b0ac523477c72d294762d93d1b9b87358b7a3460984","href":"https://static.observableusercontent.com/files/14d3510402871462610a05ac48c31d232ee0fb0253be9f448ea57767b5d6db6fb2395318523a993907853b0ac523477c72d294762d93d1b9b87358b7a3460984","name":"iu@1.jpg","type":"image/jpeg","lastModified":1606627022202.805,"size":44862},{"id":"0a623d07a7ee35805b56643ef698e7f69bb9045ca29cfe76312a4bba7b7dd1cdcc9bb02e114d5b2353c22e20412fcea3f14bf72ac24ca3d287a1293410f03519","href":"https://static.observableusercontent.com/files/0a623d07a7ee35805b56643ef698e7f69bb9045ca29cfe76312a4bba7b7dd1cdcc9bb02e114d5b2353c22e20412fcea3f14bf72ac24ca3d287a1293410f03519","name":"iu.jpg","type":"image/jpeg","lastModified":1606590865391.825,"size":436963}] 44:{"id":"7f5ddc5bd82b2e4d","slug":"getting-colors-from-images","title":"Getting Colors from Images","thumbnail":"eaa69534d7bfbe916cbf471231f8e6d3465d243b7e9d23e3af497048a5ae1b19","access_level":"public","create_time":"$D2020-11-28T16:24:39.219Z","update_time":"$D2020-12-06T04:02:45.365Z","view_time":null,"first_public_time":"$D2020-11-28T20:08:29.896Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bb311203f4edb9ed","login":"llad","name":"Mark Woodall","avatar_url":"https://avatars-next.observableusercontent.com/afd150a847132b625d6e8f8321c9646fd1621cf853528dd7aaabb34db5c5381f","tier":"starter_2024","bio":"","following":false},"version":1297,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"19f9c83addf7d1c0","login":"llad","name":"Mark Woodall","avatar_url":"https://avatars-next.observableusercontent.com/afd150a847132b625d6e8f8321c9646fd1621cf853528dd7aaabb34db5c5381f","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"19f9c83addf7d1c0","login":"llad","name":"Mark Woodall","avatar_url":"https://avatars-next.observableusercontent.com/afd150a847132b625d6e8f8321c9646fd1621cf853528dd7aaabb34db5c5381f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Getting Colors from Images","cells":[{"id":0,"value":"md`# Getting Colors from Images\n\nI want to extract the colors from an image and try to organize them.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`## Get an Image\nUsing the file attachment feature I have loaded an image. Click on the attachment icon to the right of the image definition to change the image.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"image = FileAttachment(\"iu@1.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"md `## Getting at the Color Data\nI want to get at the RGBA values from the image data.\n\nRGBA uses 4 elements to define each pixel:\n * 1st position is the Red value\n * 2nd position is the Green value\n * 3rd position is the Blue value\n * 4th position is the Alpha value\n\nThis just repeats to build up an image.\n\nTo get at those values it seems most people on Observable write the image to a canvas element and then use the getImageData() from that.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"imagedata = {\n let ctx = DOM.canvas(image.width, image.height).getContext(\"2d\");\n ctx.drawImage(image, 0, 0);\n return {\n data: ctx.getImageData(0, 0, image.width, image.height),\n width: image.width,\n height: image.height\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"md `Now we want to put those colors into a useful list. I've excluded pure white (255,255,255) to focus on actual colors, I might want to revisit that and figure a better way of focusing just on interesting colors.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"data = colorList(imagedata.data.data).filter( ({r, g, b}) => {\n return r != 255 && g != 255 && b != 255;\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"function colorList(imageData) {\n const colors = [];\n for (let i = 0; i < imageData.length; i += 4) {\n colors.push(d3.rgb(imageData[i], imageData[i + 1], imageData[i + 2]));\n }\n return colors;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"md `### Look at a Pixel\nSo now we have an array of colors we can look at. Here is a pixel:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"pixel = data[8000]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"swatches([pixel])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"md `## Look at the colors\nI want to know the frequency of colors`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"md `First I'll break it down to by color to understand the data better.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"red = data.map(d => d.r)\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"redbars = \"red\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"import {chart as redHistogram} with {red as data, height, redbars as color} from \"@llad/histogram-with-color-attribute\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"redHistogram","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"green = data.map(d => d.g)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"greenbars = \"green\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"import {chart as greenHistogram} with {green as data, height, greenbars as color} from \"@llad/histogram-with-color-attribute\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"greenHistogram","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"blue = data.map(d => d.b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"bluebars = \"blue\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"import {chart as blueHistogram} with {blue as data, height, bluebars as color} from \"@llad/histogram-with-color-attribute\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"blueHistogram","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"md `## Colors vs channels\nWe want to look at the colors not the R,B,G components of the pixel so let's start treating the data a full colors. This can be slow depending on the number of pixels so lets just look at a subset and visualize it.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"somedata = data.slice(0,1000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"md `Is it helpful to sort this? Let's try sorting. This ended up being a rabbit hole exploring RGB vs hex colors and conversions.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"sorteddata = somedata.map( ({r,g,b,}) => d3.rgb(r,g,b) ).sort()\n// Note: can't just sort the data or make a shallow copy because these are D3 color objects. So this just recreates an array of objects then sorts them.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"md `Some of those sorting choices seem strange. As I researched, I found that this is not an easy problem to solve. so I'm going to stop.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"md `## Most Common Colors\nOk, now that I can sort, I was wondering about the most common colors. Will that help us define a good palette? So I will use a countBy function to find the most frequently occuring colors and sort to get the top 10.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"topColors = countBy(data, c => c.toString()).sort( (a,b) => b.count - a.count).slice(0,9)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"function countBy(items, groupName) {\n let counts = [];\n for (let item of items) {\n let name = groupName(item);\n let known = counts.findIndex(c => c.name == name);\n if (known == -1) {\n counts.push({name, count: 1});\n } else {\n counts[known].count++;\n }\n }\n return counts;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1287,"value":"swatches(topColors.map( (c,i) => c.name))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"md `Ok, not so useful at all, just found a bunch of shades of white. What I really need to do is group colors that are close together so I get a better sense of the range of colors.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"md `## Grouping Colors with Median Cut\nJust like [@kerryrodden](https://observablehq.com/@kerryrodden/extract-a-color-palette-from-an-image), I'm going to implement an median cut algorithm to find a palette for my image.\n\nFirst I need to find the color with the greatest variance.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"function greatestVariance(colors) {\n const dimensions = [\"r\", \"g\", \"b\"];\n const variances = dimensions.map(dimension =>\n d3.variance(colors, c => c[dimension])\n );\n return dimensions[d3.maxIndex(variances)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"greatestColor = greatestVariance(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"md `Right, based on the breaking down the color channels earlier, we could tell blue had the greatest variance.\n\nNext sort on blue and divide into two buckets.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"function bucket(data, color) {\n const sorteddata = data.map( ({r,g,b,}) => d3.rgb(r,g,b) ).sort((a, b) => a[color] - b[color])\n const median = Math.floor(sorteddata.length/2);\n \n return [ sorteddata.slice(0,median), sorteddata.slice(median+1) ]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"buckets = bucket(data,greatestColor)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1019,"value":"md `Great, two buckets of colors. So we want to know the average color in each of those buckets.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"function averageColor(colors) {\n const dimensions = [\"r\", \"g\", \"b\"];\n const means = dimensions.map(dimension =>\n d3.mean(colors, c => c[dimension])\n );\n return d3.rgb(...means);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1031,"value":"firstAverage = averageColor(buckets[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"swatches([averageColor(buckets[0]), averageColor(buckets[1])])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"md `Great, we've bucketed the colors and found a two color palette. Now we want to be configurable in how many colors we want to divide the full set of colors into.\n\nTo do that I'm going to create a recursive function that makes bucket up to some \"depth\" or how many times do I split each bucket?`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1205,"value":"function makeBuckets (colors, depth, current) {\n if (current == depth) return [colors];\n current++;\n const buckets = bucket(colors, greatestVariance(colors));\n return makeBuckets(buckets[0], depth, current)\n .concat(makeBuckets(buckets[1], depth, current)); \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1261,"value":"viewof depth = slider({\n min: 1,\n max: 6,\n step: 1,\n value: 3,\n title: \"Depth\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1225,"value":"swatches(makeBuckets(data,depth,0).map( b => averageColor(b) )); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"md `---\n# Appendix`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1184,"value":"function swatches(colors) {\n return html`${colors.map(c => `

`)}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1253,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"