31:T56d,## Reflexion Wir haben uns die Frage gestellt, wie viele Hausdächer mit Solarpaneelen bestückt werden müssen, um das Ziel des Bundes bis 2050 zu erreichen. Um diese Verhältnisse aufzuzeigen haben wir uns für einen Pixelgrid entschieden. Die Schweizerkarte am Anfang soll ein Gefühl dafür geben, wo diese Dachflächen zu verorten sind. Dafür habe ich in QGIS einen Grid aus 100 Quadratkilometer grossen Quadraten über die Schweiz gelegt und berechnet, wie viel Fläche innerhalb des jeweiligen Quadrates überbaut ist. Für den Wechsel zwischen Schweizerkarte und Pixelgrid brauchte es eine Animation. So soll aufgezeigt werden, dass es sich im Pixelgrid um genau diese Flächen aus der Schweizerkarte handelt. Dafür haben sich die D3 Transitions sehr gut angeboten. Die grösste Schwierigkeit in diesem Projekt war es , mit den unterschiedlichen Massstäben zurecht zu kommen. Durch die Legende im publizierten Stück wird dem Leser erklärt, dass ein Quadrat, welches auf der Karte 100 Quadratkilometer darstellt, im Pixelgrid nur 2 Quadratkilometer repräsentiert. In diesem Projekt konnte ich mich mit Animierten Visualisierungen auseinandersetzen. Zudem habe ich gelernt, wie man mit Rastern arbeitet und diese mit JavaScript positionieren kann. Die Daten und die Story hinter dieser Datenvisualisierung entstand in Zusammenarbeit mit Manuela Paganini und Jonas Oesch.32:T7ea,style = html``33:[{"id":"1759483b5e7acfb53c6c7020e6f8ef29b9aba47ada215af96bd719462663c4681ab982615b9fbcc8fd7f1bb5f653b96a8c3171906616fc79b6dbd2c82129f108","href":"https://static.observableusercontent.com/files/1759483b5e7acfb53c6c7020e6f8ef29b9aba47ada215af96bd719462663c4681ab982615b9fbcc8fd7f1bb5f653b96a8c3171906616fc79b6dbd2c82129f108","name":"residental_grid_merged_summiert@2.csv","type":"text/csv","lastModified":1668766074526.644,"size":6874}] 2f:{"title":"Muss bald jedes Dach ein Solardach sein?","cells":[{"id":0,"value":"# Muss bald jedes Dach ein Solardach sein?\n\n**Der Bund will Atomkraftwerke durch Solaranlagen ersetzen. Installiert werden sollen diese am liebsten auf den Hausdächern der Schweiz. Wir zeigen, wie sich das Stadtbild dadurch verändert und was es braucht, damit der Plan Form annimmt.**","pinned":false,"hidden":false,"mode":"md"},{"id":590,"value":" \n \n\n","pinned":false,"hidden":false,"mode":"html"},{"id":648,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":943,"value":"Über die Schweiz wurde ein Gitter aus 100 Quadratkilometer grossen Quadraten gelegt. Für jedes Quadrat wurde ermittelt, wie viele Quadratkilometer überbaut sind. Diese werden anteilsmässig angezeigt.\n\nQuellen: ZHAW, OpenStreetMap","pinned":false,"hidden":false,"mode":"md"},{"id":948,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":961,"value":"## Publikation\n\nDiese Datenvisualisierung wurde in Form eines Scrollytellings am 8. September 2022 in der [NZZ](https://www.nzz.ch/wirtschaft/muss-bald-jedes-dach-ein-solardach-sein-ld.1696357) publiziert.","pinned":false,"hidden":false,"mode":"md"},{"id":951,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":953,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"data = FileAttachment(\"residental_grid_merged_summiert@2.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"viewof table = Inputs.table(dataNull, {})","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"dataNull = data.filter(d => d.area != null)","pinned":true,"hidden":false,"mode":"ojs"},{"id":518,"value":"dataColor = dataNull.map((d, i) => ({\n ...d,\n red: redColors(Math.random(0, 1)),\n blue: blueColors(Math.random(0, 1)),\n grey: greyColors(Math.random(0, 1))\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":499,"value":"blueColors = d3.interpolateHcl(\"#D2E6FF\", \"#5E5AED\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":541,"value":"redColors = d3.interpolateHcl(\"#eacdc7\", \"#ce4631\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":570,"value":"greyColors = d3.interpolateHcl(\"#d4d4d7\", \"#909096\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":987,"value":"### Scales","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"scaleRect = d3.scaleSqrt().domain([0, 100000000]).range([0, rectSize])","pinned":true,"hidden":false,"mode":"ojs"},{"id":928,"value":"scaleRect(50000000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":985,"value":"init()","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"init = function () {\n let chart = d3.select(\".chart\");\n chart.selectAll(\"*\").remove();\n const g = chart.append(\"g\");\n //.attr(\"transform\", `translate(${margin.left}, ${margin.top})`);\n\n // Rects\n let rects = g\n .append(\"g\")\n .selectAll(\"rect\")\n .data(dataColor)\n .join(\"rect\")\n .attr(\"x\", (d, i) => Math.floor((d.id - 1) / 20) * rectPadding + centerMapX)\n .attr(\"y\", (d, i) => (d.id % mapRectsY) * rectPadding + centerMapY)\n .attr(\"width\", (d) => scaleRect(d.area))\n .attr(\"height\", (d) => scaleRect(d.area))\n //.attr(\"fill\", (d) => d.red)\n .attr(\"fill\", '#ce4631')\n .attr(\"stroke-width\", \"0px\")\n .attr(\"id\", \"square\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":623,"value":"### Transitionen","pinned":false,"hidden":false,"mode":"md"},{"id":604,"value":"toSwiss = function (rects) {\n let speed = 300;\n rects\n .transition()\n .duration(speed)\n .delay((d, i) => ((mapRectCount - i) * speed) / 100)\n .attr(\"x\", (d, i) => Math.floor((d.id - 1) / 20) * rectPadding + centerMapX)\n .attr(\"y\", (d, i) => (d.id % mapRectsY) * rectPadding + centerMapY)\n .attr(\"width\", (d) => scaleRect(d.area))\n .attr(\"height\", (d) => scaleRect(d.area))\n .attr(\"fill\", (d) => d.red)\n .attr(\"fill\", '#ce4631')\n .attr(\"opacity\", 1);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"toTotal = function (rects) {\n let speed = 300;\n // Animation von Karte zu Grid\n rects\n .transition()\n .duration(speed)\n .delay((d, i) => ((gridRectCount - i) * speed) / 100)\n .attr(\"y\", (d, i) => Math.floor(i / gridRectsX) * rectPadding + centerGridX)\n .attr(\"x\", (d, i) => (i % gridRectsX) * rectPadding + centerGridY)\n .attr(\"width\", rectSize)\n .attr(\"height\", rectSize)\n .attr(\"fill\", (d) => d.red)\n .attr(\"opacity\", (d, i) => i < gridRectCount? 1: 0);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":634,"value":"toPotential = function (rects) {\n let speed = 500;\n rects\n .transition()\n .duration(200)\n .delay((d, i) => ((gridRectsX - Math.floor(i / gridRectsX)) * speed) / 10)\n .attr(\"fill\", (d, i) => (i < gridRectCount * 0.4 ? d.red : d.grey))\n .attr(\"opacity\", (d, i) => i < gridRectCount? 1: 0);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":663,"value":"toNecessary = function (rects) {\n let speed = 500;\n rects\n .transition()\n .duration(500)\n .delay((d, i) => ((gridRectsX - Math.floor(i / gridRectsX)) * speed) / 10)\n .attr(\"fill\", (d, i) => i < gridRectCount * 0.26 ? d.blue : i < gridRectCount * 0.4 ? d.red : d.grey)\n .attr(\"opacity\", (d, i) => i < gridRectCount? 1: 0);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":621,"value":"Hier werden die EventListeners zu den Buttons hinzugefügt:","pinned":false,"hidden":false,"mode":"md"},{"id":606,"value":"{\n d3.select(\"#swiss\").on(\"click\", () => toSwiss(d3.selectAll(\"#square\")));\n d3.select(\"#total\").on(\"click\", () => toTotal(d3.selectAll(\"#square\")));\n d3.select(\"#potential\").on(\"click\", () => toPotential(d3.selectAll(\"#square\")));\n d3.select(\"#necessary\").on(\"click\", () => toNecessary(d3.selectAll(\"#square\")));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"width = rectPadding * mapRectsX","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"height = rectPadding * mapRectsY","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"rectSize = 18","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"rectPadding = rectSize + 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"### Grössen für Map","pinned":false,"hidden":false,"mode":"md"},{"id":916,"value":"mapRectCount = 348","pinned":true,"hidden":false,"mode":"ojs"},{"id":843,"value":"mapRectsX = 37","pinned":true,"hidden":false,"mode":"ojs"},{"id":846,"value":"mapRectsY = 22","pinned":true,"hidden":false,"mode":"ojs"},{"id":398,"value":"centerMapX = width/2 - rectPadding * mapRectsX / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"centerMapY = height/2 - rectPadding * mapRectsY / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"### Grössen für Grid","pinned":false,"hidden":false,"mode":"md"},{"id":914,"value":"gridRectCount = 332","pinned":true,"hidden":false,"mode":"ojs"},{"id":868,"value":"gridRectsX = 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":870,"value":"gridRectsY = 17","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"centerGridX = height/2 - rectPadding * gridRectsY / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"centerGridY = width/2 - rectPadding * gridRectsX / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":479,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}