30:T7ea,style = html``31:[{"id":"1759483b5e7acfb53c6c7020e6f8ef29b9aba47ada215af96bd719462663c4681ab982615b9fbcc8fd7f1bb5f653b96a8c3171906616fc79b6dbd2c82129f108","href":"https://static.observableusercontent.com/files/1759483b5e7acfb53c6c7020e6f8ef29b9aba47ada215af96bd719462663c4681ab982615b9fbcc8fd7f1bb5f653b96a8c3171906616fc79b6dbd2c82129f108","name":"residental_grid_merged_summiert@2.csv","type":"text/csv","lastModified":1660830275441.632,"size":6874}] 2e:{"title":"Solardächer Grid V5","cells":[{"id":0,"value":"# Solardächer Grid V5","pinned":false,"hidden":false,"mode":"md"},{"id":590,"value":" \n \n\n","pinned":false,"hidden":false,"mode":"html"},{"id":754,"value":"## Um die Energiestrategie 2050 zu erreichen müssten 26% der Schweizer Dachflächen mit Solarpaneelen bedeckt sein.","pinned":false,"hidden":false,"mode":"md"},{"id":648,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":739,"value":"init()","pinned":true,"hidden":false,"mode":"ojs"},{"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 yellow: yellowColors(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":459,"value":"labels = [\n {text :'XX km2 Dachflächen in der Schweiz'},\n {text :'Potential 40%'},\n {text :'Ausbau bis 2050 26%'}\n ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":482,"value":"colors = ['#ce4631', '#e3b13e', '#8aabfd']","pinned":true,"hidden":false,"mode":"ojs"},{"id":553,"value":"yellowColors = d3.interpolateHcl(\"#e3d3b3\", \"#e3b13e\")","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":47,"value":"extent= d3.extent(dataNull, d => d.area)","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"scaleRect = d3.scaleSqrt().domain([0, 100000000]).range([1, mapRectSize])","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"// Weitere Schritte:\n// Daten: OSM landuse residental oder OSM buildings?\n// Design auf Solarpanels anpassen\n\ninit = 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) * mapPadding + centerMapX)\n .attr(\"y\", (d, i) => (d.id % 22) * mapPadding + centerMapY)\n .attr(\"width\", (d) => scaleRect(d.area))\n .attr(\"height\", (d) => scaleRect(d.area))\n .attr(\"fill\", (d) => d.red)\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":706,"value":"rows = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"squares = 348","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"toSwiss = function (rects) {\n let speed = 300;\n rects\n .transition()\n .duration(speed)\n .delay((d, i) => ((squares - i) * speed) / 100)\n .attr(\"x\", (d, i) => Math.floor((d.id - 1) / 20) * mapPadding + centerMapX)\n .attr(\"y\", (d, i) => (d.id % 22) * mapPadding + centerMapY)\n .attr(\"width\", (d) => scaleRect(d.area))\n .attr(\"height\", (d) => scaleRect(d.area))\n .attr(\"fill\", (d) => d.red);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":763,"value":"toSwissRoofs = function (rects) {\n let speed = 300;\n rects\n .transition()\n .duration(speed)\n .delay((d, i) => ((squares - i) * speed) / 100)\n .attr(\"x\", (d, i) => Math.floor((d.id - 1) / 20) * mapPadding + centerMapX)\n .attr(\"y\", (d, i) => (d.id % 22) * mapPadding + centerMapY)\n .attr(\"width\", (d) => scaleRect(d.area))\n .attr(\"height\", (d) => scaleRect(d.area))\n .attr(\"fill\", (d) => d.red);\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) => ((squares - i) * speed) / 100)\n .attr(\"y\", (d, i) => Math.floor(i / rows) * gridPadding + centerGridX)\n .attr(\"x\", (d, i) => (i % rows) * gridPadding + centerGridY)\n .attr(\"width\", rectSize)\n .attr(\"height\", rectSize)\n .attr(\"fill\", (d) => d.red);\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) => ((rows - Math.floor(i / rows)) * speed) / 10)\n .attr(\"fill\", (d, i) => (i < squares * 0.4 ? d.red : d.grey));\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) => ((rows - Math.floor(i / rows)) * speed) / 10)\n .attr(\"fill\", (d, i) =>\n i < squares * 0.26 ? d.blue : i < 348 * 0.4 ? d.red : d.grey\n );\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\", () =>\n toPotential(d3.selectAll(\"#square\"))\n );\n d3.select(\"#necessary\").on(\"click\", () =>\n toNecessary(d3.selectAll(\"#square\"))\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"width = innerWidth","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"## Grössen für Map","pinned":false,"hidden":false,"mode":"md"},{"id":394,"value":"mapRectSize = 18","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"value":"mapPadding = mapRectSize + 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":398,"value":"centerMapX = width/2 - mapPadding*36/2","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"centerMapY = height/2 - mapPadding*21/2","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"## Grössen für Grid","pinned":false,"hidden":false,"mode":"md"},{"id":354,"value":"rectSize = 14","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"gridPadding = rectSize + rectSize *.2","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"centerGridX = height/2 - gridPadding*20/2","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"centerGridY = width/2 - gridPadding*18/2","pinned":true,"hidden":false,"mode":"ojs"},{"id":479,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}