28:null 29:["$","title",null,{"children":"Saudi Arabia Border Map | Mokhtar Mousa | Observable"}] 2e:[{"id":"0d4e52f5da5ef6cac4f368059284cd82cf7f69a7d6a37dbe02cbf589238e81d5af95b24adbb538a002e05b3b53b2ce808fcf2e552b3fa7a1fa0e6b4bbf585a3f","href":"https://static.observableusercontent.com/files/0d4e52f5da5ef6cac4f368059284cd82cf7f69a7d6a37dbe02cbf589238e81d5af95b24adbb538a002e05b3b53b2ce808fcf2e552b3fa7a1fa0e6b4bbf585a3f","name":"SaudiArabia_Lower@1.svg","type":"image/svg+xml","lastModified":1678833076171.238,"size":614555},{"id":"a12c2bd65d3f33decaa27832f10429c20fa28a43581e847ec0987501eb8cea5dcd6d856798d6c1a7cc4072302702d6e53f97f0b09ac7ab20bb503dc240500182","href":"https://static.observableusercontent.com/files/a12c2bd65d3f33decaa27832f10429c20fa28a43581e847ec0987501eb8cea5dcd6d856798d6c1a7cc4072302702d6e53f97f0b09ac7ab20bb503dc240500182","name":"SaudiArabia_Lower@7.geojson","type":"application/geo+json","lastModified":1678839551285.023,"size":719573}] 2c:{"id":"ef83b847b4c7337c","slug":null,"title":"Saudi Arabia Border Map","thumbnail":"b151ca8711d6eccc8d8fb051cbe911a6ce9275a3777b8e3e1f6e8634940d82b4","access_level":"public","create_time":"$D2023-03-10T20:15:03.869Z","update_time":"$D2023-03-15T00:28:49.887Z","view_time":null,"first_public_time":"$D2023-03-10T20:15:03.869Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"30678668096aa48f","login":"mkrbu50","name":"Mokhtar Mousa","avatar_url":"https://avatars-next.observableusercontent.com/bbbfbf148fdc1a3b7f3bbe4b1ef6e07a7a6fe494c6f1ed09c68d78e99db416c3","tier":"starter_2024"},"version":365,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4d48ca74e5e372c3","login":"mkrbu50","name":"Mokhtar Mousa","avatar_url":"https://avatars-next.observableusercontent.com/bbbfbf148fdc1a3b7f3bbe4b1ef6e07a7a6fe494c6f1ed09c68d78e99db416c3","tier":null}],"members":[{"type":"individual","id":"4d48ca74e5e372c3","login":"mkrbu50","name":"Mokhtar Mousa","avatar_url":"https://avatars-next.observableusercontent.com/bbbfbf148fdc1a3b7f3bbe4b1ef6e07a7a6fe494c6f1ed09c68d78e99db416c3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Saudi Arabia Border Map","cells":[{"id":176,"value":"

Saudi Arabia Border Map

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"

I created this map as a project to provide an open source geojson map for the country. I will try to complete the map to include the 13 administrative regions. each element will have basic tags and ids for more control.

The following is a statement to fetch the object from github.

\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"SA = (await fetch(\"https://raw.githubusercontent.com/mkrbu50/sa-geojson/main/sa.geojson\")).json()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"

As soon as I imported the country map, I faced an issue as shown below. The map appears small and is bordered with a huge box. I didn't know if the issue was from the code or from the geojson. I think the issue is from the latter but I couldn't pinpoint cause or solution. More on that later

Original post: https://observablehq.com/@pepf/drawing-a-simple-geojson-map appear to have every ok though!

This is my geojson:

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":188,"value":"chart1 = {\n const width=500, height=500;\n const svg = d3.select(DOM.svg(width, height))\n \n // Use Mercator projection\n var projection = d3.geoMercator() \n \t// Powerfull stuff! I didnt know where exactly my dataset was located projection-wise,\n // but .fitExtent() allows you to fit your dataset within a specified canvas \n \t.fitExtent([[0,0],[width, height]], SA);\n\n var path = d3.geoPath()\n .projection(projection);\n \n // Draw each province as a path\n svg.append('g').selectAll('path')\n \t.data(SA.features)\n \t.enter().append('path')\n \t.attr('d', path)\n // Styling\n \t.style('fill', 'white')\n \t.style('stroke', 'green')\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"

However, I soon found that I can over come the issue by using the geMercator function .scale() and .translate() .

This, however, is not a root solution but a workaround.

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"chart2 = {\n const width=500, height=500;\n const svg = d3.select(DOM.svg(width, height))\n \n // Use Mercator projection\n var projection = d3.geoMercator() .scale(1350).translate([-815,830]); \n \t// Powerfull stuff! I didnt know where exactly my dataset was located projection-wise,\n // but .fitExtent() allows you to fit your dataset within a specified canvas \n \t//.fitExtent([[0,0],[width, height]], SA);\n\n var path = d3.geoPath()\n .projection(projection);\n \n // Draw each province as a path\n svg.append('g').selectAll('path')\n \t.data(SA.features)\n \t.enter().append('path')\n \t.attr('d', path)\n // Styling\n \t.style('fill', 'white')\n \t.style('stroke', 'green')\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"To sum up this section, I would like to mention that the geojson problem I had earlier can be solved by correctly mapping out the svg x and y coordinates to earth's longitude and latitude.
\nThis is a final map with the correction.

\nThe tool I used to do this mapping was this website:
\nhttps://mygeodata.cloud/converter/svg-to-geojson

\nJust note that you need to follow mapping directions under **Notice to SVG format**.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":313,"value":" SAProvinces = await FileAttachment(\"SaudiArabia_Lower@7.geojson\").json();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"chart3 = {\n const width=600, height=500;\n const svg = d3.select(DOM.svg(width, height))\n \n // Use Mercator projection\n var projection = d3.geoMercator() \n \t// Powerfull stuff! I didnt know where exactly my dataset was located projection-wise,\n // but .fitExtent() allows you to fit your dataset within a specified canvas \n \t.fitExtent([[0,0],[width, height]], SAProvinces);\n\n var path = d3.geoPath()\n .projection(projection);\n \n // Draw each province as a path\n svg.append('g').selectAll('path')\n \t.data(SAProvinces.features)\n \t.enter().append('path')\n \t.attr('d', path)\n // Styling\n \t.style('fill', 'white')\n \t.style('stroke', 'grey')\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"# Saudi Administrative Map From Svg","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":288,"value":"I learned of another way to use svg as a map directly from this notebook:\nhttps://observablehq.com/@mbostock/manipulating-svg-files

\nSince I started off by creating an svg in Adobe Illustrator, why bother going the extra step through geojson?\nSo I attach the svg file to this notebook. Then I define an array of the provinces contained in the svg as g element.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":232,"value":" provinces=[\"TabukProvince\",\n \"AlJoufProvince\",\n \"NorthernBordersProvince\",\n \"EasternProvince\",\n \"NajranProvince\",\n \"JazanProvince\",\n \"Farasan\",\n \"AseerProvince\",\n \"AlBa7aProvince\",\n \"MakkaAlMukarramahProvince\",\n \"AlMadinahAlMunawwarahProvince\",\n \"Ha5elProvince\",\n \"QaseemProvince\",\n \"RiyadhProvince\",\n ];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"The original post uses some fancy techniques to cycle through the colors of the rainbow spectrum over some defined time. I, however want to use my provinces array.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":223,"value":"\n//provinces[0];\n\ngraphic = {\n const text = await FileAttachment(\"SaudiArabia_Lower@1.svg\").text();\n const document = (new DOMParser).parseFromString(text, \"image/svg+xml\");\n const svg = d3.select(document.documentElement).remove();\n svg.attr(\"width\", \"970px\");\n svg.attr(\"height\", \"800px\");\n for(var i=0; i<15; i++)\n {\n var path = svg.selectAll(\"g[id='\"+provinces[i]+\"'] path, g[id='\"+provinces[i]+\"'] polygon\");\n path.attr(\"fill\", d3.interpolateRainbow( i*(1/14)));\n }\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"I loop through the items of the array and call each g element by the id from the array. then I use the same d3.interpolateRainbow function to assign a fill color to the corresponding g element, and got it.
\nThe following code illustrates how the color value is calculated going through the for loop.
\nAs noted here, the d3.interpolateRainbow function takes a value between 0 and 1 which correspond to color on a rainbow spectrum.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":256,"value":"g={\n var text=\"\";\n for(var i=0; i<14; i++)\n {\n text += i*(1/13) + '\\n'\n }\n return text;\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1"}} 2d:"$2c:body"