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":1661240990843.775,"size":6874}] 2e:{"title":"Solardächer Grid V6","cells":[{"id":0,"value":"# Solardächer Grid V6","pinned":false,"hidden":false,"mode":"md"},{"id":590,"value":" \n \n\n","pinned":false,"hidden":false,"mode":"html"},{"id":648,"value":"","pinned":true,"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 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":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([0, rectSize])","pinned":true,"hidden":false,"mode":"ojs"},{"id":928,"value":"scaleRect(50000000)","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":"$30","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}