31:[] 2f:{"title":"Lab Palette Extraction of Actual Pixel Values","cells":[{"id":0,"value":"md`# Lab Palette Extraction of Actual Pixel Values\n\nK-Means clustering with perceptual color distance while minimizing distortions of the pure colors found in comics, computer-generated images, or other images with a large number of identical pixels.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1781,"value":"viewof imageUrl = getSelect(dOptions, 'Winnebego')","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"viewof smoothing","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"viewof K = select({title: \"Number of clusters (K):\", options: [2, 3, 4, 7, 9, 16, 32, 64], value: 7})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1758,"value":"md`### Circle-Packing of clustered colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1050,"value":"// adapted from https://observablehq.com/@d3/bubble-chart\nchart = {\n const root = pack(circlePackData);\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"font-size\", 10)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"text-anchor\", \"middle\");\n\n const leaf = svg.selectAll(\"g\")\n .data(root.leaves())\n .join(\"g\")\n .attr(\"transform\", d => `translate(${d.x + 1},${d.y + 1})`);\n\n leaf.append(\"circle\")\n .attr(\"id\", d => (d.leafUid = DOM.uid(\"leaf\")).id)\n .attr(\"r\", d => d.r)\n .attr(\"fill-opacity\", 0.7)\n .attr(\"fill\", d => d.data.color)\n\n leaf.append(\"clipPath\")\n .attr(\"id\", d => (d.clipUid = DOM.uid(\"clip\")).id)\n .append(\"use\")\n .attr(\"xlink:href\", d => d.leafUid.href);\n\n leaf.append(\"title\")\n .text(d => `${d.data.color}\\n${format(d.value)}`);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"// Run this cell to re-generate color clusters from random initialization\n// If it seems stuck after changing the input image, try changing the number of clusters (K).\nrc3 = cluster(5)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1761,"value":"md`### Treemap of clustered colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1390,"value":"// adapted from https://observablehq.com/@d3/treemap\nchart2 = {\n const root = treemap(treemapData);\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"font\", \"10px sans-serif\");\n\n const leaf = svg.selectAll(\"g\")\n .data(root.leaves())\n .join(\"g\")\n .attr(\"transform\", d => `translate(${d.x0},${d.y0})`);\n\n leaf.append(\"rect\")\n .attr(\"id\", d => (d.leafUid = DOM.uid(\"leaf\")).id)\n .attr(\"fill\", d => { /*while (d.depth > 1) d = d.parent;*/ return d.data.color; })\n .attr(\"fill-opacity\", 0.85)\n .attr(\"width\", d => d.x1 - d.x0)\n .attr(\"height\", d => d.y1 - d.y0);\n\n leaf.append(\"clipPath\")\n .attr(\"id\", d => (d.clipUid = DOM.uid(\"clip\")).id)\n .append(\"use\")\n .attr(\"xlink:href\", d => d.leafUid.href);\n\n leaf.append(\"title\")\n .text(d => `${d.data.color}\\n${format(d.value)}`);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1334,"value":"html`\n\n \n \n \n\n\n \n \n \n\n

${sourceTriple}	${posterTriple}	${poster2Triple}
Original sampled image, scaled larger to make it easier to see.	Posterized with aggregate cluster colors, which might not be in the original image.	Posterized with most-common cluster values, which are original image colors

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1265,"value":"md`## Problem\n\nCurrent K-Means palette extraction techniques use averaging, which works fine for photos or other images where each pixel value is different.\n\nThe problem explored here is: how to use K-Means to extract the pure, undistorted colors found in comics or other images with a large number of identical pixels?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1359,"value":"md`## Web images as datasets\n\nWeb images are often processed by scaling, smoothing, and compression, each of which can distort the original pixel values.\n\nSecurity efforts such as cross-origin resource sharing, can also make it difficult to find comic images on the web.\n\nThe menu above has links to a few sample input images.\n\nThe next cell contains the selected, full-sized downloaded image.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"img = await new Promise((resolve, reject) => {\n const img = new Image()\n img.onload = () => resolve(img);\n img.onerror = reject;\n img.crossOrigin = \"\"\n img.src = imageUrl;\n //img.style=`width:${25}%`\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"md`## Pixel sampling\nMost images contain too many pixels for in-notebook clustering so first we scale them down to a fixed width. \n\nScaling uses uniform sampling, by default, which does not distort the original pixel values, but typically does introduce aliasing artifacts or 'jaggies' in the scaled image. Smoothing can be applied to reduce aliasing artifacts, but it can distort the original pixel values.\n\nThe next cell contains the sampled image data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"source = { \n const canvas = document.createElement('canvas')\n canvas.width = fixedWidth \n canvas.height = scaledHeight \n const ctx = canvas.getContext('2d')\n\n if(smoothing === false){\n // turn off image aliasing\n ctx.msImageSmoothingEnabled = false;\n ctx.mozImageSmoothingEnabled = false;\n ctx.webkitImageSmoothingEnabled = false;\n ctx.imageSmoothingEnabled = false;\n }\n\n ctx.drawImage(img, 0, 0, fixedWidth, scaledHeight)\n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"md`## Initial Color Analysis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"md`To get started, we can try counting identical pixels in the scaled image and plotting a color histogram.\n\nThe slider lets you filter out bins with very small counts.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"pixels = {\n const ctx = source.getContext('2d')\n const raw =ctx.getImageData(0, 0, source.width, source.height).data\n const pixels = []\n for (var i = 0; i < raw.length; i+=4) {\n const rgbc = d3.rgb(raw[i],raw[i+1],raw[i+2])\n const lc = d3.lab(rgbc)\n pixels.push({rgb: rgbc, lab:lc})\n }\n return pixels\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1381,"value":"pixelIndex = colorIndex(pixels)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1427,"value":"viewof tooSmall","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"pindexPlotData = {\n const kvp = Object.entries(pixelIndex).sort((a, b) => b[1].count - a[1].count).filter(pe => pe[1].count > tooSmall)\n return kvp.map (kv => {\n const ks = kv[0].split(',')\n return ({name: kv[0], rgb:d3.color('rgb(' + ks[0] + ',' + ks[1] + ',' + ks[2] + ')'), count: kv[1].count, vec: kv[1].vec})\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"inputColorHistogram = {\n const colorCount = pindexPlotData.length\n const svg = d3.select(DOM.svg(chartWidth, chartHeight))\n .style(\"fill\",\"white\")\n svg.append('g').classed('colors', true)\n .selectAll('rect')\n .data(pindexPlotData.map(d => d.rgb))\n .enter()\n .append('rect')\n .attr('x', (d,i) => xHistScale(i))\n .attr('y', (d,i) => chartHeight - yHistScale(pindexPlotData[i].count))\n .attr('width', chartWidth/ colorCount)\n .attr('height', (d,i) => yHistScale(pindexPlotData[i].count))\n .style('fill', d => d)\n //.style('stroke', 'black')\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"md`The color histogram of the pixel values is not that informative for several reasons:\n- similar colors are split across many different bins,\n- it has a skewed aspect ratio, often with a long tail when pixel values differ a lot,\n- bar heights can differ dramatically when a few colors dominate, making it difficult to see variation in the small bars,\n- bars depicting the count of white pixels disappear into the background.\n\nGrouping similar colors allows us to create the circle packing and treemap charts above, which allow us to better appreciate the structure of the color distributions.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"md`## Naive K-Means Clustering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":743,"value":"md`An obvious algorithm to group values is naive K-Means, https://en.wikipedia.org/wiki/K-means_clustering, because it is pretty simple to understand and implement (the code is provided below) and it usually converges after just a few iterations. \n\n### Setting K\nAn obvious problem with K-Means, however, is that the algorithm expects us to supply the number of clusters, K, as an input parameter, even though we don't know how many color clusters are in the input. For now we will assume that there are seven color clusters and provide a menu to change K.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"md`\n### Algorithm\n\nThe algorithm consists of repeatedly \n1. *assigning* colors to clusters, and\n2. *updating* the cluster aggregate colors.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"function* cluster (repeatN) {\n let idata = initializeData()\n let centroids = update(idata)\n \n while(repeatN > 0){\n const assignments = assign(idata, centroids)\n const noffsets = assignments.minOffsets\n const minDistSum = assignments.minDists.reduce((p, c, i) => p + c, 0)\n noffsets.forEach((o,i) => idata[i].cluster = o)\n centroids = update(idata)\n repeatN = repeatN - 1\n yield {data: idata, centroids: centroids, error: minDistSum}\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1766,"value":"md`\n### Assigning \n\nThe initial assignment of colors to clusters can be random, but once intialized the cluster with the *closest* aggregate color is chosen.\n\nBut how to best determine distance between colors?\n\nIn the simplest implementation, a distance between two colors can be calculated as the Euclidean distance between the red, green, and blue values of each color.\n\nWhile RGB color space is great for monitors and digital images, it is not a 'perceptual color space' in that\nequally-spaced samples in RGB do not look like equally-spaced colors.\n\nThe approach used here is to first convert the RGB colors into the LAB perceptual color space and then calculate Euclidean distance on the transformed values.\n\nFor each pixel, distances to the K cluster colors are calculated and the cluster with the minimum distance is chosen.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"assign = (idata, centroids) => \n{\n const minDists = idata.map(d => {\n const distances = d3.range(K).map(k => distanceLab(centroids[k], d.lab))\n const minDists = distances.reduce((p, c, i) => p <= c ? p : c);\n return minDists \n })\n const minOffsets = idata.map(d => {\n const distances = d3.range(K).map(k => distanceLab(centroids[k], d.lab))\n const minOffsets = distances.reduce((iMin, x, i, arr) => x < arr[iMin] ? i : iMin, 0);\n return minOffsets;\n })\n return { minDists, minOffsets }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1580,"value":"md`### Updating \n\nUpdating consists of finding a new aggregate color to represent the colors within each cluster. \n\nIn the simple RGB implementation, aggregate colors can be determined by averaging the red, green, and blue values of each pixel in the cluster.\n\nInstead, we determine aggregate cluster colors by averaging the L, A, B values of the pixels in each cluster.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"update = (idata) => d3.range(K).map(k => {\n const farray = idata.filter(d => d.cluster === k)\n return ({l:d3.mean(farray, f => f.lab.l), a:d3.mean(farray, f => f.lab.a), b: d3.mean(farray, f => f.lab.b)})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1588,"value":"md`## Palette Extraction\n\nAfter each update step in K-Means clustering, each cluster has an aggregate color that is the mean (in LAB color space) of each of its pixel values. \n\nMost palette-extraction techniques consider the aggregate colors as 'palette' colors, but because they are means, the aggregate colors are unlikely to exist in the input image! \n\nInstead of using the means to represent each cluster, we use the RGB values of the most common pixel value in each cluster.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"md`The first image and color histogram below show the K-means cluster aggregate colors, which are means (in LAB space) of the colors in each cluster.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"poster = { \n const canvas = document.createElement('canvas')\n canvas.width = fixedWidth\n canvas.height = scaledHeight\n const ctx = canvas.getContext('2d')\n\n const myImageData = ctx.createImageData(fixedWidth, scaledHeight);\n posterize(rc3).forEach((v,i) => myImageData.data[i] = v)\n ctx.putImageData(myImageData, 0, 0);\n\n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"centroidSwatches = {\n const colorCount = sortedClusterCounts.length\n const svg = d3.select(DOM.svg(chartWidth, chartHeight))\n .style(\"fill\",\"white\")\n\n svg.append('g').classed('colors', true)\n .selectAll('rect')\n .data(centroidColors.map(c => d3.rgb(d3.lab(c.l,c.a,c.b))))\n .enter()\n .append('rect')\n .attr('x', (d,i) => xCentroidScale(i)) //i*chartWidth / colorCount)\n .attr('y', (d,i) => chartHeight - yCentroidScale(sortedClusterCounts[i]))\n .attr('width', chartWidth/ colorCount)\n .attr('height', (d,i) => yCentroidScale(sortedClusterCounts[i]))\n .style('fill', d => d)\n //.style('stroke', 'black')\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":945,"value":"md`The next image and color histogram below show the RGB value of the most common color in each cluster. Unlike the K-Means centroid colors, these are actual input colors.\n\nThese re-mapped input images are shown above in a larger scale to make them easier to compare.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"poster2 = { \n const canvas = document.createElement('canvas')\n canvas.width = fixedWidth\n canvas.height = scaledHeight\n const ctx = canvas.getContext('2d')\n\n const myImageData = ctx.createImageData(fixedWidth, scaledHeight);\n posterize2(rc3).forEach((v,i) => myImageData.data[i] = v)\n ctx.putImageData(myImageData, 0, 0);\n\n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1609,"value":"pixelSwatches = {\n const colorCount = sortedClusterCounts.length\n const svg = d3.select(DOM.svg(chartWidth, chartHeight))\n .style(\"fill\",\"white\")\n\n svg.append('g').classed('colors', true)\n .selectAll('rect')\n //.data(centroidColors.map(c => d3.rgb(d3.lab(c.l,c.a,c.b)))) const cc = d3.rgb(clusterColorIndexCentroids[cco])\n .data(clusterCountOffsets.map(c => d3.rgb(clusterColorIndexCentroids[c])))\n .enter()\n .append('rect')\n .attr('x', (d,i) => xCentroidScale(i)) \n .attr('y', (d,i) => chartHeight - yCentroidScale(sortedClusterCounts[i]))\n .attr('width', chartWidth/ colorCount)\n .attr('height', (d,i) => yCentroidScale(sortedClusterCounts[i]))\n .style('fill', d => d)\n //.style('stroke', 'black')\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"md`## Cell assignments`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1662,"value":"md`### Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"fixedWidth = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"chartWidth = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"chartHeight = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":1057,"value":"width = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":1667,"value":"md`### Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"originalWidth = img.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"originalHeight = img.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"scaledHeight = parseInt(originalHeight * fixedWidth / originalWidth) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"md`Initial random assignment of each pixel to a cluster. (Note that because this is random, there is a chance that a cluster might not be assigned any pixels.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"randomClusters = pixels.map(() => getRandomInt(K))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1677,"value":"md`### Cluster support`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"//centroidColors = rc3.centroids.map(c => getCentroidColor(c))\n//centroidColors = clusterCountOffsets.map(i => getCentroidColor(rc3.centroids[i]))\ncentroidColors = clusterCountOffsets.map(i => rc3.centroids[i])","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"clusterColorMaps = d3.range(K).map(k => rc3.data.filter(rcc => rcc.cluster === k)) //.sort((a, b) => b.length - a.length)\n//.map(d => ({r:d.r,g:d.g,b:d.b,opacity:d.opacity})))","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"sclusterColorIndexes = clusterColorIndexes.map(ccm => ccm.sort((a,b) => b[1] - a[1]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"clusterColorIndexes = clusterColorMaps.map(ccm => Object.entries(colorIndex(ccm))).sort((a,b) => b[1] - a[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"clusterColorIndexCentroids = sclusterColorIndexes.map(cci => {\n if(cci[0]){\n const col = cci[0][0].split(',')\n const rgbc = d3.rgb(col[0],col[1],col[2])\n return d3.lab(rgbc)\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"clusterCounts = clusterColorMaps.map(ccm => ccm.length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"clusterCountOffsets = argsort(clusterCounts)","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"sortedClusterCounts = clusterCountOffsets.map(i => clusterCounts[i])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1688,"value":"md`### D3 Chart support`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1069,"value":"circlePackData = {\n const data2 = []\n sclusterColorIndexes.forEach((cci, i) => cci.forEach(a => {\n const ca = a[0].split(',')\n const c = d3.rgb(ca[0],ca[1],ca[2])\n data2.push({name: a[0], color:c, value: a[1].count, group: i})\n }))\n \n return data2\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1397,"value":"treemapData = ({\n name: 'image',\n children: sclusterColorIndexes.map((cci, i) => ({name: ''+i, color: d3.rgb(clusterColorIndexCentroids[i]), children: cci.map(a => {\n const ca = a[0].split(',')\n const c = d3.rgb(ca[0],ca[1],ca[2])\n return({name: a[0], color:c, value: a[1].count, group: i})\n })\n}))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1669,"value":"md`### Hidden cells\n\nThese get hidden when included in the table above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1326,"value":"sourceTriple = tripleSource(source)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1328,"value":"posterTriple = tripleSource(poster)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1331,"value":"poster2Triple = tripleSource(poster2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":752,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"initializeData = () => pixels.map((d,i) => ({...d, cluster: randomClusters[i], offset:i}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"posterize = (rc) => {\n // for each pixel, replace its rgb values with the rgb values of it's cluster\n const raw = []\n rc.data.forEach(d => {\n const Lc = rc.centroids[d.cluster]\n const lc = d3.lab(Lc.l, Lc.a, Lc.b)\n const cc = d3.rgb(lc)\n raw.push(parseInt(cc.r + 0.5))\n raw.push(parseInt(cc.g+ 0.5))\n raw.push(parseInt(cc.b+ 0.5))\n raw.push(255)\n })\n return raw\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":959,"value":"posterize2 = (rc) => {\n // for each pixel, replace its rgb values with the rgb values of clusterColorIndexCentroids\n const raw = []\n rc.data.forEach(d => {\n const cc = d3.rgb(clusterColorIndexCentroids[d.cluster])\n raw.push(parseInt(cc.r + 0.5))\n raw.push(parseInt(cc.g+ 0.5))\n raw.push(parseInt(cc.b+ 0.5))\n raw.push(255)\n })\n return raw\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1317,"value":"// scale up a small canvas\nfunction tripleSource (src) {\n const canvas = document.createElement('canvas')\n canvas.width = fixedWidth *3\n canvas.height = scaledHeight *3\n const ctx = canvas.getContext('2d')\n ctx.msImageSmoothingEnabled = false;\n ctx.mozImageSmoothingEnabled = false;\n ctx.webkitImageSmoothingEnabled = false;\n ctx.imageSmoothingEnabled = false;\n ctx.drawImage(src, 0, 0, fixedWidth*3, scaledHeight*3)\n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"xCentroidScale = d3.scaleLinear().range([0,chartWidth]).domain([0, rc3.centroids.length])","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"yCentroidScale = d3.scaleLinear().range([0,chartHeight]).domain([0, d3.max(clusterCounts)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"xHistScale = d3.scaleLinear().range([0, chartWidth]).domain([0, pindexPlotData.length])","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"yHistScale = d3.scaleLinear().range([0, chartHeight]).domain([0, d3.max(pindexPlotData.map(d => d.count))])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1712,"value":"md`### D3 Chart support`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1052,"value":"format = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1055,"value":"pack = data => d3.pack()\n .size([width - 2, height - 2])\n .padding(0)\n (d3.hierarchy({children: data})\n .sum(d => d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1391,"value":"treemap = data => d3.treemap()\n .tile(d3['treemapSquarify'])\n .size([width, height])\n .padding(0)\n .round(true)\n (d3.hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"import {checkbox, select, radio, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1778,"value":"import {viewof smoothing, viewof tooSmall, dOptions, getSelect, colorIndex, distanceLab, argsort, getRandomInt} from '@jonhelfman/lab-palette-extraction-base'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}