Public
Edited
Apr 1
plot = Plot.plot({
width: width - 2 * 20,
height: 50 * yDomain.length,
insetLeft: marginLeft,
marginTop: 40,
padding: 0.1,
x: {
// domain: xDomain,
interval: "1 day", // in most cases smarter than setting a domain
type: "band"
},
y: {
domain: yDomain,
axis: null
},
color: {
domain: [0, maxMetric > minDistribution ? maxMetric : minDistribution],
range: ["#deebf7", "#9ecae1", "#3182bd"]
},
marks: [
Plot.axisY({
fontSize: width > 800 ? categoricalFontSize : categoricalFontSize * 0.75,
tickSize: 0,
label: null,
fontWeight: 600,
textAnchor: "start",
frameAnchor: "left",
textOverflow: "ellipsis-middle",
lineWidth: marginLeft / categoricalFontSize * 0.9
// 0.9 > for bold
}),
Plot.axisX({
fontSize: width > 800 ? 11 : 10,
label: null,
tickSize: 0,
anchor: "top",
interval: Plot.utcInterval("week"),
}),
Plot.cell(heatmapData, {
x: accessors.date,
y: accessors.dimension,
fill: accessors.metric,
r: 2,
strokeOpacity: 0.25,
channels: {
["Page views"]: accessors.metric,
["Previous"]: accessors.compareMetric
},
tip: {
format: {
x: true,
y: false,
fill: false
},
lineHeight: 1.4,
fontSize: 12
}
}),
]
});
xDomain = {
const extent = d3.extent(heatmapData, (d) => d.event_date);
const interval = d3.utcDay.every(1);
if (!interval) throw new Error("Failed to create time interval");
// Create the range of all required dates
const startDate = d3.utcDay.floor(extent[0]);
const endDate = d3.utcDay.floor(extent[1]);
return interval.range(startDate, d3.utcDay.offset(endDate, 1));
}
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.
