selection
chart = {
const root = tree(data);
const svg = d3.create("svg");
svg.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5)
.selectAll("path")
.data(root.links())
.join("path")
.attr("d", d3.linkRadial()
.angle(d => d.x)
.radius(d => d.y));
svg.append("g")
.selectAll("circle")
.data(root.descendants())
.join("circle")
.attr('id', d=>d.data.id)
.attr("transform", d => `
rotate(${d.x * 180 / Math.PI - 90})
translate(${d.y},0)
`)
.attr("fill", d => d.children ? "#555" : "#999")
.attr("r", 2.5)
svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.selectAll("text")
.data(root.descendants())
.join("text")
.attr("transform", d => `
rotate(${d.x * 180 / Math.PI - 90})
translate(${d.y},0)
rotate(${d.x >= Math.PI ? 180 : 0})
`)
.attr("dy", "0.31em")
.attr("x", d => d.x < Math.PI === !d.children ? 6 : -6)
.attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end")
.text(d => d.data.id)
.clone(true).lower()
.attr("stroke", "white");
svg.selectAll("circle")
.on("click", function(d){
var sel = d3.select(this)
if(sel.attr("class") != "active"){
sel.classed("active", true)
.attr("fill", d => d.children ? "#008f39" : "#00b347")
.attr("r", 4)
} else {
sel.attr("fill", d =>d.children ? "#555" : "#999")
.attr("r", 2.5)
.classed("active", false)
}
})
// .on("mouseout", function(d){
// console.log(this)
// d3.select(this)
// .attr("fill", d =>d.children ? "#555" : "#999")
// .attr("r", 2.5)
// })
return svg.attr("viewBox", autoBox).node();
}
circleSize = 5
squareSize = 8
chart1 = {
const root = tree(data);
const svg = d3.create("svg");
svg.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5)
.selectAll("path")
.data(root.links())
.join("path")
.attr("d", d3.linkRadial()
.angle(d => d.x)
.radius(d => d.y));
svg.append("g")
.selectAll("rect")
.data(root.descendants())
.join("rect")
.attr('id', d=>d.data.id)
.attr("transform", d => `
rotate(${d.x * 180 / Math.PI - 90})
translate(${d.y-(circleSize/2)},${-(circleSize/2)})
`)
.attr("fill", d => d.children ? "#555" : "#999")
.attr("rx",circleSize)
.attr("ry",circleSize)
.attr("width",circleSize)
.attr("height",circleSize)
svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.selectAll("text")
.data(root.descendants())
.join("text")
.attr("transform", d => `
rotate(${d.x * 180 / Math.PI - 90})
translate(${d.y},0)
rotate(${d.x >= Math.PI ? 180 : 0})
`)
.attr("dy", "0.31em")
.attr("x", d => d.x < Math.PI === !d.children ? 6 : -6)
.attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end")
.text(d => d.data.id)
.clone(true).lower()
.attr("stroke", "white");
svg.selectAll("rect")
.on("click", function(d){
var sel = d3.select(this)
console.log(sel)
if(sel.attr("class") != "active"){
sel.classed("active", true)
.attr("fill", d => d.children ? "#008f39" : "#00b347")
.transition().attr("rx",0)
.attr("ry",0)
.attr("width",squareSize)
.attr("height",squareSize)
.attr("transform", d => `
rotate(${d.x * 180 / Math.PI - 90})
translate(${d.y-(squareSize/2)},${-(squareSize/2)})
`)
} else {
sel.attr("fill", d =>d.children ? "#555" : "#999")
.classed("active", false)
.attr("rx",circleSize)
.attr("ry",circleSize)
.transition().attr("width",circleSize)
.attr("height",circleSize)
.attr("transform", d => `
rotate(${d.x * 180 / Math.PI - 90})
translate(${d.y-(circleSize/2)},${-(circleSize/2)})
`)
}
})
// .on("mouseout", function(d){
// console.log(this)
// d3.select(this)
// .attr("fill", d =>d.children ? "#555" : "#999")
// .attr("r", 2.5)
// })
return svg.attr("viewBox", autoBox).node();
}
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(await selection.json())
.sort((a, b) => d3.ascending(a.data.name, b.data.name))
tree = d3.tree()
.size([2 * Math.PI, radius])
.separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth)
width = 954
radius = width / 2
import {checkbox, slider, select} from "@jashkenas/inputs"
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.
