Charts built with D3
Published
Edited
Oct 7, 2021
1 star
tree = d3.tree().size([height, height]);
chart = {
let fullHeight = height + margin.top + margin.bottom,
fullWidth = width + margin.left + margin.right;
let node = d3.symbol();
let svg = d3
.create("svg")
.attr("height", fullHeight)
.attr("width", fullWidth)
.attr("viewBox", `0 0 ${fullWidth} ${fullHeight}`);
let chart = svg
.append("g")
.classed("chart", true)
.attr("transform", `translate(${margin.left}, ${margin.top})`);
chart
.selectAll("path.link")
.data(root.links())
.join("path")
.classed("link", true)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("d", links)
.transition()
.duration(500)
.ease(d3.easeLinear)
.attrTween("stroke-dasharray", function () {
let len = this.getTotalLength();
return d3.interpolateString(`0 ${len}`, `${len} ${len}`);
});
chart
.selectAll("g.nodes")
.data(root.descendants())
.join("g")
.classed("nodes", true)
.attr("fill", "steelblue")
.attr("transform", (d) => `translate(${d.y}, ${d.x})`)
.append("path")
.attr("d", node());
chart
.selectAll("text.label")
.data(root.descendants())
.join("text")
.classed("label", true)
.attr("x", (d) => d.y + 10)
.attr("y", (d) => d.x)
.attr("dy", "0.3em")
.text((d) => d.data.name);
return svg.node();
}
d3 = require("d3@5")
import {select} from "@jashkenas/inputs"
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.
