chart = {
const root = pack(data);
const svg = d3.create("svg")
.attr("title", "Packed circle chart")
.attr("viewBox", [0, 0, width, height])
.style("font", "400 16px/1.4 'Source Sans Pro', 'Noto Sans', sans-serif")
.attr("text-anchor", "middle");
const node = svg.selectAll("g")
.data(d3.group(root.descendants(), d => d.height))
.join("g")
.selectAll("g")
.data(d => d[1])
.join("g")
.attr("transform", d => `translate(${d.x + 1},${d.y + 1})`);
node.append("circle")
.attr("r", d => d.r)
.attr("fill", d => color(d.height));
const leaf = node.filter(d => !d.children);
leaf.select("circle")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id);
leaf.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", d => d.leafUid.href);
leaf.append("text")
.attr("clip-path", d => d.clipUid) // Remove this if you want labels to extend outside circles
// .attr("display", d => d.r < 80 ? 'none' : 'inherit') // Uncomment this if you want to hide labels in small circles
.selectAll("tspan")
.data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g)) // Split words into their own tspans and lines
.join("tspan")
.attr("x", 0)
.attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`)
.attr("fill", "#40081C")
.text(d => d)
.clone(true)
.lower()
.attr("aria-hidden", "true")
// .style("text-shadow", "1px 1px 2px #40081C, -1px 1px 2px #40081C") // This doesn't export well
.attr("fill", "none")
.attr("stroke", "#FAEBF0")
.attr("stroke-width", 2)
.attr("stroke-linecap", "round")
.attr("stroke-linejoin", "round");
node.append("title")
.text(d => `${d.ancestors().map(d => d.data.name).reverse().join(" / ")}\nValue: ${d.value}`);
const groupLabel = svg.append("g")
.attr("pointer-events", "none")
.attr("text-anchor", "middle")
.selectAll("text")
.data(root.descendants())
.join("text")
.text(d => d.height === 1 ? d.data.name : '');
groupLabel
.attr("transform", d => `translate(${(d.x)}, ${(d.y - (d.r))})`)
.attr("dy", "-0.25em")
.attr("class", "repo-name")
.attr("fill", "#fff")
.clone(true)
.lower()
.attr("aria-hidden", "true")
// .style("text-shadow", "1px 1px 2px #40081C, -1px 1px 2px #40081C") // This doesn't export well
.attr("fill", "none")
.attr("stroke", "#6A1131")
.attr("stroke-width", 2)
.attr("stroke-linecap", "round")
.attr("stroke-linejoin", "round");
svg.append("text")
.attr("id", "byline")
.attr("x", width)
.attr("y", height)
.attr("dy", "-1em")
.attr("text-anchor", "end")
.text('@DiDoesDigital');
return svg.node();
}
data = ({
"name": "User",
"children": [
{
"name": "Connaissance",
"children": [
{
"name": "Produit",
"value": 4
},
{
"name": "Service",
"value": 4
},
{
"name": "Fournisseur",
"value": 4
},
{
"name": "Commercial",
"value": 6
}
]
},
{
"name": "Action",
"children": [
{
"name": "Faire",
"value": 8
},
{
"name": "Trouver",
"value": 4
},
{
"name": "Aller",
"value": 1
},
{
"name": "Vouloir",
"value": 1
},
{
"name": "Chercher",
"value": 3
},
{
"name": "Pouvoir",
"value": 3
},
{
"name": "Demander",
"value": 2
}]
},
{
"name": "Prestation",
"children": [
{
"name": "Solution",
"value": 2
},
{
"name": "Qualité",
"value": 4
},
{
"name": "Relation",
"value": 4
}
]
},
{
"name": "Frustration",
"children": [
{
"name": "Visibilité",
"value": 2
},
{
"name": "Temps",
"value": 4
},
{
"name": "Relation",
"value": 4
}
]
}
]
})
pack = data => d3.pack()
.size([width - 2, height - 2])
.padding(3)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value))
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.
