2a:null 2b:["$","title",null,{"children":"Solardächer Grid V6 | Cian Jochem | Observable"}] 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:{"id":"0362318597bde9c0","slug":"solardacher-grid-v6","title":"Solardächer Grid V6","thumbnail":"8d807adf4e0a274ce048adf27b5e97908b84a327777a70b081b78fa54a3f5d84","access_level":"public","create_time":"$D2022-08-23T07:49:50.843Z","update_time":"$D2022-08-24T14:47:06.963Z","view_time":null,"first_public_time":"$D2022-08-23T13:22:15.850Z","has_unpublished_edits":null,"fork":{"id":"2e77c2afd6e80f97","slug":"solardacher-grid-v5","title":"Solardächer Grid V5","owner":{"id":"1562866c628110c3","login":"jochem","name":"Cian Jochem"}},"stars":1,"starred":false,"owner":{"type":"team","id":"1562866c628110c3","login":"jochem","name":"Cian Jochem","avatar_url":"https://avatars-next.observableusercontent.com/67f2d078f4dd1723b0a3f99c1884e1710bc62010cd0208722f2f3376191dc6bb","tier":"starter_2024"},"version":932,"publish_version":932,"role":null,"authored":false,"authors":[{"type":"individual","id":"228445908605fe2d","login":"jochem","name":"Cian Jochem","avatar_url":"https://avatars-next.observableusercontent.com/67f2d078f4dd1723b0a3f99c1884e1710bc62010cd0208722f2f3376191dc6bb","tier":null}],"members":[{"type":"individual","id":"228445908605fe2d","login":"jochem","name":"Cian Jochem","avatar_url":"https://avatars-next.observableusercontent.com/67f2d078f4dd1723b0a3f99c1884e1710bc62010cd0208722f2f3376191dc6bb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Solardächer Grid V6","cells":[{"id":0,"value":"# Solardächer Grid V6","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":590,"value":" \n \n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":648,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":739,"value":"init()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"data = FileAttachment(\"residental_grid_merged_summiert@2.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof table = Inputs.table(dataNull, {})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"dataNull = data.filter(d => d.area != null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"blueColors = d3.interpolateHcl(\"#D2E6FF\", \"#5E5AED\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"redColors = d3.interpolateHcl(\"#eacdc7\", \"#ce4631\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"greyColors = d3.interpolateHcl(\"#d4d4d7\", \"#909096\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"//extent= d3.extent(dataNull, d => d.area)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"scaleRect = d3.scaleSqrt().domain([0, 100000000]).range([0, rectSize])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"scaleRect(50000000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"## Transitionen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"Hier werden die EventListeners zu den Buttons hinzugefügt","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"width = rectPadding * mapRectsX","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"height = rectPadding * mapRectsY","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"rectSize = 18","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"rectPadding = rectSize + 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"## Grössen für Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":916,"value":"mapRectCount = 348","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"mapRectsX = 37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"mapRectsY = 22","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"centerMapX = width/2 - rectPadding * mapRectsX / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"centerMapY = height/2 - rectPadding * mapRectsY / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"## Grössen für Grid","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":914,"value":"gridRectCount = 332","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"gridRectsX = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"gridRectsY = 17","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"centerGridX = height/2 - rectPadding * gridRectsY / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"centerGridY = width/2 - rectPadding * gridRectsX / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"