31:[{"id":"76e7a3e247df68a1026d78d729de008602163c5973d9ee69f07b8db6b9e9a4ef150b85d595494ddd3519277a0613ff89d229877f921505ca3b134c69b3ccd626","href":"https://static.observableusercontent.com/files/76e7a3e247df68a1026d78d729de008602163c5973d9ee69f07b8db6b9e9a4ef150b85d595494ddd3519277a0613ff89d229877f921505ca3b134c69b3ccd626","name":"ausbau.csv","type":"text/csv","lastModified":1660130775898.788,"size":510},{"id":"feadd3bb337d6ba9fc481a0968b64e6b2f727b5134055c1ffacbc9ccd5a65b758d10dd71885fcadc6196424b3ffc4ce21a8397c6895e7ca6bb7ae128bee51690","href":"https://static.observableusercontent.com/files/feadd3bb337d6ba9fc481a0968b64e6b2f727b5134055c1ffacbc9ccd5a65b758d10dd71885fcadc6196424b3ffc4ce21a8397c6895e7ca6bb7ae128bee51690","name":"colors.json","type":"application/json","lastModified":1660208907970.445,"size":2169}] 2f:{"title":"Flächengrafik Solardächer","cells":[{"id":0,"value":"# Flächengrafik Solardächer","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":40,"value":"viewof year = Inputs.range([2015, 2050], { step: 1, label: \"Jahr\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"## Konfiguration","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"squares = 26","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"squareSize = 16","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"subsquares = 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"rows = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"Hier wird (manuell) definiert, welche der grosen Quadrate keine Kontur haben sollen","pinned":false,"hidden":false,"mode":"md"},{"id":171,"value":"white = [6, 7, 8, 11, 12, 13, 16, 17, 18]","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"Die Farben werden vorab berechnet, damit sie sich nicht jedes Mal ändern, wenn man den Slider bedient","pinned":false,"hidden":false,"mode":"md"},{"id":203,"value":"colors = FileAttachment(\"colors.json\").json()\n// Generate the colors:\n//colors = [...Array(squares * subsquares)].map((d) => color(Math.random()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"## Hier wird alles gezeichnet:","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"draw()","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"draw = function () {\n drawLarge();\n drawSmall();\n drawText();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"Die grossen Quadrate mit einem einfachen Loop:","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"drawLarge = function () {\n document.querySelector(\"#large\").innerHTML = \"\";\n\n for (let i = 0; i < squares; i++) {\n appendSVGChild(\"rect\", document.getElementById(\"large\"), {\n width: squareSize,\n height: squareSize,\n x: xPosition(i),\n y: yPosition(i),\n stroke: white.includes(i) ? \"none\" : \"#000000\",\n fill: \"none\"\n });\n\n /*d3.select(\"#large\")\n .append(\"rect\")\n .attr(\"width\", squareSize)\n .attr(\"height\", squareSize)\n .attr(\"x\", xPosition(i))\n .attr(\"y\", yPosition(i))\n .attr(\"stroke\", white.includes(i) ? \"none\" : \"#000000\")\n .attr(\"fill\", \"none\");*/\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"Die kleinen Quadrate mit einem verschachtelten Loop. Zuerst platzieren wir sie in der oberen, linken Ecke des jeweiligen grossen Quadrats `i`. Im zweiten Loop wird dann der Offset innerhalb des grossen Quadrats berechnet `j`.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"drawSmall = function () {\n d3.selectAll(\"#small *\").remove();\n\n for (let i = 0; i < squares; i++) {\n for (let j = 0; j < subsquares; j++) {\n d3.select(\"#small\")\n .append(\"rect\")\n .attr(\"width\", subSquareSize)\n .attr(\"height\", subSquareSize)\n .attr(\"x\", xPosition(i, j))\n .attr(\"y\", yPosition(i, j))\n .attr(\n \"fill\",\n i * subsquares + j <= colored ? colors[i * subsquares + j] : \"#ffffff\"\n );\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"drawText = function () {\n d3.selectAll(\"#text *\").remove();\n\n d3.select(\"#text\")\n .append(\"rect\")\n .attr(\"x\", squareSize)\n .attr(\"y\", squareSize)\n .attr(\"width\", squareSize * 3)\n .attr(\"height\", 3 * squareSize)\n .attr(\"fill\", \"rgba(255,255,255, 0.5)\");\n\n d3.select(\"#text\")\n .append(\"text\")\n .attr(\"x\", squareSize + subSquareSize)\n .attr(\"y\", squareSize * 2 + subSquareSize)\n .attr(\"font-family\", \"GT America\")\n .attr(\"font-weight\", \"500\")\n .attr(\"font-size\", 16)\n .text(year);\n\n d3.select(\"#text\")\n .append(\"text\")\n .attr(\"x\", squareSize + subSquareSize)\n .attr(\"y\", squareSize * 3 + subSquareSize)\n .attr(\"font-family\", \"GT America\")\n .attr(\"font-size\", 12)\n .attr(\"text-anchor\", \"right\")\n .text(Math.round(percent * 1000) / 10 + \" %\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":266,"value":"## Positionen berechnen\n\nWerden die Funktionen nur mit dem Argument `i` aufgerufen, berechenen sie die Position für ein grosses Quadrat. Mit einem zusätzlichen Argument `j` wird der nötige Offset für ein kleines Quadrat berechnet:","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"xPosition = function (i, j) {\n let position = (i % rows) * squareSize; // first calculate the left-position of the big square\n if (j) {\n position = position + (j % subRows) * subSquareSize; // then add a potential offset for the small squares\n }\n return position;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"yPosition = function (i, j) {\n let position = Math.floor(i / rows) * squareSize; // first calculate the top-position of the big square\n if (j) {\n position = position + Math.floor(j / subRows) * subSquareSize; // then add a potential offset for the small squares\n }\n return position;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"## Daten laden und ein paar dynamische Variabeln berechnen (weniger Code)","pinned":false,"hidden":false,"mode":"md"},{"id":186,"value":"percent = data.filter((d) => d.Year == year)[0][\"Total Percent\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"colored = Math.round((percent / 0.26) * squares * subsquares)","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"subRows = Math.sqrt(subsquares)","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"subSquareSize = squareSize / subRows","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"data = FileAttachment(\"ausbau.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"function appendSVGChild(elementType, target, attributes = {}, text = \"\") {\n const element = document.createElementNS(\n \"http://www.w3.org/2000/svg\",\n elementType\n );\n Object.entries(attributes).map((a) => element.setAttribute(a[0], a[1]));\n if (text) {\n const textNode = document.createTextNode(text);\n element.appendChild(textNode);\n }\n target.appendChild(element);\n return element;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"// Wird nicht mehr gebraucht. Die Farbliste ist jetzt gespeichert.\ncolor = d3.interpolateHcl(\"#D2E6FF\", \"#5E5AED\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}