30:T553,## Additional Resources - https://github.com/deldersveld/topojson/blob/master/countries/germany/germany-regions.json - https://github.com/yetzt/postleitzahlen - https://github.com/juliuste/german-administrative-areas - https://github.com/isellsoap/deutschlandGeoJSON - https://github.com/AliceWi/TopoJSON-Germany - https://github.com/m-ad/geofeatures-ags-germany - https://npgeo-corona-npgeo-de.hub.arcgis.com/ - https://www.suche-postleitzahl.org/downloads (for PLZ) - https://www.destatis.de/DE/Service/OpenData/karten-geodaten.html Cartogram/ Election map: - https://observablehq.com/@gka/zon-btw-cartogram-2025-82nsjs9s3 Hexagon: - https://www.thedataschool.co.uk/tanya-fischer/fdhshaes/ - https://www.google.com/search?q=germany+hexgon+map - https://de.m.wikipedia.org/wiki/Datei:Germany_population_states_hexagonal.svg Distortions: - https://observablehq.com/@karimdouieb/try-to-impeach-this-challenge-accepted - https://observablehq.com/@chrispahm/nicht-die-flache-wahlt-sondern-die-menschen - for processing: - https://datawanderings.com/2019/07/08/merging-historical-maps/ - https://observablehq.com/@fil/rewind (fix poorly defined geometries) - https://observablehq.com/@ambassadors/geographical-features-imports - https://mapshaper.org/ - https://observablehq.com/@syaleni/topojson-vs-geojson - https://observablehq.com/@jwolondon/geojson-generator31:[{"id":"529a5d3904e543a4c27b2c0add83de68fd570c36f8e7dc483cab526f3f4a1fc389db1cc0264e7b8458dbb2281f96fc2b6061a7e613392098847d5fe8e6ce51dc","href":"https://static.observableusercontent.com/files/529a5d3904e543a4c27b2c0add83de68fd570c36f8e7dc483cab526f3f4a1fc389db1cc0264e7b8458dbb2281f96fc2b6061a7e613392098847d5fe8e6ce51dc","name":"gemeinden.geojson","type":"application/geo+json","lastModified":1688860168884.379,"size":21579550},{"id":"5b145dd781baacb1af8e8311b1ddfbc9beb81e3969c84647fa789b1b19790e0e88ca5494879e99857c7fa2f616c9711da04dfbf755f5d1647ac338b2148b5b6d","href":"https://static.observableusercontent.com/files/5b145dd781baacb1af8e8311b1ddfbc9beb81e3969c84647fa789b1b19790e0e88ca5494879e99857c7fa2f616c9711da04dfbf755f5d1647ac338b2148b5b6d","name":"postleitzahlen2.geojson","type":"application/geo+json","lastModified":1675037717838.387,"size":3186249},{"id":"b29c94d420ad12651ef7c5ff8b8f82ae85a39f9b3f6560d8acb814ffcfa1c9443961b53afddb0c9804f69792e85bd8fab8d1ffad2710329a3172ca1ac975d6da","href":"https://static.observableusercontent.com/files/b29c94d420ad12651ef7c5ff8b8f82ae85a39f9b3f6560d8acb814ffcfa1c9443961b53afddb0c9804f69792e85bd8fab8d1ffad2710329a3172ca1ac975d6da","name":"kreise.geo.json","type":"application/json","lastModified":1686695220209.355,"size":20377006},{"id":"561e5264b5f3753997e7dc0a75bf6ea899b16c623804c9e28c4723015270f41a8f8aa6d0b89856836fcfca722e8cef3087fb47fe080e7f42a1961dff2f698f8e","href":"https://static.observableusercontent.com/files/561e5264b5f3753997e7dc0a75bf6ea899b16c623804c9e28c4723015270f41a8f8aa6d0b89856836fcfca722e8cef3087fb47fe080e7f42a1961dff2f698f8e","name":"landkreise.geojson","type":"application/geo+json","lastModified":1688860851776.974,"size":3265124}] 2e:{"title":"Maps of Germany","cells":[{"id":0,"value":"# Maps of Germany","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"### 1) Load the TopoJSON","pinned":false,"hidden":false,"mode":"md"},{"id":680,"value":"germany = await (\n await fetch(\n \"https://raw.githubusercontent.com/AliceWi/TopoJSON-Germany/master/germany.json\"\n )\n).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"germany1 = await (\n await fetch(\n \"https://raw.githubusercontent.com/m-ad/geofeatures-ags-germany/master/topojson/germany.json\"\n )\n).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"germany2 = await (\n await fetch(\n \"https://raw.githubusercontent.com/deldersveld/topojson/master/countries/germany/germany-regions.json\"\n )\n).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"geo2 = await (\n await fetch(\n \"https://raw.githubusercontent.com/m-ad/geofeatures-ags-germany/master/geojson/places.json\"\n )\n).json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"### 2) Extract the GeoJSON of interest","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"// geoJSON = topojson.feature(germany, germany.objects.states)\ngeoJSON = topojson.feature(germany, germany.objects.counties)\n// geoJSON = data_germany[3]","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"geoJSON.features.filter(d => d.properties.TYPE_3 !== \"Landkreise\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"data_germany = {\n let ar = [];\n ar[0] = await (\n await fetch(\n \"https://raw.githubusercontent.com/isellsoap/deutschlandGeoJSON/master/1_deutschland/4_niedrig.geo.json\"\n )\n ).json();\n ar[0].level = \"Staat\";\n\n ar[1] = await (\n await fetch(\n \"https://raw.githubusercontent.com/isellsoap/deutschlandGeoJSON/master/2_bundeslaender/4_niedrig.geo.json\"\n )\n ).json();\n ar[1].level = \"Bundesland\";\n\n ar[2] = await (\n await fetch(\n \"https://raw.githubusercontent.com/isellsoap/deutschlandGeoJSON/master/3_regierungsbezirke/4_niedrig.geo.json\"\n )\n ).json();\n ar[2].level = \"Regierungsbezirk\";\n\n ar[3] = await (\n await fetch(\n \"https://raw.githubusercontent.com/isellsoap/deutschlandGeoJSON/master/4_kreise/4_niedrig.geo.json\"\n // \"https://raw.githubusercontent.com/isellsoap/deutschlandGeoJSON/master/4_kreise/1_sehr_hoch.geo.json\"\n )\n ).json();\n ar[3].level = \"Kreis\";\n return ar;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"### 3) Set width and height of the resulting svg","pinned":false,"hidden":false,"mode":"md"},{"id":57,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"### 4) Define the projection","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"projection = {\n // from https://observablehq.com/@sto3psl/map-of-germany-in-d3-js\n const [bottomLeft, topRight] = d3.geoBounds(geoJSON);\n\n /* https://bl.ocks.org/mbostock/4282586 */\n const lambda = -(topRight[0] + bottomLeft[0]) / 2;\n\n /* Coordinates for the center of the map*/\n const center = [\n (topRight[0] + bottomLeft[0]) / 2 + lambda,\n (topRight[1] + bottomLeft[1]) / 2\n ];\n\n const scale = Math.min(\n width / (topRight[0] + bottomLeft[0]),\n height / (topRight[1] - bottomLeft[1])\n );\n\n /* Creating the projection */\n return d3\n .geoAlbers()\n .parallels([bottomLeft[1], topRight[1]])\n .translate([width / 2, height / 2])\n .rotate([lambda, 0, 0])\n .center(center)\n .scale(scale * 200);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"projection([7.18, 53.2]) // test the projection","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"### 5) Compute the d attribute for the path element","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"d = d3.geoPath(projection)(geoJSON)","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"### 6) Create the map","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"#### a) Calling an svg directly","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"map = svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"#### b) Using Plot - create a mark via a function returning an svg element","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"Plot.plot({\n marks: [\n () => svg`\n `\n ],\n height: 800,\n width: 600\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"md`\n#### c) Using Plot - with Plot.carto plugin from \n\\`\\`\\`js\n'@fil/plot-carto-0-4'\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"import { Plot as Plot04 } from \"@fil/plot-carto-0-4\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"Plot04.carto({\n projection,\n marks: [\n Plot04.feature(geoJSON, {\n fill: \"lightgreen\",\n fillOpacity: 0.2,\n stroke: \"#222\"\n })\n ],\n width,\n height\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":470,"value":"#### d) Using bertin.js - see https://observablehq.com/@neocartocnrs/hello-bertin-js","pinned":false,"hidden":false,"mode":"md"},{"id":352,"value":"bertin.draw({\n params: { projection: projection, width },\n layers: [\n {\n type: \"layer\",\n fill: \"lightblue\",\n fillOpacity: 0.2,\n stroke: \"black\",\n geojson: geoJSON\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":501,"value":"#### e) Using geoverview.js - see https://observablehq.com/@neocartocnrs/geoverview","pinned":false,"hidden":false,"mode":"md"},{"id":498,"value":"view(geoJSON, { width: 700, height: 350 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":510,"value":"geoJSON","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"### 7) Compute the bounding box of a feature","pinned":false,"hidden":false,"mode":"md"},{"id":289,"value":"muenchen = geoJSON.features.filter((d) => d.properties.name === \"München\")[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"bBox = d3.geoPath(projection).bounds(muenchen)","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"### 8) Drawing a border between two features","pinned":false,"hidden":false,"mode":"md"},{"id":354,"value":"function border(id0, id1) {\n return function (a, b) {\n return (a.id === id0 && b.id === id1) || (a.id === id1 && b.id === id0);\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"Plot.plot({\n marks: [\n () => svg`\n \n \n `\n ],\n height: 800,\n width: 600\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":966,"value":"{\n // Define the width and height of the SVG container\n const width = 500;\n const height = 500;\n\n // Define the path data for the state border\n const pathData = \"M10,10L100,10L100,100L10,100Z\";\n\n // Create the custom SVG layer\n const customLayer = {\n marks: [\n {\n type: \"path\",\n path: pathData,\n stroke: \"red\",\n strokeWidth: 2,\n fill: \"none\"\n }\n ]\n };\n\n // Create the plot\n const plot = Plot.plot({\n width,\n height,\n layers: [customLayer]\n });\n\n return plot;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"### 9) Using Plot.geo()","pinned":false,"hidden":false,"mode":"md"},{"id":519,"value":"Plot.plot({\n height: 900,\n projection: projection,\n marks: [Plot.geo(geoJSON)]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":622,"value":"viewof granularity = Inputs.radio([\"Bundesland\", \"Regierungsbezirk\", \"Kreis\"], {\n label: \"Select one\",\n value: \"Bundesland\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"Plot.plot({\n height: 900,\n projection: projection,\n marks: [\n // Plot.geo(statemesh, { stroke: \"blue\", strokeWidth: 5, strokeOpacity: 0.2 }), // this topology does not exactly match\n\n Plot.geo(data_germany.filter((d) => d.level === \"Staat\")),\n Plot.geo(data_germany.filter((d) => d.level === \"Bundesland\")),\n Plot.geo(data_germany.filter((d) => d.level === granularity)[0], {\n stroke: \"grey\",\n strokeOpacity: 0.6,\n fill: (d) => d.properties.ID_1\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":651,"value":"Plot.plot({\n height: 900,\n projection: projection,\n marks: [\n // Plot.geo(statemesh, { stroke: \"blue\", strokeWidth: 5, strokeOpacity: 0.2 }), // this topology does not exactly match\n\n Plot.geo(data_germany.filter((d) => d.level === granularity)[0], {\n stroke: \"grey\",\n strokeOpacity: 0.3,\n fill: (d) => d.properties.ID_1\n }),\n Plot.geo(data_germany.filter((d) => d.level === \"Staat\"))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":879,"value":"data_germany","pinned":true,"hidden":false,"mode":"ojs"},{"id":789,"value":"#### Using Tooltip with Plot.geo()\n\nTo use tooltip import the Plot version which includes the tooltip plugin by @mfreeman \n```js \nimport { Plot } from \"@mkfreeman/plot-tooltip\" ```","pinned":false,"hidden":false,"mode":"md"},{"id":639,"value":"# Playground here\nCounties with AGS: https://github.com/m-ad/geofeatures-ags-germany","pinned":false,"hidden":false,"mode":"md"},{"id":746,"value":"import { serialize } from \"@palewire/saving-json\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":751,"value":"newJSON = geoJSON_new","pinned":true,"hidden":false,"mode":"ojs"},{"id":881,"value":"germany","pinned":true,"hidden":false,"mode":"ojs"},{"id":883,"value":"germany1","pinned":true,"hidden":false,"mode":"ojs"},{"id":888,"value":"[...germany1.objects.counties.geometries]","pinned":true,"hidden":false,"mode":"ojs"},{"id":898,"value":"## To Do\n- geometrien von data_germany übernehmen da konsistent\n- https://de.wikipedia.org/wiki/Liste_der_kreisfreien_St%C3%A4dte_in_Deutschland\n- Regierungsbezirke + AGS hinzufügen","pinned":false,"hidden":false,"mode":"md"},{"id":885,"value":"myTopo1 = {\n let ar1 = [...germany1.objects.counties.geometries];\n for (let geo of ar1) {\n geo.ags = geo.id;\n delete geo.id;\n }\n\n let ar2 = [...germany1.objects.states.geometries];\n for (let geo of ar2) {\n geo.ags = geo.id;\n delete geo.id;\n }\n germany1.objects.counties.geometries = ar1;\n germany1.objects.states.geometries = ar2;\n\n return germany1;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":749,"value":"DOM.download(serialize(newJSON), null, \"Download JSON\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":900,"value":"## Test zone","pinned":false,"hidden":false,"mode":"md"},{"id":932,"value":"kreiseGeo = FileAttachment(\"kreise.geo.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":904,"value":"myTopo2Go2Json = topojson.feature(myTopo1, \"counties\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":916,"value":"myArray = [...data_germany[3].features.map((d) => d.properties.NAME_2)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":922,"value":"Inputs.table(data_germany[3].features.map((d) => d.properties))","pinned":true,"hidden":false,"mode":"ojs"},{"id":926,"value":"myData = data_germany[3].features.map((d) => d.properties)","pinned":true,"hidden":false,"mode":"ojs"},{"id":928,"value":"myData","pinned":true,"hidden":false,"mode":"ojs"},{"id":910,"value":"Plot.plot({\n height: 900,\n projection: projection,\n marks: [\n // Plot.geo(statemesh, { stroke: \"blue\", strokeWidth: 5, strokeOpacity: 0.2 }), // this topology does not exactly match\n\n Plot.geo(myTopo2Go2Json, {\n stroke: \"grey\",\n strokeOpacity: 0.3\n // fill: (d) => d.properties.ID_1\n }),\n Plot.geo(data_germany.filter((d) => d.level === \"Staat\"))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":939,"value":"### Gemeinden from http://opendatalab.de/projects/geojson-utilities/","pinned":false,"hidden":false,"mode":"md"},{"id":942,"value":"Plot.plot({\n height: 900,\n projection: projection,\n marks: [Plot.geo(gemeinden)]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":949,"value":"Plot.plot({\n height: 900,\n projection: projection,\n style: { fontSize: 20 },\n marks: [\n Plot.geo(landkreise),\n // for tooltip:\n Plot.dot(\n landkreise.features,\n Plot.centroid({\n strokeOpacity: 0.01,\n channels: {\n \"Landkreis: \": { value: (d) => d.properties.GEN },\n \"Population: \": { value: (d) => d.properties.destatis.population }\n },\n\n tip: true\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":946,"value":"landkreise = FileAttachment(\"landkreise.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":935,"value":"gemeinden","pinned":true,"hidden":false,"mode":"ojs"},{"id":936,"value":"gemeinden = FileAttachment(\"gemeinden.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":704,"value":"geoJSON_new = topojson.feature(germany1, germany1.objects.counties)","pinned":true,"hidden":false,"mode":"ojs"},{"id":801,"value":"geoJSON_new2 = {\n let myJSON = { ...geoJSON_new };\n myJSON.features = geoJSON_new.features.map((d) => ({\n ...d,\n id2: d.ags[0],\n id_even: +d.ags[0] % 2\n }));\n return myJSON;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":774,"value":"geoJSON_new.features.filter((d) => d.ags.startsWith(\"091\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":715,"value":"import { Plot } from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":701,"value":"Plot.plot({\n height: 900,\n projection: projection,\n marks: [\n // Plot.geo(statemesh, { stroke: \"blue\", strokeWidth: 5, strokeOpacity: 0.2 }), // this topology does not exactly match\n\n Plot.geo(data_germany.filter((d) => d.level === \"Staat\")),\n Plot.geo(geoJSON_new2, {\n stroke: \"grey\",\n strokeOpacity: 0.6,\n fill: (d) => +d.id2,\n title: (d) => `${d.properties.name} \\n AGS: ${d.id}`\n }),\n Plot.dot([[11.521229152237028, 48.149328045880495]], {\n fill: \"black\"\n }),\n Plot.text([[11.521229152237028, 48.149328045880495]], {\n text: [\"München\"],\n dy: -10,\n stroke: \"white\",\n fill: \"black\",\n pointerEvents: \"none\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"data_germany.filter((d) => d.level === granularity)","pinned":true,"hidden":false,"mode":"ojs"},{"id":573,"value":"statemesh = topojson.mesh(germany, germany.objects.states, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":797,"value":"states = topojson.feature(germany, germany.objects.states)","pinned":true,"hidden":false,"mode":"ojs"},{"id":604,"value":"germany","pinned":true,"hidden":false,"mode":"ojs"},{"id":606,"value":"[germany1.objects.counties]","pinned":true,"hidden":false,"mode":"ojs"},{"id":807,"value":"### PLZ","pinned":false,"hidden":false,"mode":"md"},{"id":839,"value":"import { rewind } from \"@fil/rewind\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":809,"value":"/* geoPLZ3 = await (\n await fetch(\n // \"https://raw.githubusercontent.com/yetzt/postleitzahlen/master/data/postleitzahlen.geojson\"\n \"https://raw.githubusercontent.com/yetzt/postleitzahlen/master/data/postleitzahlen.topojson\"\n )\n).json()\n*/\ngeoPLZ = FileAttachment(\"postleitzahlen2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":855,"value":"// geoPLZ = topojson.feature(geoPLZ3, geoPLZ3.objects.postleitzahlen)","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"geoPLZ2 = geoPLZ.filter","pinned":true,"hidden":false,"mode":"ojs"},{"id":812,"value":"Plot.plot({\n height: 900,\n projection: projection,\n marks: [\n // Plot.geo(statemesh, { stroke: \"blue\", strokeWidth: 5, strokeOpacity: 0.2 }), // this topology does not exactly match\n Plot.geo(data_germany.filter((d) => d.level === \"Staat\")),\n\n Plot.geo(rewind(geoPLZ), {\n stroke: \"grey\",\n strokeOpacity: 0.6,\n fill: \"lightblue\",\n title: (d) => `${d.properties.name} \\n AGS: ${d.id}`\n }),\n Plot.dot([[11.521229152237028, 48.149328045880495]], {\n fill: \"black\"\n }),\n Plot.text([[11.521229152237028, 48.149328045880495]], {\n text: [\"München\"],\n dy: -10,\n stroke: \"white\",\n fill: \"black\",\n pointerEvents: \"none\"\n }),\n Plot.geo(\n data_germany.filter((d) => d.level === \"Bundesland\"),\n {\n strokeWidth: 1\n }\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":458,"value":"bertin = require(\"bertin\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"view = require(\"geoverview@1.2\").then((f) => f.view)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}