31:T7ba,chart = { let transform = d3.zoomIdentity; const links = data.links.filter(l => l.distance < distanceFilter).map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force('collide', d3.forceCollide(d => rScale(d.value))) .force("center", d3.forceCenter(width / 8, chartHeight / 8)); const svg = d3.select(DOM.svg(width, chartHeight)) //const svg = d3.create("svg") // .attr("viewBox", [0, 0, width*2, height*2]); const link = svg.append("g") //.attr("stroke", d => d.rgb) .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") //.attr("stroke-width", d => Math.sqrt(d.value)); .attr("stroke", d => d.rgb) const zoomRect = svg.append("rect") .attr("width", width) .attr("height", chartHeight) .style("fill", "none") .style("pointer-events", "all") const node = svg.append("g") .attr("stroke", "#999") .attr("stroke-width", 1) .selectAll("circle") .data(nodes) .join("circle") .attr("r", d => rScale(d.value)) .attr("fill", d => d.rgb) .call(drag(simulation)); const zoom = d3.zoom() .scaleExtent([1/8, 64]) .on("zoom", zoomed); zoomRect.call(zoom) .call(zoom.translateTo, 0, 0); node.append("title") .text(d => d.id); simulation.on("tick", () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); function zoomed() { transform = d3.event.transform; node.attr("transform", d3.event.transform); link.attr("transform", d3.event.transform); } }32:[] 2f:{"title":"Force-Directed Graph of camera pixel values","cells":[{"id":0,"value":"md`# Force-Directed Graph of camera pixel values\n\nOne of a series of notebooks exploring ways to visualize actual image pixel values.\n\nHere we use a camera photo as an input image with code adapted from //https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"html`

\n \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"md`The camera image will appear in the next cell:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"html`

\n $\"The$ \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"md`Pixel values are collected from the canvas in the next cell:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"canvas = {\n const canvas = document.createElement('canvas')\n canvas.id = 'canvas'\n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"viewof distanceFilter = slider({\n min: d3.min(Object.values(differenceIndex)), \n max: d3.max(Object.values(differenceIndex)), \n step: 1, \n value: 9, \n title: \"Distance\", \n description: \"Show links with distance less than this value\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"md `get the pixel values from the canvas`","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"md `Build an index of disinct RGB colors and their counts.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"pixelIndex = colorIndex(pixels)","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"md `Create an array of the distinct colors, their counts, and their LAB vectors.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"pindexPlotData = {\n const kvp = Object.entries(pixelIndex).sort((a, b) => b[1].count - a[1].count)\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":288,"value":"md `\nCalculate the Euclidean difference in LAB color space of each distinct pair of RGB colors.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"differenceIndex = diffIndex()","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"md `### Tree data\n\nThe tree data contains an array of nodes and an array of edges.\n\nThere is one node for each distinct color.\nEach node has a 'value' property that corresponds to its count (frequency of occurrence).\n\nThere is one edge for each pair of distinct colors.\nEach link has a 'distance' property that corresponds to the color difference between its source and target nodes.\nLink colors are determined by averaging the source and target node LAB colors.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"data = createTreeData()","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"{\n if(!started){\n mutable started = true;\n startup()\n }\n return md`The startup method.`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"{\n const startbutton = document.getElementById('startbutton');\n\n startbutton.addEventListener('click', function(ev){\n takePhoto();\n ev.preventDefault();\n }, false);\n return md`Handle the button click.`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"md`### Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"pwidth = 24;","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"md`### Mutables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"mutable height = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"chartHeight = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"mutable started = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"mutable streaming = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"mutable pixels = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`### Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"function startup() {\n //console.log('just print this once')\n \n const video = document.getElementById('video');\n const canvas = document.getElementById('canvas');\n navigator.mediaDevices.getUserMedia({ video: true, audio: false })\n .then(function(stream) {\n video.srcObject = stream;\n video.play();\n })\n .catch(function(err) {\n console.log(\"An error occurred: \" + err);\n });\n video.addEventListener('canplay', function(ev){\n if (! streaming) {\n mutable streaming = true;\n mutable height = +(video.videoHeight / (video.videoWidth/pwidth));\n //console.log('listening')\n\n video.setAttribute('width', pwidth);\n video.setAttribute('height', height);\n canvas.setAttribute('width', pwidth);\n canvas.setAttribute('height', height);\n \n }\n }, false);\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"function getPixels () {\n const ctx = canvas.getContext('2d')\n const raw = ctx.getImageData(0, 0, canvas.width, canvas.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 lab = d3.lab(rgbc)\n pixels.push({\n rgb: rgbc,\n lab: lab,\n vec: [isNaN(lab.l) ? 0 : lab.l,\n isNaN(lab.a) ? 0 : lab.a,\n isNaN(lab.b) ? 0 : lab.b \n ]\n })\n }\n return pixels\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"function takePhoto() {\n const video = document.getElementById('video');\n const canvas = document.getElementById('canvas');\n const context = canvas.getContext('2d');\n const photo = document.getElementById('photo');\n if (pwidth && height) {\n canvas.width = pwidth;\n canvas.height = height;\n context.drawImage(video, 0, 0, pwidth, height);\n const data = canvas.toDataURL('image/png');\n photo.setAttribute('src', data);\n mutable pixels = getPixels()\n } else {\n clearphoto();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"function clearphoto() {\n const photo = document.getElementById('photo');\n const canvas = document.getElementById('canvas');\n var context = canvas.getContext('2d');\n context.fillStyle = \"#AAA\";\n context.fillRect(0, 0, canvas.width, canvas.height);\n\n var data = canvas.toDataURL('image/png');\n photo.setAttribute('src', data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"function diffIndex () {\n const dindex = {}\n pindexPlotData.forEach((pdi, i) => \n pindexPlotData.forEach((pdj, j) => {\n if(i > j) {\n const keyi = [pdi.name, pdj.name].join(',');\n const keyj = [pdj.name, pdi.name].join(',');\n const dist = euclid(pdi.vec, pdj.vec)\n dindex[keyi] = dist\n dindex[keyj] = dist\n }\n }))\n return dindex;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"function getDifference(name1, name2){\n return differenceIndex[name1 + ',' + name2]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"function getLinkColor (v1, v2) {\n return d3.lab(d3.mean([v1[0],v2[0]]), d3.mean([v1[1],v2[1]]), d3.mean([v1[2],v2[2]]))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"function createTreeData () {\n const nodes = pindexPlotData.map((pd,i) => ({id: i, name: pd.name, value: pd.count, rgb: pd.rgb, vec: pd.vec}))\n const links = []\n nodes.forEach((pdi, i) => \n nodes.forEach((pdj, j) => {\n if(i > j) {\n links.push({source: pdi.id, target: pdj.id , \n distance: getDifference(pdi.name, pdj.name),\n rgb: getLinkColor(pdi.vec, pdj.vec)})\n }\n })\n )\n return {nodes, links}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"rScale = d3.scaleLinear()\n .domain([0, pindexPlotData[0] && pindexPlotData[0].count || 1])\n .range([10, 100]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"import {checkbox, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"import {viewof euclid, colorIndex} from '@jonhelfman/lab-palette-extraction-base'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}