Published
Edited
Apr 26, 2019
md`# Workload peer prototype`
d3 = require("d3@5")
data = [{
name: "flare",
children: [
{
name: "Providing",
children: [
{
name: "22 TCP",
children: [
{
name: "Web",
children: [
{
name: "Web Server 1",
volume: 20,
value: 1,
},
{
name: "Web Server 2",
volume: 50,
value: 1,
}
]
},
{
name: "Processing",
children: [
{
name: "Processing Server 1",
volume: 10,
value: 1,
},
{
name: "Processing Server 2",
volume: 40,
value: 1,
}
]
}
]
},
{
name: "3306 TCP",
children: [
{
name: "Web",
children: [
{
name: "Web Server 1",
volume: 20,
value: 1,
},
{
name: "Web Server 2",
volume: 50,
value: 1,
}
]
},
{
name: "Processing",
children: [
{
name: "Processing Server 1",
volume: 10,
value: 1,
},
{
name: "Processing Server 2",
volume: 40,
value: 1,
}
]
}
]
}
]
},
{
name: "Consuming",
children: [
{
name: "22 TCP",
children: [
{
name: "Web",
children: [
{
name: "Web Server 1",
volume: 20,
value: 1,
},
{
name: "Web Server 2",
volume: 50,
value: 1,
},
{
name: "Web Server 3",
volume: 20,
value: 1,
},
{
name: "Web Server 4",
volume: 50,
value: 1,
}
]
},
{
name: "Processing",
children: [
{
name: "Processing Server 1",
volume: 10,
value: 1,
},
{
name: "Processing Server 2",
volume: 40,
value: 1,
}
]
}
]
},
{
name: "3306 TCP",
children: [
{
name: "Web",
children: [
{
name: "Web Server 3",
volume: 20,
value: 1,
},
{
name: "Web Server 4",
volume: 50,
value: 1,
}
]
},
{
name: "Processing",
children: [
{
name: "Processing Server 1",
volume: 10,
value: 1,
},
{
name: "Processing Server 2",
volume: 40,
value: 1,
}
]
}
]
}
]
}
]
}][0]
width = 932
radius = width / 2
console.log(data)
color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1))
format = d3.format(",d")
arc = d3.arc()
.startAngle(d => d.x0)
.endAngle(d => d.x1)
.padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))
.padRadius(radius / 2)
.innerRadius(d => d.y0)
.outerRadius(d => {
if (d.data.volume) {
return d.y0 + deltaY * d.data.volume / maxVolume
}
return d.y1 - 1
})
maxVolume = d3.max(partition(data).descendants().filter(d => d.data.volume).map(d => d.data.volume))
deltaY = partition(data).y1
console.log(partition(data))
function autosize(svg) {
document.body.appendChild(svg);
const box = svg.getBBox();
document.body.removeChild(svg);
svg.setAttribute("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`);
return svg;
}
partition = data => d3.partition()
.size([2 * Math.PI, radius])
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value))
chart = {
const root = partition(data);
const svg = d3.select(DOM.svg(width, width))
.style("width", "100%")
.style("height", "auto")
.style("padding", "10px")
.style("font", "10px sans-serif")
.style("box-sizing", "border-box");
svg.append("g")
.attr("fill-opacity", 0.6)
.selectAll("path")
.data(root.descendants().filter(d => d.depth))
.enter().append("path")
.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
.attr("d", arc)
.append("title")
.text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);
console.log(root)
svg.append("g")
.attr("pointer-events", "none")
.attr("text-anchor", "middle")
.selectAll("text")
.data(root.descendants().filter(d => d.depth && (d.y0 + d.y1) / 2 * (d.x1 - d.x0) > 10))
.enter().append("text")
.attr("transform", function(d) {
const x = (d.x0 + d.x1) / 2 * 180 / Math.PI;
const y = (d.y0 + d.y1) / 2;
return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;
})
.attr("dy", "0.35em")
.text(d => d.data.name);
return autosize(svg.node());
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
