31:T1694,vis = { const radius = Math.min(w, h) / 2 * 0.8; // set value for probe nodes treeData.children.forEach(ph => { ph.children.forEach(ch => (ch.value = 1)); }); treeData.children.sort((a,b) => b.as - a.as) // document.querySelector("#msm-id").innerText = 28276188 // document.querySelector("#msm-target").innerText = treeData.name // document.querySelector("#msm-probes").innerText = numOfProbes // document.querySelector("#msm-ph").innerText = treeData.children.length const layout = d3.partition().size([2 * Math.PI, radius]); const arcGenerator = d3 .arc() .startAngle(d => d.x0) .endAngle(d => d.x1) .innerRadius(d => (d.depth === 1 ? d.y0 : d.y1 * 0.87)) .outerRadius(d => (d.depth === 1 ? d.y1 * 1.5 : d.y1)); const root = d3.hierarchy(treeData) .sum(d => d.value) const nodes = root.descendants(); layout(root); const rotateText = d => { const angle = ((d.x0 + d.x1) / Math.PI) * 90; return angle < 180 ? angle - 90 : angle + 90; }; // ================================================= let phSelected = false; const mouseleave = d => { if (phSelected) { return; } d3.selectAll('.slice-group').style('opacity', 1); }; const svg = d3.select("#chart-2") // top level container group const containerGroup = svg .append('g') .attr('id', 'container') .attr( 'transform', 'translate(' + w / 2.65 + ',' + h / 2 + ')scale(0.8)' ) .on('mouseleave', mouseleave); // slices // const arcsGroup = containerGroup.append('g').attr('id', 'arcs-group') const arcs = arcsGroup .selectAll('g') .data(nodes) .enter() .append('g') .filter(d => d.parent) .classed('slice-group', true); const getAncestors = node => { let path = []; let current = node; while (current.parent) { path.unshift(current); current = current.parent; } return path; }; const mouseover = d => { if (phSelected) { return; } const sequence = getAncestors(d); d3.selectAll('.slice-group').style('opacity', 0.2); arcs.filter(node => sequence.indexOf(node) >= 0).style('opacity', 1); mutable selected = d.data markerGroup.clearLayers(); d.data.children.forEach(probe => { if (probe.location) { addMarker({ location: probe.location, as: d.data.as, probeId: probe.probeId, probeIp: probe.name, probePh: d.data.hostname || d.data.name, }) } }) }; const mouseclick = d => { phSelected = !phSelected } arcs.append('path') .filter(d => d.parent && d.depth === 1) .attr('d', arcGenerator) .classed('arc', d => d.children) .style('fill', d => colorScale((d.children ? d : d.parent).data.as)) .on('mouseover', mouseover) //.on('click', mouseclick); // inner ring - penultimate hops' text arcs.filter(d => d.depth < 2 && d.value > 20) .append('text') .attr( 'transform', d => `translate(${arcGenerator.centroid(d)})rotate(${rotateText(d)})` ) .attr('dx', -w/10) .attr('dy', '.5em') .style('font-size', '10px') .style('font-weight', 'bold') .style('font-family', 'monospace') .text(d => d.data.hostname || ""); // after node outer ring - amount per each ph arcs.filter(d => d.depth < 2 && d.value > 20) .append('text') .attr( 'transform', d => `translate(${arcGenerator.centroid(d)[0] * 1.78},${arcGenerator.centroid(d)[1] * 1.78})` ) .attr('dx', '-10') .attr('dy', '0') .style('font-size', '10px') .style('font-weight', 'bold') .style('font-family', 'monospace') .text(d => d.value); arcs.filter(d => d.depth < 2 && d.value > 20) .append('text') .attr( 'transform', d => `translate(${arcGenerator.centroid(d)[0] * 1.78},${arcGenerator.centroid(d)[1] * 1.78})` ) .attr('dx', '-15') .attr('dy', '12') .style('font-size', '10px') .style('font-weight', 'bold') .style('font-family', 'monospace') .text( d => `${Number.parseFloat((d.value / numOfProbes) * 100).toFixed(2)}%` ); // asn ring setup ================================================== // const asns = treeData.children.map(c => { c.value = c.children.length return c }) asns.sort((a,b) => b.value - a.value) console.log(asns) let asnRingObj = {} for (const entry of asns) { console.log(entry) if (asnRingObj[entry.as]) { asnRingObj[entry.as] += entry.value } else { asnRingObj[entry.as] = entry.value } } console.log(asnRingObj) asnRingObj.sort const pie = d3.pie() .value(d => d.value) .sort(null); const arc = d3.arc() .startAngle(d => -d.startAngle - 0.01) .endAngle(d => -d.endAngle - 0.01) .innerRadius(radius + 60) .outerRadius(radius + 80); const asnRingData = pie(d3.entries(asnRingObj)) console.log(asnRingData) const asRingGroup = containerGroup.append('g').attr('id', 'asring-group'); const slices = asRingGroup .selectAll('g') .data(asnRingData) .enter() .append('g') .classed('asn-slice-group', true); slices .append('path') .attr('d', arc) .attr('fill', function(d){ return(colorScale(d.data.key)) }) .attr("stroke", "#fff") .style("opacity", 0.7) slices.filter(d => d.data.value > 50) .append('text') .attr( 'transform', d => { const c = arc.centroid(d) return `translate(${c[0]*1.06},${c[1]*1.06})` } ) .attr('dx', '-12') .style('font-size', '12px') .style('font-weight', 'bold') .style('font-family', 'monospace') .text(d => `AS${d.data.key}`); // end of asn ring setup ================================================== // ================================================= }32:[{"id":"3081c3f18c20174c5d46942687496b20f0fd085529b2f87ffdde8f17181d78e0fbd137fabeda5bcbae69335757b3a4939752a3acc3731018d58acb1752d9dd9c","href":"https://static.observableusercontent.com/files/3081c3f18c20174c5d46942687496b20f0fd085529b2f87ffdde8f17181d78e0fbd137fabeda5bcbae69335757b3a4939752a3acc3731018d58acb1752d9dd9c","name":"treeData.json","type":"application/json","lastModified":1616600701560.168,"size":325299}] 2f:{"title":"Teredo servers","cells":[{"id":0,"value":"md`# Teredo servers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"md`\nMeasurement ID: [28276188](https://atlas.ripe.net/measurements/28276188/) \nTarget: **mire.remlab.net (${treeData.name})** \nParticipating probes: **${numOfProbes}** \nNumber of individual penultimate hops used to reach target: **${treeData.children.length}** \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"selected ? md`\nSelected penultimate hop: **${selected.hostname || selected.name} - AS${selected.as}** \nProbes using this Teredo gateway to reach target: **${selected.children.length}** (${(selected.children.length / numOfProbes * 100).toFixed(2)}% of total ${numOfProbes})\n` : md`Hover over a penultimate hop in the sunburst chart below to see details.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"chart = html`\n \n

\n\n

\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"md`##### imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"treeData = FileAttachment(\"treeData.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(L._style = html``);\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"md`##### globals`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"w = width * 0.65","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"h = width * 0.55","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"map = {\n const mapContainer = document.querySelector('#map-container')\n const map = L.map(mapContainer).setView([0, 0], 1);\n L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n attribution: '© OpenStreetMap contributors',\n maxZoom: 8,\n maxNativeZoom: 8,\n }).addTo(map);\n\n return map\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"markerGroup = L.layerGroup().addTo(map);\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"addMarker = ph => {\n const {probeId, probeIp, probePh, location, as} = ph\n\n const coloredIcon = fontAwesomeIcon(as)\n L.marker(location, {\n icon: coloredIcon, \n }).addTo(markerGroup)\n .bindPopup(`\n Probe ID: ${probeId}\n
\n Probe address: ${probeIp}\n
\n Penultimate Hop: ${probePh}\n
\n View probe details in RIPE Atlas\n `)\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"colorScale = d3.scaleOrdinal(d3.schemeCategory20b);","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"getMarkerColor = as => {\n const fillColor = colorScale(as)\n return fillColor\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"fontAwesomeIcon = as => L.divIcon({\n html: ``,\n iconSize: [10, 10],\n className: 'myDivIcon'\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"// total number of probes ie. leaf nodes\nnumOfProbes = treeData.children.reduce((acc, curr) => {\n return acc + curr.children.length;\n}, 0);","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"mutable selected = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"defaultCSS = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}