Willkommen im Tagebuch

Dieses Blog ist mein Backlog. Ich halte fest, woran ich grad arbeite, was ich analysiert habe und was mir dabei durch den Kopf geht. In erster Linie schreibe ich für mich. Wer mitliest, gern.

Drei Sorten Einträge sind geplant:

• Analysen mit Statistik: Auswertungen und was ich daraus lese.
• Projekt-Notizen: Zwischenstände zu Sachen, an denen ich baue.
• Alles andere, das mich grad beschäftigt.

Wie hier Zahlen aussehen

Diagramme entstehen direkt aus Code, nicht aus statischen Bildern. Sie bleiben im Browser interaktiv: Maus über die Linien für Details, Kästchen an und aus für einzelne Projekte.

projekte = ["Hitstar", "WM-Prognose", "EPUB-Druck"]

rng = d3.randomLcg(42)

data = projekte.flatMap((p, i) =>
  d3.range(1, 13).map(woche => ({
    projekt: p,
    woche: woche,
    stunden: Math.max(0, Math.round(6 + 4 * Math.sin(woche / 2 + i) + (rng() - 0.5) * 5))
  }))
)

viewof auswahl = Inputs.checkbox(projekte, {value: projekte, label: "Projekte:"})

Plot.plot({
  marginLeft: 50,
  marginBottom: 46,
  style: { background: "transparent", color: "#e7e0f0", fontSize: "13px" },
  x: { label: "Woche →", labelOffset: 38 },
  y: { label: "Stunden", labelAnchor: "center", grid: true },
  color: { legend: true, range: ["#b892ff", "#5ad1c9", "#f0a868"] },
  marks: [
    Plot.ruleY([0], { stroke: "#5a4a6a" }),
    Plot.lineY(data.filter(d => auswahl.includes(d.projekt)), {
      x: "woche",
      y: "stunden",
      stroke: "projekt",
      strokeWidth: 2.5,
      curve: "catmull-rom",
      marker: "circle",
      tip: true
    })
  ]
})

Das Diagramm entsteht aus den paar Zeilen Code darüber, ganz ohne Bilddatei. Für echte Einträge tausche ich die Beispieldaten gegen meine eigenen.