29:null 2a:["$","title",null,{"children":"Brushed Image View Example 3 | Jonathan Helfman | Observable"}] 2f:[] 2d:{"id":"3451aeea5a3efc0b","slug":"brushed-image-view-example-3","title":"Brushed Image View Example 3","thumbnail":"7938311d6a8e6b95fdc34fb556aa5fe4b9d589c657bfa69460a636c6d6c1625e","access_level":"public","create_time":"$D2020-05-09T18:46:10.635Z","update_time":"$D2020-05-23T23:46:52.810Z","view_time":null,"first_public_time":"$D2020-05-09T21:21:51.686Z","has_unpublished_edits":null,"fork":{"id":"ae8ea788a08f990a","slug":"brushed-image-view-example-2","title":"Brushed Image View Example 2","owner":{"id":"6c3b7072b5e94b97","login":"jonhelfman","name":"Jonathan Helfman"}},"stars":1,"starred":false,"owner":{"type":"team","id":"6c3b7072b5e94b97","login":"jonhelfman","name":"Jonathan Helfman","avatar_url":"https://avatars-next.observableusercontent.com/a404535763c16060490629d896d876b5b4cea8c603c4993b2aaed749a15b041a","tier":"starter_2024"},"version":248,"publish_version":248,"role":null,"authored":false,"authors":[{"type":"individual","id":"ba5c813f0f621f19","login":"jonhelfman","name":"Jonathan Helfman","avatar_url":"https://avatars-next.observableusercontent.com/a404535763c16060490629d896d876b5b4cea8c603c4993b2aaed749a15b041a","tier":null}],"members":[{"type":"individual","id":"ba5c813f0f621f19","login":"jonhelfman","name":"Jonathan Helfman","avatar_url":"https://avatars-next.observableusercontent.com/a404535763c16060490629d896d876b5b4cea8c603c4993b2aaed749a15b041a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"7df3a3a3dfebab73","slug":"palette-extraction","title":"Palette Extraction","owner":{"id":"6c3b7072b5e94b97","login":"jonhelfman","name":"Jonathan Helfman"}},"type":"notebook","body":{"title":"Brushed Image View Example 3","cells":[{"id":0,"value":"md`# Brushed Image View Example 3\n\nAn example of using brushedImage from https://observablehq.com/@jonhelfman/brushed-image-view\n\nbrushedImage is an Observable view that displays an image and returns the currently-selected region as an array: ${brushedImage.toString()}.\n\nClick and drag in the image to specify a new region or select from the menu, which uses the setRegion() function to set the brushedImage's value and brush.\n\nThe getPatch() function returns the selected region of the image as a canvas.\n\nThe getPatchPixels() function returns the selected region of the image as an array of color values, while the summarizePatch() function counts distinct colors.\n\nHere the distinct colors in the selected patch are shown in the circleChart and treemap, sized by count and\ngrouped with a perceptual color index.\n\nHover over the colored regions to see the color values in hex.\n\nYou can load your own image, below, but the names of the regions in the menu will no longer be meaningful.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"brushedImage","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"viewof regionSelection = select({\n description: \"Choose a region of the image, or click and drag over the image\",\n options: regionNames,\n multiple: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"html`\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

${circleChart(treemapData, 300, 200)}
${viewof brushedImage}	${selectedPatch}
${colorTreemap(treemapData, 300, 100)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"viewof colorPrecision = slider({\n min: -50, \n max: -10, \n step: 1, \n value: -20, \n title: \"Color Precision\", \n description: \"Positive values specify fixed decimal positions for JCh values. Negative values specify a bin width used to decrease precision by binning.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"viewof levels","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"viewof minimumPrecision","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof brushedImageInput = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl:\n 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`### Define a few regions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"face = [146, 113, 228, 207]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"hands = [85, 441, 240, 557]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"smile = [162, 180, 198, 194]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"road = [23, 267, 71, 346]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"backgroundLeft = [8, 65, 113, 223]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"backgroundRight = [291, 63, 396, 221]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"regions = [face, smile, hands, road, backgroundLeft, backgroundRight]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"regionNames = [\"face\", \"smile\", \"hands\", \"road\", \"background left\", \"background right\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"{\n const region = regions[ regionNames.indexOf(regionSelection)]\n setRegion([x.invert(region[0]), y.invert(region[1]), x.invert(region[2]), y.invert(region[3])])\n return md`Handle region selection`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"function handleRegionSelection (regionName) {\n setRegion(regions[ regionNames.indexOf(regionName)])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"viewof brushedImage","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"pindex = summarizePatch(getPatchPixels(brushedImageInput, { x0:x(brushedImage[0]), y0:y(brushedImage[1]), x1:x(brushedImage[2]), y1:y(brushedImage[3]) }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"tindex = {\n let tindex = pindex\n const precGap = (colorPrecision - minimumPrecision) / levels;\n const precs = d3.range(levels + 1).map(l => colorPrecision - precGap * l)\n precs.forEach(p => tindex = getTindex(tindex, p))\n return tindex\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"treemapData = ({\n name: 'image',\n //children: pindex.map((c, i) => ({name: ''+i, color: c.c, count: c.count}))\n children: tindex\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import { viewof brushedImage, patchPixelIndex, selectedPatch, setRegion, x, y } with {brushedImageInput as brushedImageInput} from '@jonhelfman/brushed-image-view'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"import { circleChart, colorTreemap, getTindex, viewof levels, viewof minimumPrecision } from '@jonhelfman/image-chopper-deeper-hierarchy'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"import { imageInput } from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"import { cindex, getKey, intern, clear } from '@jonhelfman/perceptual-color-index'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"import { getPatchPixels, summarizePatch } from '@jonhelfman/image-chopper-with-index'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"import {select, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"d3 = require(\"d3@5\", \"d3-random@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"