https://pronoun.is/he/him
Published
Edited
Nov 22, 2020
1 fork
md`# Duration plot`
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const bar = svg.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", margin.left)
.attr("y", (d, i) => y(i))
.attr("width", x)
.attr("height", y.bandwidth());
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
yAxis = (g) => g
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y))
xAxis = {
const SECOND = 1000;
const MINUTE = 60 * SECOND;
const HOUR = 60 * MINUTE;
const durationFormat = new Intl.NumberFormat("default", {
style: "unit",
unit: "hour",
maximumFractionDigits: 2,
unitDisplay: "short",
});
return (g) => g
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(
d3.axisBottom(x)
.ticks()
.tickFormat((ms) => durationFormat.format(ms / HOUR)),
)
}
y = d3.scaleBand()
.domain(d3.range(0, data.length))
.range([margin.top, height - margin.bottom])
.padding(0.1)
x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([margin.left, width - margin.right])
margin = ({top: 20, right: 50, bottom: 30, left: 40})
height = 300
d3 = require("d3@6");
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.
