chart = {
const root = pack(data);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("font-size", 12)
.attr("font-family", "sans-serif")
.attr("text-anchor", "middle");
const leaf = svg.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x + 1},${d.y + 1})`);
leaf.append("circle")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
.attr("r", d => d.r)
.attr("fill-opacity", 0.7)
.attr("fill", d => color(d.data.distance));
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)
.selectAll("tspan")
.data(d => d.data.planet.split(/(?=[A-Z][^A-Z])/g))
.join("tspan")
.attr("x", 0)
.attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`)
.text(d => d);
leaf.append("title")
.text(d => `${d.data.planet}\n${d.data.radius}`);
return svg.node();
}
data = [ {
"planet": "Earth",
"distance": 0,
"radius": 1
},
{
"planet": "Proxima Centauri b",
"distance": 4.24,
"radius": 0.9
},
{
"planet": "Bernard's Star b",
"distance": 5.96,
"radius": 4.1
},
{
"planet": "Wolf 359 c",
"distance": 7.9,
"radius": 3.8
},
{
"planet": "Wolf 359 b",
"distance": 7.9,
"radius": 43.9
},
{
"planet": "Lalande 21185 b",
"distance": 8.31,
"radius": 2.9
},
{
"planet": "Lacaille 9352 b",
"distance": 10.7,
"radius": 4.1
},
{
"planet": "Lacaille 9352 c",
"distance": 10.7,
"radius": 9
},
{
"planet": "Lacaille 9352 d",
"distance": 10.7,
"radius": 6.5
},
{
"planet": "Ross 128 b",
"distance": 11,
"radius": 1.4
}
]
pack = data => d3.pack()
.size([width - 2, height - 2])
.padding(3)
(d3.hierarchy({children: data})
.sum(d => d.radius))
width = 1000
height = width
format = d3.format(",d")
color = d3.scaleOrdinal(data.map(d => d.group), d3.schemeCategory10)
d3 = require("d3@5")
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.
