viewof plot = {
const leftPadding = 50;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height + 100);
const heatmap = tp
.data(data)
.rect({
x: d => String(d.Jahr),
y: '~Monat',
fill: '~Einträge',
fillScheme: scales[color],
strokeWidth: 3,
stroke: '#fff'
})
.option({
width: width,
height: height,
grid: false,
axis: true,
tickLength: 10,
xLabelFontSize: 18,
yLabelFontSize: 18,
xAxisPosition: 'bottom',
xAxisPadding: 5,
yAxisPadding: 5,
yReverse: true,
yTitle: false,
xLabelRotate: 270,
xLabelPadding: 20,
yLabelPadding: 10,
xTickStep: 2,
plotTitle: 'Relative Anzahl an Tageseinträgen pro Monat',
plotTitleAlign: 'middle',
plotTitlePadding: 30,
plotTitleFontSize: 22,
})
.plot()
svg.node().appendChild(heatmap);
const colorLegend = legend({
color: d3.scaleSequential([0, 100], d3.interpolateRdPu),
title: ""
});
d3.select(colorLegend).attr("transform", `translate(${20}, ${height + 30})`);
svg.node().appendChild(colorLegend);
d3.select(colorLegend).selectAll("text")
.style("font-size", "18px");
const padding = 1;
svg.append("rect")
.attr("x", padding)
.attr("y", padding)
.attr("width", width - padding * 2)
.attr("height", height + 96 + padding * 2)
.attr("fill", "none")
.attr("stroke", "gray")
.attr("stroke-width", 0.5);
return svg.node();
}