chart = {
const svg = d3.create("svg")
.style("display", "block")
.attr("viewBox", [0, 0, width, height]);
const session = svg.append("g")
.attr("fill", "steelblue")
.selectAll("g")
.data(data)
.join("g")
.on("mouseover", (event) => event.currentTarget.style.fill = "red")
.on("mouseout", (event) => event.currentTarget.style.fill = "");
session.selectAll("rect")
.data(dayslice)
.join("rect")
.attr("x", ([start, end]) => x(day(start)))
.attr("width", ([start, end]) => x(day.offset(day(start))) - x(day(start)))
.attr("y", ([start, end]) => y(hours(start)))
.attr("height", ([start, end]) => y(hours(end) || 24) - y(hours(start)));
session.append("title")
.text(([start, end]) => `${start.toLocaleString("en", dateFormat)} →
${end.toLocaleString("en", dateFormat)}`);
svg.append("g")
.attr("pointer-events", "none")
.call(yAxis);
svg.append("g")
.attr("pointer-events", "none")
.call(xAxis);
return svg.node();
}
data = {
const parseTime = d3.timeParse("%Y-%m-%dT%H:%M"); // Local time!
return d3.csvParseRows(await FileAttachment("sleep@3.csv").text(), d => d.map(parseTime));
}
day = d3.timeDay
function dayslice([start, end]) {
let startDay = day(start);
let endDay = day(end);
let slices = [];
while (startDay < endDay) {
startDay = day.offset(startDay);
slices.push([start, startDay]);
start = startDay;
}
if (start < end) {
slices.push([start, end]);
}
return slices;
}
function hours(date) {
return date.getHours()
+ date.getMinutes() / 60
+ date.getSeconds() / (60 * 60)
+ date.getMilliseconds() / (60 * 60 * 1000);
}
xAxis = g => g
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x)
.tickFormat(formatDay)
.tickPadding(0))
.call(g => g.select(".domain").remove())
.call(g => g.selectAll(".tick text")
.attr("text-anchor", "start")
.attr("x", 6)
.attr("dy", null))
.call(g => g.selectAll(".tick line")
.attr("y1", -margin.top)
.attr("y2", height - margin.top))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y)
.ticks(24)
.tickFormat(formatHours)
.tickSize(-width + margin.left + margin.right)
.tickPadding(10))
.call(g => g.selectAll(".domain, .tick:first-of-type, .tick:last-of-type").remove())
.call(g => g.selectAll(".tick line").attr("stroke", "#fff").attr("stroke-width", 0.5));
x = d3.scaleTime()
.domain([
d3.timeDay.floor(d3.min(data, d => d[0])),
d3.timeDay.ceil(d3.max(data, d => d[1]))
])
.rangeRound([margin.left, width - margin.right])
.nice()
y = d3.scaleLinear()
.domain([0, 24])
.rangeRound([margin.top, height - margin.bottom])
formatHours = {
const format = d3.utcFormat("%-I %p");
return hours => format(new Date(hours * 1000 * 60 * 60));
}
formatDay = d3.timeFormat(width < 500 ? "%b" : "%B")
dateFormat = ({month: "short", day: "numeric", hour: "numeric", minute: "numeric"})
height = 600
margin = ({top: 16, right: 0, bottom: 0, left: 40})
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.
