Public
Edited
Nov 4, 2024
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof plot = {
const leftPadding = 50; // Linken Abstand in Pixeln festlegen

const svg = d3.create("svg")
.attr("width", width)
.attr("height", height + 100); // Zusätzliche Höhe für die Legende
// Heatmap erstellen und in die verschobene SVG-Position integrieren
const heatmap = tp
.data(data)
.rect({
x: d => String(d.Jahr),
y: '~Monat',
fill: '~Einträge',
fillScheme: scales[color],
//note: '~Einträge',
//noteColor: d => d.einträge > 90 ? '#eee' : '#000',
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,
//background: '#fdfdfd',
})
.plot()
// Heatmap in die SVG einfügen
svg.node().appendChild(heatmap);

// Farbskala als Legende erstellen und unterhalb der Heatmap platzieren
const colorLegend = legend({
color: d3.scaleSequential([0, 100], d3.interpolateRdPu),
title: ""
});

// Legende unterhalb der Heatmap mit entsprechendem linken Abstand
d3.select(colorLegend).attr("transform", `translate(${20}, ${height + 30})`);
svg.node().appendChild(colorLegend);

// Schriftgröße der Legendentexte anpassen
d3.select(colorLegend).selectAll("text")
.style("font-size", "18px");

const padding = 1; // Abstand des Rahmens zum SVG-Rand, falls gewünscht
svg.append("rect")
.attr("x", padding) // x-Position mit Abstand
.attr("y", padding) // y-Position mit Abstand
.attr("width", width - padding * 2) // Breite minus doppeltes Padding
.attr("height", height + 96 + padding * 2) // Höhe minus doppeltes Padding
.attr("fill", "none") // Kein Füllfarbe
.attr("stroke", "gray") // Rahmenfarbe
.attr("stroke-width", 0.5); // Rahmenstärke

return svg.node(); // Rückgabe des SVG-Nodes
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more