2b:null 2c:["$","title",null,{"children":"HSL Image Decomposition | Andrew Mollica | Observable"}] 31:T717,chart = { const svg = d3.create('svg') .attr('width', w + marginLeft + marginRight) .attr('height', h + marginTop + marginBottom); const g = svg.append('g') .attr('transform', `translate(${marginLeft}, ${marginTop})`); g.append('g') .attr('transform', `translate(0, ${h})`) .call(xAxis) .call(g => g.append('text') .attr('x', w) .attr('y', -6) .style('text-anchor', 'end') .text('Lightness')) g.append('g') .call(yAxis) .call(g => g.append('text') .attr('transform', 'rotate(-90)') .attr('y', 6) .attr('dy', '0.71em') .style('text-anchor', 'end') .text('Saturation')); const treemaps = g.selectAll('.treemap').data(binnedColorData).join('g') .attr('class', 'treemap'); treemaps .attr('transform', (d) => { const size = sizeScale(d.overallFrequency); const xShift = xScale.bandwidth() * (1 - size) / 2; const yShift = yScale.bandwidth() * (1 - size) / 2; return `translate(${(xScale(d.lightness) + xShift)},${(yScale(d.saturation) + yShift)})`; }); const rects = treemaps.selectAll("rect") .data(function(d) { const size = sizeScale(d.overallFrequency); const dx = xScale.bandwidth(); const dy = yScale.bandwidth(); const data = treemap(d, [dx * size, dy * size]); return data.children; }) .join('rect') .filter(function(d) { return d.value > 0; }) .attr('x', function(d) { return d.x0; }) .attr('y', function(d) { return d.y0; }) .attr('width', function(d) { return d.x1 - d.x0; }) .attr('height', function(d) { return d.y1 - d.y0; }) .attr('fill', function(d) { return d.data.color; }); return svg.node(); }32:T4c9,binnedColorData = { const colorData = imageDataMatrix .map(d => d3.hsl(`rgb(${d[0]}, ${d[1]}, ${d[2]})`)) .filter(function(d) { return d !== undefined; }); const reducer = d => d.length; const saturationLightnessKey = color => `s${saturationScale(color.s)}-l${lightnessScale(color.l)}`; const hueKey = color => `h${hueScale(color.h)}`; return Array.from(d3.rollup(colorData, reducer, saturationLightnessKey, hueKey)) .map((chunk, id) => { const [saturation, lightness] = chunk[0] .split('-') .map(d => +d.slice(1)); const hues = Array.from(chunk[1]); const overallFrequency = d3.sum(hues, hue => hue[1]); const values = hues.map((d) => { const hue = +d[0].slice(1); const frequency = d[1]; const color = d3.hsl( d3.mean(hueScale.invertExtent(hue)), d3.mean(saturationScale.invertExtent(saturation)), d3.mean(lightnessScale.invertExtent(lightness)) ).toString(); return { hue, saturation, lightness, frequency, color, } }); return { id, saturation, lightness, overallFrequency, values }; }); }33:[{"id":"12d063e7ab126374a0389b414ad104054c07534dc5795d9e61db0bd59b774bc0818074119be12fd3e015d0bd81837fdf4bdd9c1928f3b863405620da7011e1bb","href":"https://static.observableusercontent.com/files/12d063e7ab126374a0389b414ad104054c07534dc5795d9e61db0bd59b774bc0818074119be12fd3e015d0bd81837fdf4bdd9c1928f3b863405620da7011e1bb","name":"vermeer.jpg","type":"image/jpeg","lastModified":1573336261407.323,"size":5135},{"id":"5d4ade019cf0b3604a5667cb80ee2a25673cfc2640e153a7f15119377e9be3109ffe85ebb96df5d9b902d509c0d41a7bee0e9856be6127188b6ab0ed7b6364ca","href":"https://static.observableusercontent.com/files/5d4ade019cf0b3604a5667cb80ee2a25673cfc2640e153a7f15119377e9be3109ffe85ebb96df5d9b902d509c0d41a7bee0e9856be6127188b6ab0ed7b6364ca","name":"whistler.jpg","type":"image/jpeg","lastModified":1573336261406.801,"size":4865},{"id":"808400511441747f403658da51f1a4c2c2c6fa433f57fef581b5496b6197d0d792d4a408cb86e836e2f013caf6c9196d216bfcd9ba08eeac5c16d431d41a369c","href":"https://static.observableusercontent.com/files/808400511441747f403658da51f1a4c2c2c6fa433f57fef581b5496b6197d0d792d4a408cb86e836e2f013caf6c9196d216bfcd9ba08eeac5c16d431d41a369c","name":"rubens.jpg","type":"image/jpeg","lastModified":1573336261325.128,"size":5265},{"id":"0eb3424f879383f67949d861609b459ae1f70f868f3466c7a4f2fa23dd728d21415f3e9f55ee38d8bcf595bea9381b4f5ccf900bf75410878ecf2e15d7d5ec1b","href":"https://static.observableusercontent.com/files/0eb3424f879383f67949d861609b459ae1f70f868f3466c7a4f2fa23dd728d21415f3e9f55ee38d8bcf595bea9381b4f5ccf900bf75410878ecf2e15d7d5ec1b","name":"picasso.jpg","type":"image/jpeg","lastModified":1573336261325.924,"size":6187},{"id":"5a8667c32ea695e4d9272269b58a8ddb6c02ff6c7a0657f3ace378f8d3b3dcc37275613f633ac9487485af533a851ee7251d71f88657498763b31200c82d351f","href":"https://static.observableusercontent.com/files/5a8667c32ea695e4d9272269b58a8ddb6c02ff6c7a0657f3ace378f8d3b3dcc37275613f633ac9487485af533a851ee7251d71f88657498763b31200c82d351f","name":"matisse.jpg","type":"image/jpeg","lastModified":1573336261263.327,"size":9286},{"id":"f959a479eec40a921fac3aa60185d76a1e37b6ce0a4e05add616efbcf5466c3e9b6ccd4506607068bfe0150cff12b063c04753ab9bb35488c427407cf94101fa","href":"https://static.observableusercontent.com/files/f959a479eec40a921fac3aa60185d76a1e37b6ce0a4e05add616efbcf5466c3e9b6ccd4506607068bfe0150cff12b063c04753ab9bb35488c427407cf94101fa","name":"fragonard.jpg","type":"image/jpeg","lastModified":1573336261298.337,"size":5840},{"id":"b7dc394c94db91d2dd97ddd39bb58ee4bbaf6bbe2bb382bafb1a8678dd2abc187d739c6b24ff487f4bdfb70fc7d23f985977cc783826fc6028818f7527628e80","href":"https://static.observableusercontent.com/files/b7dc394c94db91d2dd97ddd39bb58ee4bbaf6bbe2bb382bafb1a8678dd2abc187d739c6b24ff487f4bdfb70fc7d23f985977cc783826fc6028818f7527628e80","name":"lichtenstein.jpg","type":"image/jpeg","lastModified":1573336261269.688,"size":10345},{"id":"da271a3ebc0bee5061189253d1b1565de731acdf9cc62afdeb50a364a1461d8f6cc2e63baa9216e8433da816a59686e0583a64ae811dd70475d7fa9aea157133","href":"https://static.observableusercontent.com/files/da271a3ebc0bee5061189253d1b1565de731acdf9cc62afdeb50a364a1461d8f6cc2e63baa9216e8433da816a59686e0583a64ae811dd70475d7fa9aea157133","name":"van-gogh.jpg","type":"image/jpeg","lastModified":1573336261231.043,"size":7716},{"id":"1709e38280c636d6c6d115a83f09fe04dd70cc0da486abc934a138c9c86e954f1e48b9a42a19f1120dcca604c13a4bece24d08e808f4c665e3bffdc39c7a1503","href":"https://static.observableusercontent.com/files/1709e38280c636d6c6d115a83f09fe04dd70cc0da486abc934a138c9c86e954f1e48b9a42a19f1120dcca604c13a4bece24d08e808f4c665e3bffdc39c7a1503","name":"turner.jpg","type":"image/jpeg","lastModified":1573336261221.569,"size":4915},{"id":"25fc2758efd11f54618c6faf498b9269084ab276bd0dd4ddf8a3d3f54e3cb028b50ca7d751809d5e8d5010271bb60d8418bdec4280e6a1b9a4a7c893c37692ec","href":"https://static.observableusercontent.com/files/25fc2758efd11f54618c6faf498b9269084ab276bd0dd4ddf8a3d3f54e3cb028b50ca7d751809d5e8d5010271bb60d8418bdec4280e6a1b9a4a7c893c37692ec","name":"da-vinci.jpg","type":"image/jpeg","lastModified":1573336260963.549,"size":6084}] 2f:{"id":"56a9bce57a2e2e54","slug":"hsl-image-decomposition","title":"HSL Image Decomposition","thumbnail":"b3224774dc44fbf0a9af8935c0d06dfd3f37ac63acda295d99abcb47f0c52799","access_level":"public","create_time":"$D2019-11-09T21:50:38.408Z","update_time":"$D2019-11-10T02:01:08.513Z","view_time":null,"first_public_time":"$D2019-11-10T01:52:28.106Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"1591dff650540652","login":"armollica","name":"Andrew Mollica","avatar_url":"https://avatars-next.observableusercontent.com/81698a6b415cad75964279b2f83be562de78f68bb0853ad141ddb15746fb7218","tier":"starter_2024"},"version":442,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1de40fc611387e4a","login":"armollica","name":"Andrew Mollica","avatar_url":"https://avatars-next.observableusercontent.com/81698a6b415cad75964279b2f83be562de78f68bb0853ad141ddb15746fb7218","tier":null}],"members":[{"type":"individual","id":"1de40fc611387e4a","login":"armollica","name":"Andrew Mollica","avatar_url":"https://avatars-next.observableusercontent.com/81698a6b415cad75964279b2f83be562de78f68bb0853ad141ddb15746fb7218","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"HSL Image Decomposition","cells":[{"id":0,"value":"md`# HSL Image Decomposition\n\nDecomposing an image's color information. Click an image to see it decomposed.\n\nPixels are binned based on their hue, saturation and lightness. Lightness is plotted on the x-axis, saturation on the y-axis and hue is displayed directly in the cells formed by the intersection of the other two. Each cell's size is determined by the frequency of pixels in that intersection. Treemaps are used to show the relative frequency of the various hues within each cell.\n\nImages source: [National Gallery of Art's Highlights](https://www.nga.gov/collection/highlights.html)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof imageKey = {\n const div = d3.create('div')\n .style('width', `${w + marginLeft + marginRight}px`)\n\n images.forEach((d, i) => {\n const img = d3.select(div.node().appendChild(d.image));\n \n img\n .attr('alt', d.key)\n .style('margin', '10px 10px')\n .style('cursor', 'pointer')\n .style('width', '90px');\n \n if (i === 0) {\n img.style('border', '2px solid tomato');\n div.node().value = 'daVinci'; \n div.node().dispatchEvent(new CustomEvent('input'));\n }\n });\n \n div\n .on('click', function() {\n if (d3.event.target.alt !== undefined) {\n div.node().value = d3.event.target.alt;\n div.selectAll('img')\n .style('border', function() {\n if (this === d3.event.target) return '2px solid tomato';\n return null;\n });\n }\n div.node().dispatchEvent(new CustomEvent('input'));\n });\n \n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"viewof tile = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"image = images.filter(d => d.key === imageKey)[0].image","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"xAxis = d3.axisBottom()\n .scale(xScale)\n .tickFormat(d3.format(\".2f\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"yAxis = d3.axisLeft()\n .scale(yScale)\n .tickFormat(d3.format(\".2f\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"w = Math.min(width, 600) - marginLeft - marginRight","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"h = Math.min(width, 600) - marginTop - marginBottom;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"marginTop = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"marginRight = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"marginBottom = 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"marginLeft = 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"hueScale = d3.scaleQuantize()\n .domain([0, 360])\n .range(d3.range(0, 1, 1 / 15))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"saturationScale = d3.scaleQuantize()\n .domain([0, 1])\n .range(d3.range(0, 1, 1 / 15))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"lightnessScale = d3.scaleQuantize()\n .domain([0, 1])\n .range(d3.range(0, 1, 1 / 15))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"xScale = d3.scaleBand()\n .domain(lightnessScale.range())\n .rangeRound([0, w])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"yScale = d3.scaleBand()\n .domain(saturationScale.range())\n .rangeRound([h, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"sizeScale = d3.scalePow()\n .exponent(0.25)\n .domain([0, d3.max(binnedColorData, function(d) { return d.overallFrequency; })])\n .range([0, 1]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"treemap = (data, size) => {\n const hierarchy = d3.hierarchy(data, d => d.values)\n .sum(d => d.frequency)\n .sort((a, b) => a.value - b.value)\n return d3.treemap()\n .tile(d3[tile])\n .size(size)\n .padding(1)\n .round(true)\n (hierarchy);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"imageDataMatrix = {\n const data = imageData.data;\n const n = data.length;\n const matrix = new Array(data.length);\n for (let i = 0; i < n; i += 4) {\n matrix[i / 4] = data.subarray(i, i + 4);\n }\n return matrix;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"imageData = {\n const context = DOM.context2d(image.width, image.height);\n context.drawImage(image, 0, 0);\n return context.getImageData(0, 0, image.width, image.height);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"d3 = require('d3@5', 'd3-array@^2.2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"images = [\n {\n key: 'daVinci',\n image: await FileAttachment(\"da-vinci.jpg\").image(),\n },\n {\n key: 'turner',\n image: await FileAttachment(\"turner.jpg\").image(),\n },\n {\n key: 'vanGogh',\n image: await FileAttachment(\"van-gogh.jpg\").image(),\n },\n {\n key: 'matisse',\n image: await FileAttachment(\"matisse.jpg\").image(),\n },\n {\n key: 'lichtenstein',\n image: await FileAttachment(\"lichtenstein.jpg\").image(),\n },\n {\n key: 'fragonard',\n image: await FileAttachment(\"fragonard.jpg\").image(),\n },\n {\n key: 'picasso',\n image: await FileAttachment(\"picasso.jpg\").image(),\n },\n {\n key: 'rubens',\n image: await FileAttachment(\"rubens.jpg\").image(),\n },\n {\n key: 'vermeer',\n image: await FileAttachment(\"vermeer.jpg\").image(),\n },\n {\n key: 'whistler',\n image: await FileAttachment(\"whistler.jpg\").image(),\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"import {imageInput} from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"