29:null 2a:["$","title",null,{"children":"Tree Chord Diagram | hxada's Workspace | Observable"}] 2f:T977,{ const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)) const g = svg .attr('height', '100%') .attr('width', '100%') .attr('viewBox', '0 0 ' + (width + margin.left + margin.right) + ' ' + (height + margin.top + margin.bottom)) .append("g") .attr("transform","translate(" + (margin.left + width/2)+ "," + (margin.top + height/2) + ")") .append("g") .attr("transform","rotate(" + treeRotation + ")") .datum(chord(matrix)); const group = g.append("g") .attr("class", "groups") .selectAll("g") .data(function(chords) { return chords.groups; }) .enter() .append("g") .style("display", function(d) { if( branchBySource.get(sourceByIndex.get(d.index)) == 'spacer') { return 'none';} else { return null; } }) group.append("path") .style("fill", function(d) { return color(branchBySource.get(sourceByIndex.get(d.index))); }) .style("stroke", function(d) { return d3.rgb(color(branchBySource.get(sourceByIndex.get(d.index)))).darker(); }) .attr("d", arc) group.append("text") .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; }) .attr("dy", ".35em") .attr("transform", function(d) { return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")" + "translate(" + (innerRadius + 35) + ")" + (d.angle > Math.PI - treeRotation*Math.PI/180 && d.angle < 2*Math.PI - treeRotation*Math.PI/180 ? "rotate(180)" : ""); }) .style("text-anchor", function(d) { return d.angle > Math.PI - treeRotation*Math.PI/180 && d.angle < 2*Math.PI - treeRotation*Math.PI/180 ? "end" : null; }) .text(function(d) { return sourceByIndex.get(d.index); }); g.append("g") .attr("class", "ribbons") .selectAll("path") .data(function(chords) { return chords; }) .enter() .append("path") .style('mix-blend-mode','multiply') .attr("d", ribbon) .style("fill", function(d) { return color(branchBySource.get(sourceByIndex.get(d.target.index))); }) .style("stroke", function(d) { return d3.rgb(color(branchBySource.get(sourceByIndex.get(d.target.index)))).darker(); }) .style("display", function(d) { if( branchBySource.get(sourceByIndex.get(d.source.index)) == 'spacer') { return 'none'; } else { return null; } }) yield svg.node() }30:T85b,function makeTree(data,hubName,sbn,tbn) { // sort the data for adding spacers data = data.sort(twigSorter); var sources = d3.set(data, function(d) { return d.source }).values() var targets = d3.set(data, function(d) { return d.target }).values() targets.forEach(function(d) { if(!(sources.includes(d))) { var row = data.filter(function(e) { return e.target == d })[0]; var o = {}; o.source = d; o.target = d; o[sbn] = row[tbn]; o[tbn] = row[tbn] o.freq = 0; data.push(o); } }) data = data.sort(twigSorter); var output = []; data.forEach(function(d,i) { // Insert first hub spacer if(i == 0) output.push({source:'hubSpacer1',target:'hubSpacer1', branch:"spacer", freq:trunkSpacer}); if(d.source != hubName && data[i-1].source != hubName && data[i-1][sbn] != d[sbn] ) { output.push({source:d[sbn]+'spacer',target:d[sbn]+'spacer', branch:"spacer", freq:branchSpacer}); } if(d.source != hubName && data[i-1].source == hubName) { output.push({source:'hubSpacer2',target:'hubSpacer2', branch:"spacer", freq:trunkSpacer}); } // Insert data output.push({source:d.source,target:d.target,branch:d[sbn], freq:d.freq}); // Insert second hub spacer }) var sources = d3.set(data, function(d) { return d.source }).values() var targets = d3.set(data, function(d) { return d.target }).values() targets.forEach(function(d) { if(!(sources.includes(d))) { var row = data.filter(function(e) { return e.target == d })[0]; output.push({source:d,target:d,branch:row[tbn], freq:0}); } }) return output; function twigSorter(a,b) { if(a.source == hubName) return -1; if(b.source == hubName) return 1; if(a[sbn] == b[sbn]) { if(a.source > b.source) return 1; if(a.source < b.source) return -1; } else { if(a[sbn] > b[sbn]) return 1; if(a[sbn] < b[sbn]) return -1; } } }31:T120a,dataIn = [ {source:"Beach Club Villas", target:"Seven Dwarfs Mine Train", sourceBranch:'hotel',targetBranch:'Magic Kingdom',freq:4}, {source:"Beach Club Villas", target:"Peter Pan's Flight", sourceBranch:'hotel',targetBranch:'Magic Kingdom',freq:2}, {source:"Beach Club Villas", target:"Space Ranger Spin", sourceBranch:'hotel',targetBranch:'Magic Kingdom',freq:2}, {source:"Beach Club Villas", target:"Space Mountain", sourceBranch:'hotel',targetBranch:'Magic Kingdom',freq:1}, {source:"Beach Club Villas", target:"Spaceship Earth", sourceBranch:'hotel',targetBranch:'Epcot',freq:1}, {source:"Beach Club Villas", target:"Test Track", sourceBranch:'hotel',targetBranch:'Epcot',freq:2}, {source:"Beach Club Villas", target:"Soarin'", sourceBranch:'hotel',targetBranch:'Epcot',freq:2}, {source:"Beach Club Villas", target:"Flights of Passage", sourceBranch:'hotel',targetBranch:'Animal Kingdom',freq:1}, {source:"Beach Club Villas", target:"Kilimanjaro Safaris", sourceBranch:'hotel',targetBranch:'Animal Kingdom',freq:1}, {source:"Beach Club Villas", target:"Midway Madness", sourceBranch:'hotel',targetBranch:'Hollywood Studios',freq:3}, {source:"Beach Club Villas", target:"Indiana Jones", sourceBranch:'hotel',targetBranch:'Hollywood Studios',freq:1}, {source:"Space Mountain", target:"Seven Dwarfs Mine Train", sourceBranch:'Magic Kingdom',targetBranch:'Magic Kingdom',freq:1}, {source:"Seven Dwarfs Mine Train", target:"Big Thunder Railroad", sourceBranch:'Magic Kingdom',targetBranch:'Magic Kingdom',freq:1}, {source:"Seven Dwarfs Mine Train", target:"Seven Dwarfs Mine Train", sourceBranch:'Magic Kingdom',targetBranch:'Magic Kingdom',freq:1}, {source:"It's a Small World", target:"Peter Pan's Flight", sourceBranch:'Magic Kingdom',targetBranch:'Magic Kingdom',freq:1}, {source:"Peter Pan's Flight", target:"It's a Small World", sourceBranch:'Magic Kingdom',targetBranch:'Magic Kingdom',freq:2}, {source:"Space Ranger Spin", target:"Astro Orbiter", sourceBranch:'Magic Kingdom',targetBranch:'Magic Kingdom',freq:1}, {source:"Astro Orbiter", target:"It's a Small World", sourceBranch:'Magic Kingdom',targetBranch:'Magic Kingdom',freq:1}, {source:"Space Ranger Spin", target:"Tomorrowland Transit", sourceBranch:'Magic Kingdom',targetBranch:'Magic Kingdom',freq:1}, {source:"Tomorrowland Transit", target:"Beach Club Villas", sourceBranch:'Magic Kingdom',targetBranch:'hotel',freq:1}, {source:"Big Thunder Railroad", target:"Beach Club Villas", sourceBranch:'Magic Kingdom',targetBranch:'hotel',freq:1}, {source:"Kilimanjaro Safaris", target:"It's Tough to be a Bug", sourceBranch:'Animal Kingdom',targetBranch:'Animal Kingdom',freq:1}, {source:"It's Tough to be a Bug", target:"Navi River Journey", sourceBranch:'Animal Kingdom',targetBranch:'Animal Kingdom',freq:1}, {source:"It's Tough to be a Bug", target:"Flights of Passage", sourceBranch:'Animal Kingdom',targetBranch:'Animal Kingdom',freq:1}, {source:"Navi River Journey", target:"Beach Club Villas", sourceBranch:'Animal Kingdom',targetBranch:'hotel',freq:1}, {source:"Flights of Passage", target:"Beach Club Villas", sourceBranch:'Animal Kingdom',targetBranch:'hotel',freq:1}, {source:"Test Track", target:"Mission Space", sourceBranch:'Epcot',targetBranch:'Epcot',freq:1}, {source:"Soarin'", target:"The Seas", sourceBranch:'Epcot',targetBranch:'Epcot',freq:1}, {source:"Mission Space", target:"The Seas", sourceBranch:'Epcot',targetBranch:'Epcot',freq:1}, {source:"The Seas", target:"Journey in to Imagination", sourceBranch:'Epcot',targetBranch:'Epcot',freq:1}, {source:"Test Track", target:"Beach Club Villas", sourceBranch:'Epcot',targetBranch:'hotel',freq:2}, {source:"Midway Madness", target:"Star Tours", sourceBranch:'Hollywood Studios',targetBranch:'Hollywood Studios',freq:2}, {source:"Star Tours", target:"Star Tours", sourceBranch:'Hollywood Studios',targetBranch:'Hollywood Studios',freq:2}, {source:"Indiana Jones", target:"Star Tours", sourceBranch:'Hollywood Studios',targetBranch:'Hollywood Studios',freq:1}, {source:"Star Tours", target:"Muppets 3D", sourceBranch:'Hollywood Studios',targetBranch:'Hollywood Studios',freq:2}, {source:"Muppets 3D", target:"Midway Madness", sourceBranch:'Hollywood Studios',targetBranch:'Hollywood Studios',freq:1}, {source:"Star Tours", target:"Tower of Terror", sourceBranch:'Hollywood Studios',targetBranch:'Hollywood Studios',freq:2}, {source:"Star Tours", target:"Beach Club Villas", sourceBranch:'Hollywood Studios',targetBranch:'hotel',freq:2} ]32:[] 2d:{"id":"3995111c4cee0dc5","slug":null,"title":"Tree Chord Diagram","thumbnail":"3f9917c41c6c169c0e6161866afc60f29eefd2df150d9de122effa999ad4baec","access_level":"public","create_time":"$D2023-10-24T07:50:12.619Z","update_time":"$D2023-10-24T07:50:30.861Z","view_time":null,"first_public_time":"$D2023-10-24T07:50:12.619Z","fork":{"id":"51244409065f2fa3","slug":"tree-chord-diagram","title":"Tree Chord Diagram","owner":{"id":"c2e7f4aeaee97a79","login":"tommycoin80","name":"Tom Coin"}},"stars":0,"starred":false,"owner":{"type":"team","id":"060a827b9a8ef9d3","login":"hxada-ws","name":"hxada's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/3ffb0e3ebd8c1e558a48634066fd34129bc9e3c66bc5c00f1f49b26ae62fad27","tier":"starter_2024"},"version":1031,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9f0865d484c5bf8d","login":"hxada","name":"hxada","avatar_url":"https://avatars-next.observableusercontent.com/36751be6a562ab61014bab00bd083ba0725c78d2ac75f7c33538f6fe27ab1278","tier":null}],"members":[{"type":"individual","id":"9f0865d484c5bf8d","login":"hxada","name":"hxada","avatar_url":"https://avatars-next.observableusercontent.com/36751be6a562ab61014bab00bd083ba0725c78d2ac75f7c33538f6fe27ab1278","tier":null,"role":"editor"},{"type":"team","id":"060a827b9a8ef9d3","login":"hxada-ws","name":"hxada's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/3ffb0e3ebd8c1e558a48634066fd34129bc9e3c66bc5c00f1f49b26ae62fad27","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Tree Chord Diagram","cells":[{"id":568,"value":"md`# Tree Chord Diagram`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1018,"value":"width = 960\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":941,"value":"md `### This is a, still in progress, visualization of my family's last trip to Disney World. My goal was to use a chord diagram to to show what pairs of attractions we went to in sequence. I really wanted to give the diagram the look of a tree, where our hotel was the trunk, each park was a branch, and each attraction a twig. To accomplish this I inserted 'spacers' around the trunk and between any branch that doesn't neighbor the trunk. I based the initial diagram on [Mike Bostock's example on bl.ocks.](https://bl.ocks.org/mbostock/4062006)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":902,"value":"md`## Trunk Spacing\n#### Adjusting this slider will change the spacer size between the trunk and branches.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":681,"value":"viewof trunkSpacer = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":904,"value":"md`## Branch Spacing\n#### Ajusting this slider will change the spacer size between the branches.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":687,"value":"viewof branchSpacer = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":913,"value":"md`## Pad Angle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":694,"value":"viewof padAngle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":895,"value":"tickerSpeed = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":795,"value":"trunkSpacerTicker = iTick*1.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":806,"value":"branchSpacerTicker = iTick/10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":809,"value":"padAngleTicker = iTick/500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":846,"value":"iTick = {\n let i = 0;\n while (i<11) { \n yield Promises.tick(tickerSpeed, i++)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":267,"value":"treeRotation = {\n var padDegrees = padAngle * 180/Math.PI;\n var totalPadDegrees = (sourceByIndex.keys().length - 1) * padDegrees\n \n var rootFreq = d3.sum(matrix[1])\n \n var arcRotate = ((trunkSpacer + rootFreq/2)/d3.sum(tree, function(d) { return d.freq }))*(360-totalPadDegrees)\n var padRotate = padDegrees;\n \n yield -(arcRotate + padDegrees) + 180;\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":231,"value":"matrix = {\n yield indexBySource.keys().map(function(src) {\n \treturn indexBySource.keys().map(function(tar) {\n \tvar op = tree.filter(function(d) { return d.source == src && d.target == tar;})[0] || {freq:0};\n \treturn op.freq;\n })\n })\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":479,"value":"branchBySource = {\n\tvar bbs = d3.map();\n \tvar n=0;\n \ttree.forEach(function(d) {\n \tif(!bbs.has(d.branch)) bbs.set(d.source,d.branch) \n })\n \t\n \tyield bbs;\n \t\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":503,"value":"sourceByIndex = {\n\tvar sbi = d3.map();\n \tvar n = 0;\n \tbranchBySource.keys().forEach(function(d) {\n \tif(!sbi.has(d)) sbi.set(n++,d);\n })\n \t\n \tyield sbi;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":465,"value":"indexBySource = {\n\tvar ibs = d3.map();\n \tvar n = 0;\n \ttree.forEach(function(d) {\n \tif(!ibs.has(d.source)) ibs.set(d.source,n++);\n })\n \t\n \tyield ibs;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"function groupTicks(d, step) {\n var k = (d.endAngle - d.startAngle) / d.value;\n return d3.range(0, d.value, step).map(function(value) {\n return {value: value, angle: value * k + d.startAngle};\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"color = {\n var domain = [0,1,2,3,4].map(function(d) { return d3.interpolateRainbow(d/6) });\n //d3.schemeSpectral[6]\n yield d3.scaleOrdinal(domain).domain(d3.set(branchBySource.values()).values())\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"ribbon = d3.ribbon()\n .radius(innerRadius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"arc = d3.arc()\n .innerRadius(innerRadius)\n .outerRadius(outerRadius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"chord = d3.chord()\n .padAngle(padAngle)\n .sortSubgroups(d3.descending)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"formatValue = d3.formatPrefix(\",.0\", 1e3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"innerRadius = outerRadius -30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"outerRadius = Math.min(width, height) * 0.5 - 40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"height = width * 500/960","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"margin = ({top:100, left:10,bottom:105,right:80})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":388,"value":"tree = makeTree(dataIn,\"Beach Club Villas\", 'sourceBranch','targetBranch')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":386,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":705,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"html`\n\n

Style Tag

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"