Notebooks 2.0 is here.
Software Engineer
chart = {
const root = tree(data);
console.log(root)
const svg = d3.create("svg");
console.log(root.links(),root.descendants())
svg.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5)
.selectAll("line")
.data(root.links())
.join("line")
.attr("x1",d=> d.source.x).attr("y1",d=>d.source.y)
.attr("x2",d=>d.target.x).attr("y2", d=>d.target.y-20)
.attr("transform", d => `
rotate(${d.target.x * 180 / Math.PI })`)
svg.append("g")
.selectAll("circle")
.data(root.descendants())
.join("circle")
.attr("transform", d => `
rotate(${d.x * 180 / Math.PI - 90})
translate(${d.y},0)
`)
.attr("fill", d => d.children ? "#555" : "#999")
.attr("r", d=>d.value);
return svg.attr("viewBox", autoBox).node();
}
line = d3.line()
.x(d => d.x)
.y(d => d.y)
function autoBox() {
document.body.appendChild(this);
const {x, y, width, height} = this.getBBox();
document.body.removeChild(this);
return [x, y, width, height];
}
data = d3.hierarchy(raw)
.sort((a, b) => d3.ascending(a.data.name, b.data.name))
raw=({
"name": "flare",
"value":50,
"children": [
{
"name": "analytics",
"value":20
},
{
"name": "animate"
,
"value":30
},
{
"name": "data",
"value":20
},
{
"name": "display"
,
"value":20
},
{
"name": "flex"
,
"value":20
},
{
"name": "physics"
,
"value":20
},
{
"name": "query"
,
"value":50
},
{
"name": "scale"
,
"value":20
},
{
"name": "util"
,
"value":40
},
{
"name": "vis"
,
"value":20
}
]
})
tree = d3.tree()
.size([2 * Math.PI, radius])
.separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth)
width = 954
radius = width / 2
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.
