31:T5ac,lines2 = { const container = d3.create('div').attr('width', d3.min([width,600])).style('overflow-x', 'scroll') const svg = container.append('svg').attr('width',500).attr('height',970) const spacing = 24 const topicGs = svg.append('g').selectAll('g') .data([...topicsGrouped.values()].flat().map(d=> topicStats.get(d.topic))) .join('g').attr('transform',(d,i)=> `translate(10,${17.5 + i * spacing})`) topicGs.append('line') .attr('id',d=> d.topic) .attr('x1', 20).attr('x2', d=> 20 + 3 * d.value) .attr('stroke', d=> colors.get(d.category)) .attr('stroke-width', 4) topicGs.append('text') .attr('x', 20) .attr('y', -7) .text(d=> d.topic) .attr('dominant-baseline','middle') .attr('text-anchor','start') .attr('font-size','0.78rem') const categories = Array.from(topicsGrouped.keys()) const categoryPositions = d3.cumsum(categories.map(d=> spacing * topicsGrouped.get(d).length)) .map((d,i) => d - spacing * topicsGrouped.get(categories[i]).length / 2) const categoryLabels = svg.append('g').selectAll('text').data(Array.from(topicsGrouped.keys())).join('text') .attr('transform',(d,i)=> `translate(10, ${categoryPositions[i]}) rotate(-90)`) .text(d=>d) .attr('fill', d=> colors.get(d)) .attr('font-size', '1.2rem') .attr('font-weight', 'bold') .attr('dominant-baseline', 'middle') .attr('text-anchor', 'middle') return container.node() }32:Tadf,viz1 = { const container = d3.create('div') .attr('id', 'container') .style('display', 'flex').style('flex-wrap','wrap').style('gap','30px').style('justify-content','center') .style('background-color', 'black').style('padding','14px') const fingerprintDoc = (new DOMParser).parseFromString(fingerprintCleanSvg, "image/svg+xml"); const fingerprintSvg = d3.select(fingerprintDoc.documentElement).remove(); let svgs = [] for(let i = 0; i < nClusters; i++){ let clusterLetter = clusterLetters[i][0] let clusterI = clusterLetters[i][1] let other = fingerprintSvg.clone(true); svgs.push( container.append(() => other.node())) svgs[i].attr('id','svg-' + i) .attr('width', width < 700 ? 70 : clusterType == 'Virtual' ? 180 : (width / 8)) .attr('height', width < 700 ? 100 : clusterType == 'Virtual' ? 250 : (width / 8) * 1.4) .attr('viewBox', '0 0 153 202') Array.from(clusterStats.get(clusterI)).forEach((d)=> { let id = d[0].replaceAll('/','-').replace('(DataWrapper,Flourish,Etc)','') let clusterTopicMean = d[1].mean let topicMean = topicStats.get(d[0]).mean svgs[i].select('#' + id) .attr('opacity', (selectedTopics.length == 0 || selectedTopics.includes(d[0])) ? clusterTopicMean > topicMean ? 1 : d3.scaleLinear().range([0,1]).domain([0,relativeToAllAttendees ? topicMean : 1])(d[1].mean) : 0.6 ) .attr('stroke-width', (selectedTopics.length == 0 || selectedTopics.includes(d[0])) ? (clusterTopicMean < topicMean ? 0.5 : d3.scaleLinear().range([0.5,1.5]).domain([relativeToAllAttendees ? topicMean : 0, 1])(d[1].mean)) : 0.5 ) .attr('stroke', (selectedTopics.length == 0 || selectedTopics.includes(d[0]) ? colors.get(d[1].category) : '#888')) .attr('fill','none') .on('mouseover', ()=> { if (width > 700 && (selectedTopics.length == 0 || selectedTopics.includes(d[0]))){ mutable annotation = html`

Cluster ${clusterLetter}: ${d[0]} has ${d[1].yeses} yeses, ${d[1].sures} sures, and ${d[1].totalGroupSize - (d[1].yeses + d[1].sures)} nos

` } }) svgs[i].append('text').text(clusterLetter) .attr('dominant-baseline','hanging') .attr('font-size', '32px').attr('x', 5).attr('y',5) .attr('fill',highlightCluster!= null && clusterLetter == highlightCluster[0] ? '#FFF' :'#AAA') .attr('font-weight', highlightCluster!= null && clusterLetter == highlightCluster[0] ? 'bold' : 'normal') }) } return container.node() }33:[{"id":"e50f5b6ae08515711c3f5f8ae16b4a66f717e8a51158015fd27821f1d03c74650bd2139a42448f2f744ac167f5401852d3eed5a63ac1958d1f3aab97ed2cec3b","href":"https://static.observableusercontent.com/files/e50f5b6ae08515711c3f5f8ae16b4a66f717e8a51158015fd27821f1d03c74650bd2139a42448f2f744ac167f5401852d3eed5a63ac1958d1f3aab97ed2cec3b","name":"fingerPrint.svg","type":"image/svg+xml","lastModified":1718005135218.706,"size":5387},{"id":"8acd6a235eb080c2c047b3e792f32a5df163f4c57f842e5fb947d04c0961891fb1a90aba7d6540d2cfe8c4d023a9315b4448759893e51ee60bf861b4e764fafd","href":"https://static.observableusercontent.com/files/8acd6a235eb080c2c047b3e792f32a5df163f4c57f842e5fb947d04c0961891fb1a90aba7d6540d2cfe8c4d023a9315b4448759893e51ee60bf861b4e764fafd","name":"fingerprintSvg.rtf","type":"application/rtf","lastModified":1718344566478.568,"size":5742},{"id":"11382db7b12bc9f5d9a83c77d3eaba96e9af6e307d09da593142cd90f44aefc2821917e14f76fecac9b426310385cc737198ae8503f7f6a8d97ed65a7a1798e8","href":"https://static.observableusercontent.com/files/11382db7b12bc9f5d9a83c77d3eaba96e9af6e307d09da593142cd90f44aefc2821917e14f76fecac9b426310385cc737198ae8503f7f6a8d97ed65a7a1798e8","name":"fingerprintSvg.txt","type":"text/plain","lastModified":1718344665296.898,"size":5304},{"id":"4d47e3b93bbefe62bfbdcb9664bcef5afb3bac15a2332d8b1634311cf9382e9b5e803d8df8ed44f00285c101d50b4ac31889d84c3f32c11005f550542dae1ef9","href":"https://static.observableusercontent.com/files/4d47e3b93bbefe62bfbdcb9664bcef5afb3bac15a2332d8b1634311cf9382e9b5e803d8df8ed44f00285c101d50b4ac31889d84c3f32c11005f550542dae1ef9","name":"StickerA.png","type":"image/png","lastModified":1718378517690.25,"size":2901902},{"id":"63a194a0e18f252f5f542b163d604d03bd14e0702e2d827afb3e81ec406f6937435abdbfddc3c1453c3c911b696f0af6917b4e6abe09ee049c47c99e2c9642f8","href":"https://static.observableusercontent.com/files/63a194a0e18f252f5f542b163d604d03bd14e0702e2d827afb3e81ec406f6937435abdbfddc3c1453c3c911b696f0af6917b4e6abe09ee049c47c99e2c9642f8","name":"clusterData.zip","type":"application/zip","lastModified":1731091973939.317,"size":11992}] 2f:{"title":"Community Clusters Digital Fingerprints","cells":[{"id":0,"value":"# Community Clusters Digital Fingerprints","pinned":false,"hidden":false,"mode":"md"},{"id":277,"value":"To make clusters we created a survey attendees about their clustering-interests across 40 topics. People expressed more interest in clustering around some topics than others – for example \"Design\" had ${d3.format('0.0%')(topicStats.get(\"Design\").yeses/topicStats.get(\"Design\").totalGroupSize)} of attendees say \"Yes!\" and an additional ${d3.format('0.0%')(topicStats.get(\"Design\").sures/topicStats.get(\"Design\").totalGroupSize)} say \"sure\"; in contrast \"Freelancing\" got ${d3.format('0.0%')(topicStats.get(\"Freelancing\").yeses/topicStats.get(\"Freelancing\").totalGroupSize)} yeses and ${d3.format('0.0%')(topicStats.get(\"Freelancing\").sures/topicStats.get(\"Freelancing\").totalGroupSize)} sures.\nHere are all the topics and their relative support:","pinned":false,"hidden":false,"mode":"md"},{"id":338,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"To make the clusters We passed the individual responses into a clustering algorithm. Members of each cluster differed from the full group in their interests (as intended!) \n\nHere the length of the lines still corresponds to the average-interest from all respondants, but the thickness and opacity are determined by the interest in that topic from each specific cluster. ","pinned":false,"hidden":false,"mode":"md"},{"id":360,"value":"viewof i = Scrubber(d3.range([...clusterStats].length), {delay: 1500})","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"linesCluster = {\n const svg = d3.create('svg').attr('width',width).attr('height',450)\n const header = svg.append('text').attr('x', 40).attr('y', 25).attr('font-size', '1.3rem')\n const topicGs = svg.selectAll('g').data([...topicsGrouped.values()].flat().map(d=> topicStats.get(d.topic)))\n .join('g')\n .attr('transform',(d,i)=> `translate(40,${40 + i * 10})`)\n const lines = topicGs.append('line')\n .attr('id',d=> d.topic)\n .attr('x1', 0).attr('x2', d=> 3 * d.value)\n .attr('stroke', d=> colors.get(d.category))\n .attr('stroke-width', 2)\n\n return Object.assign(svg.node() , {\n update(cl) { \n header.text('Cluster ' + clusterLetters[cl][0])\n lines.transition().duration(400)\n .attr('stroke-width', d=> 2 * clusterStats.get(cl).get(d.topic).mean)\n .attr('opacity', d=> clusterStats.get(cl).get(d.topic).mean)\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"[Sophie Sparkes](https://www.sophiesparkes.com/about) took on the task of making a unique badge for each cluster. She said:\n* I wanted to represent this data like DNA (your conference essence). I first thought of chromosomes but badges are round, not long.\n* Fingerprints have lots of lines, perfect for encoding the 40 data points!\n* I hand-drew them on Procreate using my own thumbprint as inspiration.","pinned":false,"hidden":false,"mode":"md"},{"id":444,"value":"stickera = {\n const image = await FileAttachment(\"StickerA.png\").image()\n d3.select(image).style('max-width', '550px')\n return image\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"Inspired by Sophie's badges and by questions from attendees about how interests in different clusters overlapped, I wanted to make an interactive digital version. \n\nHere is a first draft. Use the options below to highlight certain sets of interests. ","pinned":false,"hidden":false,"mode":"md"},{"id":167,"value":"mutable annotation = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"viewof selectedTopicsGrouped = {\n clearSelection;\n let checkboxGroups = [...topicsGrouped].map(d=> {\n const checkboxes = Inputs.checkbox(d[1].map(tp=> tp.topic), {label: d[0], value: topTopicsForSelectedCluster})\n checkboxes.classList.add('topic-selection-form')\n return checkboxes\n })\n const topicsForm = Inputs.form( \ncheckboxGroups\n )\n d3.select(topicsForm).selectAll('form').style('max-width', 'initial').style('margin-bottom','20px')\n return topicsForm\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"viewof highlightCluster = {\n clearSelection;\n const radioForm = Inputs.radio(clusterLetters, {format: d=> d[0], label: 'or hightlight top topics for cluster'})\n d3.select(radioForm).style('max-width', 'initial')\n return radioForm\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"viewof clearSelection = Inputs.button('Clear Selections')","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"### Cluster Group to Display","pinned":false,"hidden":false,"mode":"md"},{"id":666,"value":"viewof clusterType = Inputs.radio(['In Person', 'Virtual'], {value: 'In Person'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"### Text Summary","pinned":false,"hidden":false,"mode":"md"},{"id":585,"value":"{ \n const container = d3.create('div').attr('class','interest-text-container')\n if (highlightCluster == null) {\n container.text('select a cluster for text summary of full interest on each topic') \n } else {\n const clusterData = [...clusterStats.get(highlightCluster[1])].sort((a,b)=>d3.descending(a[1].mean, b[1].mean))\n container.append('div').html(`

Cluster ${highlightCluster[0]} (${[...clusterData][0][1].totalGroupSize} members)

`)\n container.append('div').selectAll('div')\n .data(clusterData)\n .join('div')\n .html(d=> `${d[1].topic}: ${d[1].yeses} yeses, ${d[1].sures} sures`)\n }\n return container.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"fingerprintCleanSvg = await FileAttachment(\"fingerprintSvg.txt\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"clusterData = FileAttachment(\"clusterData.zip\").zip()","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"topicStats = {\n const fileName = clusterType == 'In Person' ? 'topicStatsInPerson.json' : 'topicStatsVirtual.json'\n const data = await clusterData.file(fileName).json() \n return new Map(data)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"clusterStats = {\n const fileName = clusterType == 'In Person' ? 'clusterStatsInPerson.json' : 'clusterStatsForVirtual.json'\n const data = await clusterData.file(fileName).json()\n return new Map(data\n .filter(d=> clusterType == 'In Person' || d[0] != 9) // Remove the virtual cluster with only 1 \n .map (d=> [d[0], new Map(d[1]) ]))\n // new Map(await clusterData.file(\"topicStatsVirtual.json\").json())\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"color = ({turquoise: '#2db1a4', mustard: '#dcb22a', plum: '#9f5f9c', copper: '#773110' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":" colors = new Map([['Data Viz Topics', color.turquoise ], ['Industry/Issue', color.plum], ['Tools', color.mustard]])\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"clusterLetters = \n Array.from(clusterStats.keys()).sort((a,b)=> d3.ascending(a, b))\n .map((d)=>['ZABCDEFGHIJKLMNO'.slice(d,d+1),d])","pinned":false,"hidden":false,"mode":"ojs"},{"id":671,"value":"nClusters = clusterLetters.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"topTopicsForSelectedCluster = highlightCluster!= null ? [...clusterStats.get(highlightCluster[1])].sort((a,b)=>d3.descending(a[1].mean, b[1].mean)).slice(0,6).map(d=>d[0]) : []","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"topicsGrouped = d3.group([...topicStats.values()], d=> d.category)","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"selectedTopics = selectedTopicsGrouped.flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"linesCluster.update(i)","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"Attempt at a toggle that I never debugged. Just leaving toggled on for now. ","pinned":false,"hidden":false,"mode":"md"},{"id":273,"value":"viewof relativeToAllAttendees = {\n clearSelection\n return Inputs.toggle({label: \"Show Absolute\", value: true})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"### Styles","pinned":false,"hidden":false,"mode":"md"},{"id":514,"value":"\n\n","pinned":false,"hidden":false,"mode":"html"}],"files":"$W33","stdlib":"1","titling":"auto"}