29:null 2a:["$","title",null,{"children":"Gridviz image playground | Joe Davies | Observable"}] 2f:T543,sequentialSchemes = [ ["YlGnBu", d3.interpolateYlGnBu], ["BuGn", d3.interpolateBuGn], ["BuPu", d3.interpolateBuPu], ["Blues", d3.interpolateBlues], ["PuBu", d3.interpolatePuBu], ["Cividis", d3.interpolateCividis], ["Cool", d3.interpolateCool], ["CubehelixDefault", d3.interpolateCubehelixDefault], ["GnBu", d3.interpolateGnBu], ["Greens", d3.interpolateGreens], ["Greys", d3.interpolateGreys], ["Inferno", d3.interpolateInferno], ["Magma", d3.interpolateMagma], ["Oranges", d3.interpolateOranges], ["Blues", d3.interpolateBlues], ["OrRd", d3.interpolateOrRd], ["Plasma", d3.interpolatePlasma], ["PuBuGn", d3.interpolatePuBuGn], ["PuRd", d3.interpolatePuRd], ["Purples", d3.interpolatePurples], ["Reds", d3.interpolateReds], ["Eurostat - sequential multihue", interpolatePalette(rawPalettes.Multihue1)], [ "Eurostat - sequential multihue 2", interpolatePalette(rawPalettes.Multihue2) ], ["Eurostat - A1", interpolatePalette(rawPalettes.A1)], ["Eurostat - A2", interpolatePalette(rawPalettes.A2)], ["Eurostat - B1", interpolatePalette(rawPalettes.B1)], ["Eurostat - B1", interpolatePalette(rawPalettes.B1)], ["Eurostat - B2", interpolatePalette(rawPalettes.B2)], ["Eurostat - C1", interpolatePalette(rawPalettes.C1)], ["Eurostat - C2", interpolatePalette(rawPalettes.C2)] ]30:Tae2,rawPalettes = ({ A1: [ "#E9ECF6", "#D4DAF0", "#C1C9EB", "#A8B4E6", "#93A2DC", "#7C90D6", "#677CD2", "#5169BE", "#3C57B0", "#2644A7", "#15246B" //"#081132" ], A2: [ "#F7F4E9", "#EFE9D3", "#E7DEBC", "#DFD3A6", "#D8C890", "#D0BD7A", "#C6AF5D", "#C0A74D", "#B89C37", "#B09121", "#856B0D" //"#352A03" ], B1: [ "#F8EEF8", "#F0DDF2", "#E9CCEB", "#E2BBE5", "#DEB3E2", "#D39AD7", "#CE8ED4", "#C578CA", "#BD67C4", "#B656BD", "#723078" //"#371A39" ], B2: [ "#F7E8EF", "#EFD0DE", "#E7B9CE", "#DF96B8", "#D78AAE", "#D472A0", "#C75B8D", "#BF447D", "#B72C6C", "#AF155C", "#7F0A45" //"#35031A" ], C1: [ "#EBF6EB", "#D6ECD6", "#C2E3C2", "#ADDBAD", "#99D099", "#85C685", "#70BD70", "#60B560", "#47AA47", "#33A033", "#177217" //"#053005" ], C2: [ "#F7EFE8", "#EEDFD1", "#E6CFBA", "#DDBFA3", "#D9B08D", "#CC9D74", "#C18E62", "#BB7D46", "#B36F2F", "#AA5F18", "#733E0C" //"#331A03" ], Multihue1: ["#FFEB99", "#C7E9B4", "#6BCDBB", "#41B6C4", "#104F99", "#17256B"], Multihue2: [ "#FFF8A6", "#F1F57D", "#E4EA65", "#B7DE6A", "#9DD18B", "#69CC80", "#4BBFA0", "#3DA4A8", "#3A91A5", "#396FA8", "#2644A7", "#0D1878", "#060C3B" ], BA: [ "#723078", "#B656BD", "#C578CA", "#D39AD7", "#E2BBE5", "#F0DDF2", "#F5F5F5", "#D4DAF0", "#A8B4E6", "#7C90D6", "#5169BE", "#2644A7", "#15246B" ], BC: [ "#723078", "#B656BD", "#C578CA", "#D39AD7", "#E2BBE5", "#F0DDF2", "#F5F5F5", "#D6ECD6", "#ADDBAD", "#85C685", "#60B560", "#33A033", "#177217" ], CA: [ "#733E0C", "#AA5F18", "#BB7D46", "#CC9D74", "#DDBFA3", "#EEDFD1", "#F5F5F5", "#D4DAF0", "#A8B4E6", "#7C90D6", "#5169BE", "#2644A7", "#15246B" ], AC: [ "#856B0D", "#B09121", "#C0A74D", "#D0BD7A", "#DFD3A6", "#EFE9D3", "#F5F5F5", "#D6ECD6", "#ADDBAD", "#85C685", "#60B560", "#33A033", "#177217" ], ESTAT: [ "#856B0D", "#B09121", "#C0A74D", "#D0BD7A", "#DFD3A6", "#EFE9D3", "#F5F5F5", "#D4DAF0", "#A8B4E6", "#7C90D6", "#5169BE", "#2644A7", "#15246B" ], Diverging1: [ "#997A00", "#E2C822", "#FEEA98", "#BEEBBE", "#7FCCBB", "#208486" ], Climate: [ "#75174C", "#D42027", "#BF6128", "#EDB37A", "#E6D6A1", "#B1E0E6", "#4DBEBF", "#4A86C6", "#105099", "#3D2B7C" ] })31:[] 2d:{"id":"0a51240cfcd20364","slug":"gridviz-image-playground","title":"Gridviz image playground","thumbnail":"a2576e2f1b268304a9d30d0f17031b4399a458664a575bbbe58feef22a550fb2","access_level":"public","create_time":"$D2025-12-22T13:28:40.073Z","update_time":"$D2025-12-24T13:22:33.128Z","view_time":null,"first_public_time":"$D2025-12-22T18:27:32.630Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"25fee90bb47fd709","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":"starter_2024"},"version":304,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc51b4f7240f0553","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":null}],"members":[{"type":"team","id":"25fee90bb47fd709","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":"starter_2024","role":"editor"},{"type":"individual","id":"dc51b4f7240f0553","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Gridviz image playground","cells":[{"id":0,"value":"# Gridviz image playground","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"Upload an image to play around with it in [gridviz](https://github.com/eurostat/gridviz).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"viewof imageFile = Inputs.file({\n label: \"Upload image\",\n accept: \"image/*\",\n multiple: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"viewof colorRamp = Inputs.select(\n new Map([...sequentialSchemes, ...divergingSchemes]),\n {\n value: sequentialSchemes[0],\n label: \"Colour ramp\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"viewof cellSize = Inputs.range([1, 10], {\n label: \"Cell size\",\n step: 1,\n value: style == squareColorStyle ? 1 : 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"viewof scale = Inputs.radio(new Map(scaleOptions), {\n label: \"Scale\",\n value: scaleOptions[0][1]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"viewof style = Inputs.radio(\n new Map([\n [\"Squares\", squareColorStyle],\n [\"Lego\", legoStyle],\n [\"Ridgelines\", joyplotStyle],\n [\"Pillars\", pillarStyle],\n [\"Mosaic\", mosaicStyle],\n [\"Dot Density\", dotDensityStyle],\n [\"Tanaka\", tanakaStyle]\n ]),\n {\n label: \"Select a style\",\n value: squareColorStyle // Set the default value to tanakaStyle\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"container = DOM.element(\"div\", {\n id: \"map\",\n style: `width:${width}px;height:${Math.max(width / 2, 600)}px`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"map = new gridviz.Map(container, {\n x: imageData.width / 2,\n y: imageData.height / 2,\n z: 2\n}).addZoomButtons()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"dataset = new gridviz.JSGrid(\n cellSize, // resolution\n gridCells // generated from image\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"gridLayer = new gridviz.GridLayer(dataset, [], {\n cellInfoHTML: (c) => `Pixel value: ${c.value}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"update = {\n map.layers = [gridLayer];\n gridLayer.styles = style;\n map.redraw();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"## styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"squareColorStyle = [\n // return new gridviz.ShapeColorSizeStyle({\n // color: (cell) => {\n // return colorScale(cell.value);\n // },\n // blendOperation: (zf) => (zf < 50 ? \"multiply\" : \"source-over\")\n // });\n\n new gridviz.SquareColorWebGLStyle({\n tFun: (cell, resolution, z, viewScale) => {\n //pixel value to t value\n const v = cell.value;\n return tScale(v);\n },\n color: (t) => colorRamp(t) // t value to color value\n })\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"legoStyle = gridviz.LegoStyle.get(\n (cell) => cell.value,\n [0, 42.5, 85, 127.5, 170, 212.5, 254],\n [\n \"#FFFFFF\", // white\n \"#E4CD9E\", // tan\n \"#F2CD37\", // yellow\n \"#FE8A18\", // orange\n \"#C91A09\", // red\n \"#1B1B1B\", // black\n \"#FFFFFF\" // overflow / safety\n ]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"joyplotStyle = [\n new gridviz.JoyPlotStyle({\n height: (c, r, z, scaleFunction) => scaleFunction(c.value),\n viewScale: gridviz.viewScale({\n valueFunction: (c) => +c.value,\n maxSizeFactor: 5,\n stretching: gridviz.powerScale(0.4)\n }),\n lineColor: () => \"white\",\n lineWidth: (y, ys, r, z) => 0.1 * r,\n fillColor: () => \"black\"\n })\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"pillarStyle = [\n new gridviz.PillarStyle({\n height: (cell, resolution, z) => (cell.value === 255 ? 0 : 0.3 * cell.value)\n // simple: (resolution, z) => z > 1000\n })\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"mosaicStyle = [\n new gridviz.MosaicStyle({\n color: (cell) => {\n if (cell.value == 255) return null;\n if (cell.value > 200) return \"#993404\";\n else if (cell.value > 150) return \"#d95f0e\";\n else if (cell.value > 100) return \"#fe9929\";\n else if (cell.value > 50) return \"#fec44f\";\n else if (cell.value > 20) return \"#fee391\";\n else return \"#ffffd4\";\n }\n })\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"dotDensityStyle = [\n new gridviz.DotDensityStyle({\n dotNumber: (c, r, z) => (c.value / 255) * (50 / z),\n dotSize: (r, z) => 0.05 * z,\n color: (cell) => (cell.value == 255 ? null : \"#FF5733\")\n })\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"tanakaStyle = [\n new gridviz.ShapeColorSizeStyle({\n color: (cell) => {\n const v = cell.value;\n if (v == 255) return null;\n const breaks = [10, 60, 100, 150, 200];\n const colors = [\n \"#ffffd4\",\n \"#fee391\",\n \"#fec44f\",\n \"#fe9929\",\n \"#d95f0e\",\n \"#993404\"\n ];\n\n for (let i = 0; i < breaks.length; i++) {\n if (v < breaks[i]) return colors[i];\n }\n\n return colors[colors.length - 1];\n },\n blendOperation: (zf) => (zf < 50 ? \"multiply\" : \"source-over\")\n }),\n new gridviz.SideTanakaStyle({\n classifier: (cells) => {\n return (c) => {\n const v = c.value;\n const breaks = [10, 60, 100, 150, 200];\n\n for (let i = 0; i < breaks.length; i++) {\n if (v < breaks[i]) return i + 1;\n }\n };\n },\n width: (side, sideValue, resolution, z, sidesScale) =>\n (Math.abs(sideValue) * z) / 2,\n limit: \"steep\" // none step steep\n //revert: true,\n })\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"## image to cells","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"imageData = {\n if (!imageFile) return null;\n\n const blob = await imageFile.blob();\n\n const img = new Image();\n img.src = URL.createObjectURL(blob);\n await img.decode();\n\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n\n canvas.width = img.width;\n canvas.height = img.height;\n ctx.drawImage(img, 0, 0);\n\n // renamed to avoid circular dependency\n const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n\n URL.revokeObjectURL(img.src);\n\n return {\n data: imgData.data,\n width: imgData.width,\n height: imgData.height\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"gridCells = {\n if (!imageData) return [];\n\n const { data, width, height } = imageData;\n\n const cells = [];\n\n for (let y = 0; y < height; y += cellSize) {\n for (let x = 0; x < width; x += cellSize) {\n let r = 0,\n g = 0,\n b = 0,\n n = 0;\n\n for (let yy = y; yy < Math.min(y + cellSize, height); yy++) {\n for (let xx = x; xx < Math.min(x + cellSize, width); xx++) {\n const i = (yy * width + xx) * 4;\n r += data[i];\n g += data[i + 1];\n b += data[i + 2];\n n++;\n }\n }\n\n if (!n) continue;\n\n r /= n;\n g /= n;\n b /= n;\n\n const value = Math.round(0.299 * r + 0.587 * g + 0.114 * b);\n\n const type = value < 85 ? \"a\" : value < 170 ? \"b\" : \"c\";\n\n cells.push({\n x,\n y: height - y - cellSize, // flip Y\n type,\n value\n });\n }\n }\n\n return cells;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"## Colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"scaleOptions = [\n [\"Linear\", d3.scaleLinear()],\n [\"Square root\", d3.scaleSqrt()],\n [\"Symlog\", d3.scaleSymlog()]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"tScale = scale\n .domain([0, 255]) // max/min\n .range([0, 1])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"divergingSchemes = [\n [\"RdBu\", d3.interpolateRdBu],\n [\"PiYG\", d3.interpolatePiYG],\n [\"BrBG\", d3.interpolateBrBG],\n\n [\"PRGn\", d3.interpolatePRGn],\n\n [\"PuOr\", d3.interpolatePuOr],\n [\"Eurostat - diverging\", interpolatePalette(rawPalettes.Diverging1)],\n [\"Eurostat - blue-brown\", interpolatePalette(rawPalettes.ESTAT)],\n [\"Eurostat - Climate\", interpolatePalette(rawPalettes.Climate)],\n [\"Eurostat - AC\", interpolatePalette(rawPalettes.AC)],\n [\"Eurostat - BA\", interpolatePalette(rawPalettes.BA)],\n [\"Eurostat - BC\", interpolatePalette(rawPalettes.BC)],\n [\"Eurostat - CA\", interpolatePalette(rawPalettes.CA)]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"interpolatePalette = (colors) => {\n return (t) =>\n d3.piecewise(d3.interpolateLab, colors)(Math.min(Math.max(0, t), 1));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"gridviz = require(\"gridviz@3.0.31\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"