3e:null 3f:["$","title",null,{"children":"Heatmap – Lösung | CAS Datenvisualisierung | Observable"}] 45:[{"id":"b7e9c45bf42f44ee36551f6301eb6d3f3c0b7a04e284dd1f76bb7d1d61ed632efbfccb474d093f76cf98d4dd8a320566a66a5ca6bd9980f9dd9e633c2f8627da","href":"https://static.observableusercontent.com/files/b7e9c45bf42f44ee36551f6301eb6d3f3c0b7a04e284dd1f76bb7d1d61ed632efbfccb474d093f76cf98d4dd8a320566a66a5ca6bd9980f9dd9e633c2f8627da","name":"Monatliche Temperaturen Schweiz.csv","type":"text/csv","lastModified":1647892939272.013,"size":17136},{"id":"2824d3d13a94eb7e86457f5e4abcc02a6606719f9dfcb1f872559d166fad2fa9d5d57d48add37289497bedc5acd06baff001d9e3c0bc70d9acb153e7abdaf54d","href":"https://static.observableusercontent.com/files/2824d3d13a94eb7e86457f5e4abcc02a6606719f9dfcb1f872559d166fad2fa9d5d57d48add37289497bedc5acd06baff001d9e3c0bc70d9acb153e7abdaf54d","name":"Monatliche Temperaturen Schweiz (nur Monate).csv","type":"text/csv","lastModified":1648070346563.962,"size":12040}] 43:{"id":"c2a7e7d7079f2af0","slug":"heatmap-1","title":"Heatmap – Lösung","thumbnail":"59c17143323de20407cdb4692717ea763a4d9a7c06ea7250a01273b88cf5a6cc","access_level":"public","create_time":"$D2022-03-21T19:27:39.332Z","update_time":"$D2022-04-04T10:00:45.811Z","view_time":null,"first_public_time":"$D2023-02-23T15:41:14.059Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f6ac14d015cd81f5","login":"cas-datenvisualisierung","name":"CAS Datenvisualisierung","avatar_url":"https://avatars-next.observableusercontent.com/4797d88ca1d2799854ec174eb3b8719bdc3acd9dfdf473bd9105d591ef7440a8","tier":"pro_2024","bio":""},"version":284,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c5a482094abe3334","login":"simon-pinkmartini","name":"Simon Schmid","avatar_url":"https://avatars-next.observableusercontent.com/fca6b36eeaa4819e1527bde4be8fb968483d4b3ab1f7c395336b0e4db32b928f","tier":null,"bio":"Journalist. Economics, data journalism, climate."}],"members":[{"type":"team","id":"f6ac14d015cd81f5","login":"cas-datenvisualisierung","name":"CAS Datenvisualisierung","avatar_url":"https://avatars-next.observableusercontent.com/4797d88ca1d2799854ec174eb3b8719bdc3acd9dfdf473bd9105d591ef7440a8","tier":"pro_2024","role":"editor"},{"type":"individual","id":"c5a482094abe3334","login":"simon-pinkmartini","name":"Simon Schmid","avatar_url":"https://avatars-next.observableusercontent.com/fca6b36eeaa4819e1527bde4be8fb968483d4b3ab1f7c395336b0e4db32b928f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":{"id":"45132bb4e513527e","slug":"5-exkurse","title":"5a Custom Graphics","owner":{"id":"f6ac14d015cd81f5","login":"cas-datenvisualisierung","name":"CAS Datenvisualisierung"}},"type":"notebook","body":{"titling":"auto","title":"Heatmap – Lösung","cells":[{"id":0,"value":"# Heatmap – Lösung\n\nAbweichung für zwölf Monate, vom Ganzjahresschnitt.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":156,"value":"\n

Temperaturen in der Schweiz

Abweichung vom langjährigen Schnitt

\n ${colorLegend}\n

\n \n

${tempPlot1}

Quelle: MeteoSchweiz

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"tempPlot1 = {\n // Äusserer Zeichnungsbereich\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"class\", \"chart\");\n\n // Innerer Zeichnungsbereich\n const g = svg\n .append(\"g\")\n .attr(\"transform\", `translate(${margin.left}, ${margin.top})`);\n\n // Achsen\n g.append(\"g\").attr(\"transform\", `translate(0, ${boundedHeight})`).call(xAxis);\n g.append(\"g\").attr(\"transform\", `translate(0, 0)`).call(yAxis);\n\n // Rechtecke hinzufügen (zeilenweise)\n months.forEach((month) => {\n g.append(\"g\")\n .selectAll(\"rect\")\n .data(data)\n .join(\"rect\")\n .attr(\"x\", (d) => x(d.time)) // horizontale Position: gemäss Jahr\n .attr(\"y\", y(month)) // vertikale Position: gemäss Monat\n .attr(\"width\", x.bandwidth)\n .attr(\"height\", y.bandwidth)\n .attr(\"fill\", (d) => color(d[month] - meanTemp)); // Farbe bestimmen\n });\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"##### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":188,"value":"#### Canvas Parameters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"margin = ({\n top: 10,\n bottom: 25,\n left: 25,\n right: 25\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"boundedWidth = width - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"boundedHeight = height - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"#### Color scale and legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"color = d3\n .scaleDiverging((t) => d3.interpolateRdBu(1 - t))\n .domain([-extent, 0, extent])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"colorLegend = Legend(color, { title: \"°C\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"#### Scales and axes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"x = d3\n .scaleBand()\n .domain(data.map((d) => d.time))\n .range([0, boundedWidth])\n .padding(0.05)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"y = d3.scaleBand().domain(months).range([0, boundedHeight]).padding(0.05)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"xAxis = d3\n .axisBottom(x)\n .tickValues(data.map((d) => d.time).filter((d) => d % 10 === 0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"yAxis = d3.axisLeft(y)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"#### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"meanTemp = d3.mean(data.map((d) => d.year))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"extent = 15","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"months = Object.keys(data[0]).slice(1, 13)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"data = FileAttachment(\"Monatliche Temperaturen Schweiz (nur Monate).csv\").csv({\n typed: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"#### Style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":250,"value":"import { style } from \"@cas-datenvisualisierung/style\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"style","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"