Merge branch 'main' of [email protected]:CodeforKarlsruhe/klimadashboard…

…-ka.git into main
CodeforKarlsruhe · Mar 2, 2024 · ca480c8 · ca480c8
2 parents 2897285 + c2f678e
commit ca480c8
Show file tree

Hide file tree

Showing 16 changed files with 311 additions and 44 deletions.
diff --git a/gamification/quiz/estimation_questions.csv b/gamification/quiz/estimation_questions.csv
@@ -6,3 +6,8 @@ adult,1,DE,Wie viele Menschen nutzen das Auto?,google.de,50%
 adult,2,DE,Wie viele Menschen nutzen das Auto?,google.de,25%
 adult,3,DE,Wie viele Menschen nutzen das Auto?,google.de,10%
 adult,1,DE,Wie viele Kraftfahrzeuge hat Karlsruhe auf 1000 Einwohner?, google.de, 50%
+adult,2,DE,Wie viele Kraftfahrzeuge hat Karlsruhe auf 1000 Einwohner?, google.de, 25%
+adult,3,DE,Wie viele Kraftfahrzeuge hat Karlsruhe auf 1000 Einwohner?, google.de, 10%
+adult,1,DE,Wie viele Menschen haben 2021 öffentliche Verkehrsmitteln genutzt?, kvv, 50%
+adult,2,DE,Wie viele Menschen haben 2021 öffentliche Verkehrsmitteln genutzt?, kvv, 25%
+adult,3,DE,Wie viele Menschen haben 2021 öffentliche Verkehrsmitteln genutzt?, kvv, 10%
diff --git a/gamification/quiz/quiz_questions.csv b/gamification/quiz/quiz_questions.csv
@@ -5,3 +5,6 @@ student,2,DE,Was war 2023 der wärmste Monat?,google.de,x,y,z,a
 student,2,DE, Welches Verkehrsmittel ist am Klimafreundlichsten?,google.de,Fahrrad, Auto, Bahn, Flugzeug
 adult,1,DE,Welcher Stadteil von Karlsruhe war 2021 am größten?, https://transparenz.karlsruhe.de/dataset/jahrbuch/resource/9796c2af-2d10-4631-bb05-2f86840b102e?inner_span=True, Durlach, Daxlanden, Knielingen, Nordweststadt
 student,3,DE, Welcher Energieträger gehört nicht zu den erneuerbaren Energien?,google.de,Atomkraftwerk, Solarenergie, Windkraft, Wasserkraftwerk
+adult,3,DE, Welche Art von Nutzfahrzeugen werden in Karlsruhe 2021 am  meisten genutzt?, https://transparenz.karlsruhe.de/dataset/jahrbuch/resource/9796c2af-2d10-4631-bb05-2f86840b102e?inner_span=True, Benzin, Diesel, Elektro, Hybrid
+student,3,DE, Welcher ENergieträger wurde 2019 am häufigsten genutzt?,google.de,Kraftstoff, Kohle, Fernwärme, Erdgas
+student,2,DE, Wie viele Nutzer waren bei Car-Sharing 2021 angemeldet?,google.de,18.000, 15.000, 21.000, 30.000
diff --git a/src/app/api/test-data3/route.ts b/src/app/api/test-data3/route.ts
@@ -6,9 +6,7 @@ import { SRC } from "./mobile Feinstaubdaten Hackathon";
 
 const fmt = dsv.dsvFormat(",");
 
-export async function GET(
-  req: NextRequest,
-): Promise<NextResponse> {
+export async function GET(req: NextRequest): Promise<NextResponse> {
   let agg: {
     time: string;
     min: number;
@@ -23,17 +21,10 @@ export async function GET(
     (x) => Number.parseInt(x["ID"]) >= 0 && Number.parseInt(x["ID"]) <= 4,
   );
 
-  const data3 = d3.map(
-    data2,
-    (row) => ({
-      ...row,
-      "combinedTime": Date.parse(
-        row["Datum"] + "T" +
-          row["Zeit"] +
-          ".000Z",
-      ),
-    }),
-  );
+  const data3 = d3.map(data2, (row) => ({
+    ...row,
+    combinedTime: Date.parse(row["Datum"] + "T" + row["Zeit"] + ".000Z"),
+  }));
 
   const data4 = d3.sort(data3, (x, y) => x["combinedTime"] - y["combinedTime"]);
 

diff --git a/src/app/api/test-data4/data.ts b/src/app/api/test-data4/data.ts
@@ -0,0 +1,69 @@
+const DATA = `year,category,type,co2,note
+2007,Private Haushalte,real,715.7857296,BICO2BW-Bilanz
+2007,Gewerbe+Sonstiges,real,549.7853971,BICO2BW-Bilanz
+2007,Industrie,real,1243.614282,BICO2BW-Bilanz
+2007,Stadt,real,56.10044454,BICO2BW-Bilanz
+2007,Verkehr,real,711.03089,BICO2BW-Bilanz
+2008,Private Haushalte,real,697.5581534,BICO2BW-Bilanz
+2008,Gewerbe+Sonstiges,real,545.0097993,BICO2BW-Bilanz
+2008,Industrie,real,1140.871711,BICO2BW-Bilanz
+2008,Stadt,real,50.97856918,BICO2BW-Bilanz
+2008,Verkehr,real,702.205135,BICO2BW-Bilanz
+2009,Private Haushalte,real,628.371129,BICO2BW-Bilanz
+2009,Gewerbe+Sonstiges,real,658.8991141,BICO2BW-Bilanz
+2009,Industrie,real,597.5579779,BICO2BW-Bilanz
+2009,Stadt,real,56.69074899,BICO2BW-Bilanz
+2009,Verkehr,real,684.0569772,BICO2BW-Bilanz
+2010,Private Haushalte,real,621.9082222,BICO2BW-Bilanz
+2010,Gewerbe+Sonstiges,real,667.7497841,BICO2BW-Bilanz
+2010,Industrie,real,689.4283378,BICO2BW-Bilanz
+2010,Stadt,real,57.32559262,BICO2BW-Bilanz
+2010,Verkehr,real,715.8740622,BICO2BW-Bilanz
+2011,Private Haushalte,real,615.9078358,BICO2BW-Bilanz
+2011,Gewerbe+Sonstiges,real,685.6976806,BICO2BW-Bilanz
+2011,Industrie,real,565.8099097,BICO2BW-Bilanz
+2011,Stadt,real,56.18431549,BICO2BW-Bilanz
+2011,Verkehr,real,740.1116281,BICO2BW-Bilanz
+2012,Private Haushalte,real,623.0563941,BICO2BW-Bilanz
+2012,Gewerbe+Sonstiges,real,699.9896774,BICO2BW-Bilanz
+2012,Industrie,real,621.3028508,BICO2BW-Bilanz
+2012,Stadt,real,57.30441635,BICO2BW-Bilanz
+2012,Verkehr,real,751.6276603,BICO2BW-Bilanz
+2013,Private Haushalte,real,617.9786349,BICO2BW-Bilanz
+2013,Gewerbe+Sonstiges,real,696.4071405,BICO2BW-Bilanz
+2013,Industrie,real,610.1295835,BICO2BW-Bilanz
+2013,Stadt,real,58.89856204,BICO2BW-Bilanz
+2013,Verkehr,real,718.0446757,BICO2BW-Bilanz
+2014,Private Haushalte,real,590.6941375,BICO2BW-Bilanz
+2014,Gewerbe+Sonstiges,real,669.4391353,BICO2BW-Bilanz
+2014,Industrie,real,596.5971585,BICO2BW-Bilanz
+2014,Stadt,real,55.1173043,BICO2BW-Bilanz
+2014,Verkehr,real,720.9729018,BICO2BW-Bilanz
+2015,Private Haushalte,real,572.8919902,BICO2BW-Bilanz
+2015,Gewerbe+Sonstiges,real,652.768532,BICO2BW-Bilanz
+2015,Industrie,real,551.3734595,BICO2BW-Bilanz
+2015,Stadt,real,53.53516003,BICO2BW-Bilanz
+2015,Verkehr,real,720.4470444,BICO2BW-Bilanz
+2016,Private Haushalte,real,565.495805,BICO2BW-Bilanz
+2016,Gewerbe+Sonstiges,real,625.9263231,BICO2BW-Bilanz
+2016,Industrie,real,529.920139,BICO2BW-Bilanz
+2016,Stadt,real,50.48617793,BICO2BW-Bilanz
+2016,Verkehr,real,737.855184,BICO2BW-Bilanz
+2017,Private Haushalte,real,548.5219508,BICO2BW-Bilanz
+2017,Gewerbe+Sonstiges,real,593.2834612,BICO2BW-Bilanz
+2017,Industrie,real,546.8242273,BICO2BW-Bilanz
+2017,Stadt,real,49.43572772,BICO2BW-Bilanz
+2017,Verkehr,real,740.5684128,BICO2BW-Bilanz
+2018,Private Haushalte,real,561.7789551,BICO2BW-Bilanz
+2018,Gewerbe+Sonstiges,real,589.4456169,BICO2BW-Bilanz
+2018,Industrie,real,491.0646023,BICO2BW-Bilanz
+2018,Stadt,real,52.06610186,BICO2BW-Bilanz
+2018,Verkehr,real,710.5163637,BICO2BW-Bilanz
+2019,Private Haushalte,real,548.4206526,BICO2BW-Bilanz
+2019,Gewerbe+Sonstiges,real,574.8490281,BICO2BW-Bilanz
+2019,Industrie,real,474.1086754,BICO2BW-Bilanz
+2019,Stadt,real,47.19236622,BICO2BW-Bilanz
+2019,Verkehr,real,706.5434952,BICO2BW-Bilanz
+`
+
+export default DATA;
diff --git a/src/app/api/test-data4/route.ts b/src/app/api/test-data4/route.ts
@@ -0,0 +1,22 @@
+import * as d3 from "d3";
+import * as geo from "d3-geo";
+import * as dsv from "d3-dsv";
+import { NextRequest, NextResponse } from "next/server";
+import csvInput from './data';
+
+export async function GET(
+  req: NextRequest,
+): Promise<NextResponse> {
+  let agg: {
+    time: string;
+    min: number;
+    max: number;
+    mean: number;
+  }[] = [];
+
+  const data = d3.csvParse(csvInput);
+
+  return NextResponse.json({
+    data: data,
+  });
+}
diff --git a/src/app/data.ts b/src/app/data.ts
@@ -17,6 +17,16 @@ export function useData1() {
   };
 }
 
+export function useData4() {
+  const { data, error, isLoading } = useSWR(`/api/test-data4`, fetcher);
+
+
+  return {
+    data: data,
+    isLoading,
+    isError: error,
+  };
+}
 export function useData3() {
   const { data, error, isLoading } = useSWR(`/api/test-data3`, fetcher);
 

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,33 +1,42 @@
 import EnergyMixChart from "@/components/EnergyMixChart";
-import SoilTemperatureChart from "@/components/SoilTemperatureChart";
+import EnergySectorChart from "@/components/EnergySectorChart";
 import ExampleChart2 from "@/components/example-chart2";
 import ExampleChart from "@/components/example-chart";
 import ExampleChart3 from "@/components/example-chart3";
+import GreenhouseGasesChart from "@/components/GreenhouseGasesChart";
+import CarsharingChart from "@/components/CarsharingChart";
 
 export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center bg-zinc-200 text-black">
-      <header className="p-12">
+      <header className="p-12 mt-12">
         <h1 className="text-4xl font-bold">
           Klimadashboard der Stadt{" "}
           <span className="text-sky-500">Karlsruhe</span>
         </h1>
       </header>
-      <div>
-        <h2>Klima</h2>
-        <div className="grid grid-cols-1 xl:grid-cols-2 gap-12">
-          <SoilTemperatureChart />
-          <ExampleChart />
+      <div className="flex flex-col gap-12 mb-12">
+        <div>
+          <h2 className="text-2xl font-bold mb-2">Klima</h2>
+          <div className="grid grid-cols-1 xl:grid-cols-2 gap-12">
+            <ExampleChart2 />
+            <GreenhouseGasesChart />
+            <ExampleChart />
+          </div>
         </div>
-        <h2>Energie</h2>
-        <div className="grid grid-cols-1 xl:grid-cols-2 gap-12">
-          <EnergyMixChart />
-          <ExampleChart3 />
+        <div>
+          <h2 className="text-2xl font-bold mb-2">Energieverbrauch</h2>
+          <div className="grid grid-cols-1 xl:grid-cols-2 gap-12">
+            <EnergyMixChart />
+            <EnergySectorChart />
+          </div>
         </div>
-        <h2>Verkehr</h2>
-        <div className="grid grid-cols-1 xl:grid-cols-2 gap-12">
-          <ExampleChart2 />
-          <ExampleChart2 />
+        <div>
+          <h2 className="text-2xl font-bold mb-2">Verkehr</h2>
+          <div className="grid grid-cols-1 xl:grid-cols-2 gap-12">
+            <ExampleChart3 />
+            <CarsharingChart />
+          </div>
         </div>
       </div>
       <footer className="bg-white w-full mt-auto flex justify-between items-center py-10 px-20 gap-4 border-t-gray-300 border-t-2">

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -10,8 +10,8 @@ const Card = ({
   return (
     <div className="bg-zinc-100 p-8 rounded-md flex flex-col gap-4">
       <h1 className="text-xl font-bold">{title}</h1>
-      {children}
       <span className="text-xs text-gray-400">{description}</span>
+      {children}
     </div>
   );
 };

diff --git a/src/components/CarsharingChart.tsx b/src/components/CarsharingChart.tsx
@@ -0,0 +1,46 @@
+"use client";
+import PlotFigure from "@/components/PlotFigure";
+import Card from "@/components/Card";
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+import { useEffect, useMemo, useRef } from "react";
+import useSWR from "swr";
+
+const fetcher = (input: URL | RequestInfo, init?: RequestInit | undefined) =>
+  fetch(input, init).then((res) => res.json());
+
+const CarsharingChart = () => {
+  const containerRef = useRef();
+
+  const { data } = useSWR("api/test-data2", fetcher);
+
+  const data2 = useMemo(
+    () =>
+      data?.data
+        ?.filter((d) => d[1] === "Angemeldete Carsharing-Nutzer*")
+        .map((d) => ({
+          year: d[2],
+          value: d[3],
+        })),
+    [data]
+  );
+
+  useEffect(() => {
+    if (data2) {
+      const plot = Plot.plot({
+        color: { legend: true, scheme: "BuYlRd" },
+        marks: [Plot.lineY(data2, { x: "year", y: "value" })],
+      });
+      containerRef.current.append(plot);
+      return () => plot.remove();
+    }
+  }, [data2]);
+
+  return (
+    <Card title="Angemeldete Carsharing-Nutzer" description="Teilnehmer">
+      <div ref={containerRef} />
+    </Card>
+  );
+};
+
+export default CarsharingChart;
diff --git a/src/components/EnergyMixChart.tsx b/src/components/EnergyMixChart.tsx
@@ -23,15 +23,17 @@ const EnergyMixChart = () => {
           source: d[1],
           value: d[3],
         })),
-    [data]
+    [data],
   );
-  console.log("xxx", data2);
 
   useEffect(() => {
     if (data2) {
       const plot = Plot.plot({
-        color: { legend: true, scheme: "BuRd" },
-        marks: [Plot.barY(data2, { x: "year", y: "value", fill: "source" })],
+        color: { legend: true, scheme: "BuYlRd" },
+        marks: [
+          Plot.barY(data2, { x: "year", y: "value", fill: "source" }),
+          Plot.crosshair(data2, { x: "year", y: "value" }),
+        ],
       });
       containerRef.current.append(plot);
       return () => plot.remove();

diff --git a/src/components/EnergySectorChart.tsx b/src/components/EnergySectorChart.tsx
@@ -0,0 +1,50 @@
+"use client";
+import PlotFigure from "@/components/PlotFigure";
+import Card from "@/components/Card";
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+import { useEffect, useMemo, useRef } from "react";
+import useSWR from "swr";
+
+const fetcher = (input: URL | RequestInfo, init?: RequestInit | undefined) =>
+  fetch(input, init).then((res) => res.json());
+
+const EnergySectorChart = () => {
+  const containerRef = useRef();
+
+  const { data } = useSWR("api/test-data2", fetcher);
+
+  const data2 = useMemo(
+    () =>
+      data?.data
+        ?.filter((d) => d[0] === "Energieverbrauch nach Sektoren")
+        .map((d) => ({
+          year: d[2],
+          source: d[1],
+          value: d[3],
+        })),
+    [data],
+  );
+
+  useEffect(() => {
+    if (data2) {
+      const plot = Plot.plot({
+        color: { legend: true, scheme: "BuYlRd" },
+        marks: [
+          Plot.barY(data2, { x: "year", y: "value", fill: "source" }),
+          Plot.crosshair(data2, { x: "year", y: "value" }),
+        ],
+      });
+      containerRef.current.append(plot);
+      return () => plot.remove();
+    }
+  }, [data2]);
+
+  return (
+    <Card title="Energieverbrauch nach Sektoren" description="Einheit GWh">
+      <div ref={containerRef} />
+    </Card>
+  );
+};
+
+export default EnergySectorChart;
diff --git a/src/components/GreenhouseGasesChart.tsx b/src/components/GreenhouseGasesChart.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+import { useData4 } from "@/app/data";
+import Card from "./Card";
+
+const GreenhouseGasesChart: React.FC = () => {
+  const { data, isError, isLoading } = useData4();
+
+  const containerRef = useRef();
+
+  useEffect(() => {
+    if (isLoading || !data) return;
+
+    const betterData = data.data.map(({ co2, ...x }) => ({
+      co2: parseInt(co2),
+      ...x,
+    }));
+
+    const plot = Plot.plot({
+      color: { legend: true },
+      marks: [
+        Plot.rectY(betterData, {
+          x: "year",
+          y: "co2",
+          fill: "category",
+        }),
+        Plot.crosshair(betterData, { x: "year", y: "co2" }),
+      ],
+    });
+
+    containerRef.current.append(plot);
+    return () => plot.remove();
+  }, [isLoading, data]);
+
+  return (
+    <Card
+      title="Treibhaus Gase"
+      description="Treibhaus Gase von verschiedenen Quellen in den letzten Jahren"
+    >
+      <div ref={containerRef} />
+    </Card>
+  );
+};
+
+export default GreenhouseGasesChart;