Charts built with D3
Published
Edited
Jul 30, 2020
function chart(root){
let svg = d3.create("svg").attr("viewBox", "0 0 500 600")
let canvas = svg.append("g").classed("canvas", true).attr("transform", "translate(10, 300)")
canvas.append("g")
.classed("links", true)
.selectAll("path.link")
.data(root.links())
.join("path")
.classed("link", true)
.attr("d", treeLink)
.attr("stroke", "#eeeeee")
.attr("stroke-width", 0.8)
.attr("fill", "none")
canvas.append("g")
.classed("labels", true)
.selectAll("text.label")
.data(root.descendants())
.join("text")
.classed("label", true)
.attr("x", (d)=>(d.y + 5))
.attr("y", (d)=>d.x)
.attr("font-size", "0.5em")
.attr("dy", 2.5)
.text((d,i)=>d.data.name)
canvas.append("g")
.classed("nodes", true)
.selectAll("circle.node")
.data(root.descendants())
.join("circle")
.classed("node", true)
.attr("cx", (d)=>d.y)
.attr("cy", (d)=>d.x)
.attr("r", 1.5)
.attr("fill", "black")
return svg.node();
}
tree = d3.tree().size([300, 300]).nodeSize([10, 150])
treeRoot = tree(hierarchySD)
chart(treeRoot)
cluster = d3.cluster().size([300, 300])
clusterRoot = cluster(hierarchySD)
chart(clusterRoot)
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.
