29:null 2a:["$","title",null,{"children":"Color Sampling Test - ColorThief | Luc Iyer | Observable"}] 2f:T5a0,displayColors = function (img, colors) { return html`

${img}

Dominant Color

Color Palette

` }30:[{"id":"d794ab75ff179f71df0aa53764ae3bed45016da72d9703e4d7bf40957402435e8bd9d325ed91fe4a11e2df33972249131bea126a87bf1631f661d8e3be043303","href":"https://static.observableusercontent.com/files/d794ab75ff179f71df0aa53764ae3bed45016da72d9703e4d7bf40957402435e8bd9d325ed91fe4a11e2df33972249131bea126a87bf1631f661d8e3be043303","name":"5.JPG","type":"image/jpeg","lastModified":1580668978185.909,"size":278696},{"id":"875cce4eda057aa7dd0b095cf93636a7fbf86a4401a1365bf0da2eac40a8df0b52f8fa328d944ea49ca26cc9a71ec2fe932c5c636af5d83e2bca5d29c9052b59","href":"https://static.observableusercontent.com/files/875cce4eda057aa7dd0b095cf93636a7fbf86a4401a1365bf0da2eac40a8df0b52f8fa328d944ea49ca26cc9a71ec2fe932c5c636af5d83e2bca5d29c9052b59","name":"4.JPG","type":"image/jpeg","lastModified":1580668978185.909,"size":317102},{"id":"d91c766a5ac10298c176167e5c41e36f7f7bbac53a509b9c2f8315cfac62a888d9754dcad367be121fe97d198240326a670ce5e45dd28d6650968139c7af6a9e","href":"https://static.observableusercontent.com/files/d91c766a5ac10298c176167e5c41e36f7f7bbac53a509b9c2f8315cfac62a888d9754dcad367be121fe97d198240326a670ce5e45dd28d6650968139c7af6a9e","name":"3.JPG","type":"image/jpeg","lastModified":1580668978185.909,"size":458365},{"id":"809a019970dc9afae01385ac33ec9e2ba7e52a446318da11974f309f6b892161a68f4562dfad279dcb7585fa9fabb427e8c9803cbdbc26aa5d0dbcfd507eacfb","href":"https://static.observableusercontent.com/files/809a019970dc9afae01385ac33ec9e2ba7e52a446318da11974f309f6b892161a68f4562dfad279dcb7585fa9fabb427e8c9803cbdbc26aa5d0dbcfd507eacfb","name":"2.JPG","type":"image/jpeg","lastModified":1580668978185.909,"size":683820},{"id":"e8dec101ab89b8592b0bdbbd07c9c5067ea0644aacba654634935e411601c7a9cf23d9f6586508871445eab89671c94d9703e5bf3d4f9ad1f41d6b36191d9aac","href":"https://static.observableusercontent.com/files/e8dec101ab89b8592b0bdbbd07c9c5067ea0644aacba654634935e411601c7a9cf23d9f6586508871445eab89671c94d9703e5bf3d4f9ad1f41d6b36191d9aac","name":"1.JPG","type":"image/jpeg","lastModified":1580668978185.909,"size":140961}] 2d:{"id":"fb1f076193efc3a8","slug":"color-sampling-test-colorthief","title":"Color Sampling Test - ColorThief","thumbnail":"4769cd33d93889c115b35485d9253949622ff6ea309ab546035c436a29a5bc3f","access_level":"public","create_time":"$D2020-02-02T18:42:58.185Z","update_time":"$D2020-02-02T19:56:31.451Z","view_time":null,"first_public_time":"$D2020-02-02T19:56:50.269Z","has_unpublished_edits":null,"fork":true,"stars":5,"starred":false,"owner":{"type":"team","id":"4a11f53b6e79e15d","login":"luciyer","name":"Luc Iyer","avatar_url":"https://avatars-next.observableusercontent.com/12a0401692377e6f4616cade51744bbb6e99a4c9216533c99100291905568d25","tier":"starter_2024"},"version":950,"publish_version":950,"role":null,"authored":false,"authors":[{"type":"individual","id":"b4d77a79b064a6c9","login":"luciyer","name":"Luc Iyer","avatar_url":"https://avatars-next.observableusercontent.com/12a0401692377e6f4616cade51744bbb6e99a4c9216533c99100291905568d25","tier":null}],"members":[{"type":"individual","id":"b4d77a79b064a6c9","login":"luciyer","name":"Luc Iyer","avatar_url":"https://avatars-next.observableusercontent.com/12a0401692377e6f4616cade51744bbb6e99a4c9216533c99100291905568d25","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"3c295052d9793fec","slug":"miscellaneous","title":"Miscellaneous","owner":{"id":"4a11f53b6e79e15d","login":"luciyer","name":"Luc Iyer"}},"type":"notebook","body":{"title":"Color Sampling Test - ColorThief","cells":[{"id":0,"value":"md`# Color Sampling Test - ColorThief`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md`Capturing the colors of a set of images. Implementing [Color Thief](https://lokeshdhakar.com/projects/color-thief/). We will use a sample set of 5 images from a recent trip. Those are uploaded here as file attachments.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"image_urls = [\n await FileAttachment('1.JPG').url(),\n await FileAttachment('2.JPG').url(),\n await FileAttachment('3.JPG').url(),\n await FileAttachment('4.JPG').url(),\n await FileAttachment('5.JPG').url(),\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"md`#### Austin, TX`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"getColorInfo(image_urls[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"md`#### Somewhere on the Siuslaw River, OR`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"getColorInfo(image_urls[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"md`#### Just south of Brookings, OR`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"getColorInfo(image_urls[2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"md`#### Another from Brookings, B&W`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"getColorInfo(image_urls[3])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"md`#### Taken from Greenwood Terrace, North Berkeley`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"getColorInfo(image_urls[4])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"md`### Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"function loadImage(src) {\n return new Promise((resolve, reject) => {\n const img = new Image();\n img.addEventListener(\"load\", () => resolve(img));\n img.addEventListener(\"error\", err => reject(err));\n img.src = src;\n img.crossOrigin = \"anonymous\";\n });\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"getColorInfo = function(url) {\n return loadImage(url)\n .then(img => displayColors(img, { \n dominant: colorThief.getColor(img),\n palette: colorThief.getPalette(img, 6)\n })\n ).catch(err => console.error(err));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"function rgbString (array) {\n return 'rgb(' + array.join(', ') + ')';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"getHex = function (array) {\n let rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {\n const hex = x.toString(16)\n return hex.length === 1 ? '0' + hex : hex\n }).join('').toUpperCase();\n return rgbToHex(array[0], array[1], array[2]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`### Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"colorThief = new ColorThief();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"ColorThief = require('https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"