31:T465,### Step 1: Find an appropriate ShapeFile [ShapeFiles](https://en.wikipedia.org/wiki/Shapefile) are a vector-based data format that are very commonly used in maps. The most common approach is to first find a ShapeFile of the region of interest, then use other tools to convert that into GeoJSON. There are **two** accessible resources where you can download ShapeFiles: 1. [https://gadm.org/data.html](https://gadm.org/data.html): An open-source solution that's freely accessible for academic and non-commercial usage. Recommended to download by country. 2. [https://www.naturalearthdata.com/](https://www.naturalearthdata.com/downloads/): A sizeable repository of ShapeFiles for world regions. ${comment(html`Commonly, resources such as these (or at least good resources) will clarify what coordinate system and what World Geodetic System (WGS) standard the ShapeFile uses. You don't normally really need to think about it, but if you have issues with your data, then make sure to double-check.`)}32:T636,usa_map = { // Import our geojson data, reverse the winding order let usa = (await FileAttachment("gadm41_USA_1.json").json()); ReverseWindingOrder(usa); // Define parameters, svg, and chart (we've covered this by now a lot) const width = 400, height = 250, margins=50; const svg = d3.create('svg') .attr('width', width+margins*2) .attr('height', height+margins*2) const chart = svg.append('g') .attr('width',width) .attr('height',height) .attr('transform', `translate(${margins},${margins})`); // Need a projection, with `.scale()`, `.center()`, and `.translate()` const projection = d3.geoMercator() .scale(200) // zoom level — tweak as needed .center([-98, 39]) // center over U.S. Uses [lon,lat] format .translate([width/2, height*0.75]); // Technically `center` translate the graph fine, but if needed. // ALTERNATIVE: Let D3 attempt to fit the data to the projection type /* const projection = d3.geoMercator() .fitSize([width, height], usa); */ // We need a `d3.geoPath()`, which returns a function that can be called later (see below). const path = d3.geoPath().projection(projection); // Render our chart. chart.append("g") .selectAll("path") .data(usa.features) .enter() .append("path") // draw each state .attr("d", path) // set the color and stroke of each state .attr('fill','#ccc') .style("stroke", "#000"); // Return `svg.node()` to let it render properly return svg.node() }33:[{"id":"d3846e1984a6952c980e3d76e72c61e8eb33a703030db154e7041c025daf9dcab2a17e90d71b5bd83ae006ccda64d0488a2ec536a8142a42ad72a0e84bb0b09e","href":"https://static.observableusercontent.com/files/d3846e1984a6952c980e3d76e72c61e8eb33a703030db154e7041c025daf9dcab2a17e90d71b5bd83ae006ccda64d0488a2ec536a8142a42ad72a0e84bb0b09e","name":"weird_coords.png","type":"image/png","lastModified":1761313338902.692,"size":16526},{"id":"30cb9e8f41da555b15db4e24da84ec30fe62f6a1642b7d84ec858f3cba973058e21da5316ca81486e4e4ffd3605e297fc0616148578937c01395f49ccaf95864","href":"https://static.observableusercontent.com/files/30cb9e8f41da555b15db4e24da84ec30fe62f6a1642b7d84ec858f3cba973058e21da5316ca81486e4e4ffd3605e297fc0616148578937c01395f49ccaf95864","name":"layers.png","type":"image/png","lastModified":1761315410024.839,"size":34456},{"id":"99c844539cae8debf31dfedf1cb4ff39b73f9dc142c42df81e286dc9354b491a6dc505aea8dfe6a48a1bfc8a21a84fc5d3e49a31f0e0a792de94243c7d65a0aa","href":"https://static.observableusercontent.com/files/99c844539cae8debf31dfedf1cb4ff39b73f9dc142c42df81e286dc9354b491a6dc505aea8dfe6a48a1bfc8a21a84fc5d3e49a31f0e0a792de94243c7d65a0aa","name":"gadm41_KOR_3.json","type":"application/json","lastModified":1761324260471.914,"size":2540092},{"id":"a19be32cfe0702e31aea0a4515b41f51059a25f597bdf19cc9552d6f3fd693cdcec0cff18741095f7fbad26f16cca168b16fe54ed8208ad518abfff3f828a6d8","href":"https://static.observableusercontent.com/files/a19be32cfe0702e31aea0a4515b41f51059a25f597bdf19cc9552d6f3fd693cdcec0cff18741095f7fbad26f16cca168b16fe54ed8208ad518abfff3f828a6d8","name":"weird_bounds@1.png","type":"image/png","lastModified":1761312981204.52,"size":40495},{"id":"4bb5dfb4a973b76662bb4569e57210e6ae595f62b9651267ed7f08e92fb55aa191211c14628ce1683390a9813e9589612460a30abe441ef29502d15d88cd7fd2","href":"https://static.observableusercontent.com/files/4bb5dfb4a973b76662bb4569e57210e6ae595f62b9651267ed7f08e92fb55aa191211c14628ce1683390a9813e9589612460a30abe441ef29502d15d88cd7fd2","name":"gadm41_USA_1.json","type":"application/json","lastModified":1761310174724.471,"size":613845},{"id":"c7b9c323d1de5006ab4f6f046ee30fee954303f8689f2042ac46d9630f8bd0c9c50a5724eed1008dfa758f61ede7275de8d2a2f687ac03e9bd24d8301dd03a68","href":"https://static.observableusercontent.com/files/c7b9c323d1de5006ab4f6f046ee30fee954303f8689f2042ac46d9630f8bd0c9c50a5724eed1008dfa758f61ede7275de8d2a2f687ac03e9bd24d8301dd03a68","name":"simplify.png","type":"image/png","lastModified":1761315527688.436,"size":35963}] 2f:{"title":"Week 8 Lab: Plotting and Troubleshooting GeoJSON with D3","cells":[{"id":0,"value":"# Week 8 Lab: Plotting and Troubleshooting GeoJSON with D3","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"## D3 and Map Data\n\nD3 specifically uses [**GeoJSON**](https://geojson.org/) to render maps. There are alternative map frameworks such as [TopoJSON](https://github.com/topojson/topojson) which extends GeoJSON, but D3 expects GeoJSON to be the primary input format. How can we acquire the necessary GeoJSON data to begin with? And how do we handle that in D3? This lab covers these concepts more in-depth.","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"## Where to find GeoJSON Data?\n\nSeveral older resources will commonly refer you to [https://data.census.gov/](https://data.census.gov/). However, this service is currently terminated (allegedly) due to loss of federal funding. You can also likely find existing GeoJSON files in the wild, such as in [Vega-Lite's pre-existing US-Atlas GeoJSON](https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json), but you don't really have much control over the fidelity and properties of the GeoJSON itself.\n\nLet's try a more _manual_ approach: making GeoJSON data ourselves.","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"### Step 2: Simplify and convert from ShapeFile to GeoJSON\n\nThere are several methods to convert from ShapeFile to GeoJSON. A very accessible solution is to use [https://mapshaper.org/](https://mapshaper.org/), which gives you some tools to 1) simplify your geodata (thus reducing file size) and 2) export as GeoJSON.\n\n\n#### GeoJSON layers:\n${await FileAttachment(\"layers.png\").image({width:400})}\n\nYour data might contain multiple layers. Depending on the overall complexity of your geodata, make sure you're selecting the most effective version.\n\n#### Simplification\n${await FileAttachment(\"simplify.png\").image({width:400})}\n\nFrequently, truly raw ShapeFiles and GeoJSON may be **really big** in terms of storage size. It's _highly_ recommended to simplify your GeoJSON prior to conversion, so that you can control the level of quality (and subsequently the disk space it takes up) of your GeoJSON.","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"### Step 3: Load and understand your GeoJSON\n\nSince the data is technically in the JSON format, you must import the data as if it were a `.json` file.\n\nEvery GeoJSON data fits the following format:\n\n```js\nObject {\n type: \"FeatureCollection\"\n features: Array(51) [\n 0: Object {type: \"Feature\", geometry: Object, properties: Object}\n 1: Object {type: \"Feature\", geometry: Object, properties: Object}\n 2: Object {type: \"Feature\", geometry: Object, properties: Object}\n /// ...\n ]\n}\n```\n\nWe specifically want to pay attention to the `features` array of our GeoJSON, as each item inside that array represents a segment of the geodata. If your data at least fits this format, then you're very close to generating maps.","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"

Troubleshooting GeoJSON

\n\nGeoJSON is finicky in several ways. You will probably run into several issues if you blindly start throwing GeoJSON everywhere. Let's assume you imported some GeoJSON data called `usa` that contains the 50 states of the USA. However, if you find yourself generating this kind of graph, then that's a **geographic bounds** issue.\n\n${await FileAttachment(\"weird_bounds@1.png\").image({width:1000})}\n_That's supposed to be a Mercator projection of the US states..._\n\nIf you run into this issue, you can double-check by running the following code pieces and with the help of this helper function:","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"function FindSuspiciousBounds(geodata) {\n // Print the bounds of the entire map\n console.log(d3.geoBounds(geodata));\n\n // Print the bounds of \"suspicious\" regions\n geodata.features.forEach((f, i) => {\n const b = d3.geoBounds(f);\n if (b[0][0] <= -179 || b[1][0] >= 179 || b[0][1] <= -89 || b[1][1] >= 89) {\n console.log(\"Suspicious feature:\", i, f.properties?.NAME_1, b);\n }\n }); \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"// EXAMPLE:\n{\n // Import a USA data from https://gadm.org/download_country.html, simplified using https://mapshaper.org/\n const bonkered = (await FileAttachment(\"gadm41_USA_1.json\").json())\n\n // Run our helper function to identify suspicious regions\n FindSuspiciousBounds(bonkered);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"If you were to open your browser's console log, then you might see something like the following. The key thing to be concerned is if `d3.geoBounds()` returns `[-180, -90], [180, 90]`. **Absolutely make sure you test this!**\n\n${await FileAttachment(\"weird_coords.png\").image({width:600})}","pinned":false,"hidden":false,"mode":"md"},{"id":127,"value":"### Solution #1: Inversing your Latitudes and Longitudes\n\nSometimes, the latitude and longitude coordinates of your data are **flipped**. If you suspect that your coordinates are flipped, then you can try _inversing_ the coordinates. We've provided a helper function to aid you here.\n\n${comment(html`JavaScript is a reference-based system. If you pass your raw geodata into helper functions like those below, it will mutate the original data. Be careful!`)}","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"function InvertCoordinates(geodata) {\n // Loop through your geodata's features\n geodata.features.forEach(f => {\n const fix = coords => coords.map(c =>\n Array.isArray(c[0][0]) ? fix(c) : c.map(([lat, lon]) => [lon, lat])\n );\n f.geometry.coordinates = fix(f.geometry.coordinates);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"// EXAMPLE\ninverted = {\n // Load your bonkered data\n let raw = (await FileAttachment(\"gadm41_USA_1.json\").json()) \n\n // Invert your coordinates.\n InvertCoordinates(raw)\n\n // Return to pass the data to `inverted`\n return raw;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"### Solution #2: Reverse Winding Order\n\nThere's an important quality about GeoJSON called the \"winding order\". Simply put:\n\n- Outer rings (the main polygon) should be counterclockwise (CCW).\n- Inner rings (holes) should be clockwise (CW).\n\nIf your polygons render \"inverted\" (holes filled in or states missing), or if you get weird boundaries when you call `d3.geoBounds()`, then it may be possible that the winding order is the culprit. The fix therefore is to **reverse** the winding order. Again, we've provided a helper function to aid you here.","pinned":false,"hidden":false,"mode":"md"},{"id":147,"value":"function ReverseWindingOrder(geodata) {\n \n // Helper function: reverse all rings (outer + holes)\n function reverseWinding(coords) {\n return coords.map(ring => ring.slice().reverse());\n }\n \n // Loop through the features of your geodata\n geodata.features.forEach(f => {\n // Case-dependent: is the feature a polygon or a multipolygon (comprising of disconnected sub-regions)?\n if (f.geometry.type === \"Polygon\") {\n f.geometry.coordinates = reverseWinding(f.geometry.coordinates);\n } else if (f.geometry.type === \"MultiPolygon\") {\n f.geometry.coordinates = f.geometry.coordinates.map(polygon =>\n reverseWinding(polygon)\n );\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"// EXAMPLE \nreversed = {\n // Import your bonkered data\n let raw = (await FileAttachment(\"gadm41_USA_1.json\").json()) \n\n // Reverse the winding order\n ReverseWindingOrder(raw);\n\n // Return to pass the data to `reversed`\n return raw\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"## D3 and Maps\n\nOnce you've imported your geodata, then it's time to render. Observe the example below: it uses a corrected version of `gadm41_USA_1.json` where the winding order has been reversed. Note the code examples provided.","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"### Try it yourself!\n\nBelow, attempt to generate the geodata of **3** separate countries other than the USA. You can use any of the references mentioned above for getting your ShapeFiles, converting them into GeoJSON, and troubleshooting their issues upon importing them.","pinned":false,"hidden":false,"mode":"md"},{"id":199,"value":"// [TO-DO]: Country #1\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"// [TO-DO]: Country #2\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"// [TO-DO]: Country #3\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"## Additional Resources\n\n- [https://www.qgis.org/](https://www.qgis.org/): A downloadable application that gives you complete control over the features and qualities of the ShapeFile you need. Installing this application gives you 1) a local method to modify ShapeFiles instead of the online [MapShaper]() tool, and 2) command prompts to locally convert from ShapeFile to GeoJSON.\n- [Stack Overflow Thread](https://stackoverflow.com/questions/17267248/how-where-do-i-get-geojson-data-for-states-provinces-and-administrative-region): This thread covers steps on how to use QGIS locally.\n- [https://geojson.io/](https://geojson.io/): An online tool for defining GeoJSON features manually.","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"import { css, comment } from '@rk2546/2025-infovis-cse_notebook-gallery'","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"css","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"usa = {\n let raw = (await FileAttachment(\"gadm41_USA_1.json\").json()) \n ReverseWindingOrder(raw)\n return raw;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}