45:["$","title",null,{"children":"Week 8 Lab: Plotting and Troubleshooting GeoJSON with D3 | rk2546 | Observable"}] 4d:T432,### GeoJSON Coordinate System GeoJSON follows a geographic coordinate system where the positions are usually stored as: ```js [LONGITUDE, LATITUDE] ``` |Coordinate|Valid range|Meaning| |:-|:-|:-| |Longitude|−180° to +180°|West to East| |Latitude|−90° to +90°|South to North| GeoJSON follows a specific standard of long/lat coordinates called the World Geodetic System (WGS) - specifically, **WGS 84** (or otherwise called **EPSG:4326**). You should remember that long/lat coordinates are not pixel positions; they are degrees relative to the Prime Meridian and Equator, respectively.

[NOTE]

When you're hunting for geodata, good geodata resources will usually clarify what coordinate system standard they use. Since GeoJSON uses WSG 84, you don't normally really need to think about it. If you happen to have issues with your data though, make sure to double-check.

4e:T6cd,### GeoJSON Geometry There are **six (6)** fundamental geometry types, plus `GeometryCollection`: |Geometry Type|Description|Format| |:-|:-|:-| |`Point`|A single coordinate point, such as a building or pin on a map|`[lon, lat]`| |`MultiPoint`|Multiple _independent_ points|`[[lon, lat], ...]`| |`LineString`|A connected path, like a river or road|`[[lon, lat], ...]`| |`MultiLineString`|Several _independent_ lines|`[[[lon, lat], ...], ...]`| |`Polygon`|One polygonal region, potentially with _holes_|`[[[lon, lat], ...], ...]`| |`MultiPolygon`|Multiple polygonal groups, combined into a single entity|`[[[[lon, lat], ...], ...], ...]`| All polygons are constructed from **one or more rings**. Each ring must begin and end **at the same coordinate**. Consider this example, which actually has two (2) rings: an exterior ring, and an interior _hole_. ```js { type: "Polygon", coordinates: [ // Exterior boundary [ [0, 0], [10, 0], [10, 10], [0, 10], [0, 0] ], // Interior hole [ [3, 3], [3, 7], [7, 7], [7, 3], [3, 3] ] ] } ``` GeoJSON requires that **Exterior rings should be counterclockwise** and that **Interior holes should be clockwise**, using the Right-Hand Rule (RHR). A `MultiPolygon` - frankly, the type you might encounter most often when dealing with geographic data - uses nesting to define its child polygons: ```js { type: "MultiPolygon", coordinates: [ [ // First polygon's exterior ring [[0, 0], [4, 0], [4, 4], [0, 0]] ], [ // Second polygon's exterior ring [[8, 8], [12, 8], [12, 12], [8, 8]] ] ] } ```4f:T441,### Step 1: Find an appropriate ShapeFile ShapeFiles 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 **three** accessible resources where you can download ShapeFiles: 1. US Census Cartographic Boundaries Data: Geographic data of U.S. regions based on different features such as zip code divisions, census data, etc. Optimal for U.S.-focused boundary data. 2. https://gadm.org/data.html: An open-source solution that's freely accessible for academic and non-commercial usage. Recommended to download by country. 3. https://www.naturalearthdata.com/: A sizeable repository of ShapeFiles for world regions.50:T4cb,### Troubleshooting D3.js Behavior with GeoJSON This is a common problem with D3.js and GeoJSON. Namely, **there is a discrepancy between GeoJSON's Right-Hand-Rule (RHR) convention and D3.js's spherical geometry implementation**. To prevent issues like these, we need to consider: 1. Are there any `null` geometries in our data? 2. Are the `Polygon` and `MultiPolygon` geometries in our dataset the correct winding order? The winding direction issue is not always a _mandatory_ fix - it really depends on where you are getting the data from. It is your responsibility to **check if the GeoJSON data renders properly, and if not then fix the two likely problems above**. To aid you in the second point, we've written a `reverseWinding()` function that reverses the winding order of all geometries in a given dataset. You can use it to fix point #2. Fixing point #1 us a simple filtering operation, which you should be comfortable doing at this point.

[WARNING]

JavaScript is a reference-based system. If you pass your raw geodata into helper functions like reverseWinding(), it will mutate the original data. Be careful!

51:[{"id":"99c844539cae8debf31dfedf1cb4ff39b73f9dc142c42df81e286dc9354b491a6dc505aea8dfe6a48a1bfc8a21a84fc5d3e49a31f0e0a792de94243c7d65a0aa","href":"https://static.observableusercontent.com/files/99c844539cae8debf31dfedf1cb4ff39b73f9dc142c42df81e286dc9354b491a6dc505aea8dfe6a48a1bfc8a21a84fc5d3e49a31f0e0a792de94243c7d65a0aa","name":"gadm41_KOR_3.json","type":"application/json","lastModified":1761324260471.914,"size":2540092},{"id":"4bb5dfb4a973b76662bb4569e57210e6ae595f62b9651267ed7f08e92fb55aa191211c14628ce1683390a9813e9589612460a30abe441ef29502d15d88cd7fd2","href":"https://static.observableusercontent.com/files/4bb5dfb4a973b76662bb4569e57210e6ae595f62b9651267ed7f08e92fb55aa191211c14628ce1683390a9813e9589612460a30abe441ef29502d15d88cd7fd2","name":"gadm41_USA_1.json","type":"application/json","lastModified":1761310174724.471,"size":613845},{"id":"30cb9e8f41da555b15db4e24da84ec30fe62f6a1642b7d84ec858f3cba973058e21da5316ca81486e4e4ffd3605e297fc0616148578937c01395f49ccaf95864","href":"https://static.observableusercontent.com/files/30cb9e8f41da555b15db4e24da84ec30fe62f6a1642b7d84ec858f3cba973058e21da5316ca81486e4e4ffd3605e297fc0616148578937c01395f49ccaf95864","name":"layers.png","type":"image/png","lastModified":1761315410024.839,"size":34456},{"id":"c7b9c323d1de5006ab4f6f046ee30fee954303f8689f2042ac46d9630f8bd0c9c50a5724eed1008dfa758f61ede7275de8d2a2f687ac03e9bd24d8301dd03a68","href":"https://static.observableusercontent.com/files/c7b9c323d1de5006ab4f6f046ee30fee954303f8689f2042ac46d9630f8bd0c9c50a5724eed1008dfa758f61ede7275de8d2a2f687ac03e9bd24d8301dd03a68","name":"simplify.png","type":"image/png","lastModified":1761315527688.436,"size":35963},{"id":"a19be32cfe0702e31aea0a4515b41f51059a25f597bdf19cc9552d6f3fd693cdcec0cff18741095f7fbad26f16cca168b16fe54ed8208ad518abfff3f828a6d8","href":"https://static.observableusercontent.com/files/a19be32cfe0702e31aea0a4515b41f51059a25f597bdf19cc9552d6f3fd693cdcec0cff18741095f7fbad26f16cca168b16fe54ed8208ad518abfff3f828a6d8","name":"weird_bounds@1.png","type":"image/png","lastModified":1761312981204.52,"size":40495},{"id":"d3846e1984a6952c980e3d76e72c61e8eb33a703030db154e7041c025daf9dcab2a17e90d71b5bd83ae006ccda64d0488a2ec536a8142a42ad72a0e84bb0b09e","href":"https://static.observableusercontent.com/files/d3846e1984a6952c980e3d76e72c61e8eb33a703030db154e7041c025daf9dcab2a17e90d71b5bd83ae006ccda64d0488a2ec536a8142a42ad72a0e84bb0b09e","name":"weird_coords.png","type":"image/png","lastModified":1761313338902.692,"size":16526},{"id":"fdca8e29dccbd3c1ae77fe0348936a40365257ac05be152dbeeb90715f4a00dba1e403b769c6a90e5a73803d556949463e23ae8e065c8c50a8531926a32de863","href":"https://static.observableusercontent.com/files/fdca8e29dccbd3c1ae77fe0348936a40365257ac05be152dbeeb90715f4a00dba1e403b769c6a90e5a73803d556949463e23ae8e065c8c50a8531926a32de863","name":"geojson_hierarchy.png","type":"image/png","lastModified":1792085594260,"size":1407299},{"id":"7e6f9bbd522523233dc2eadf9dbec73fe8b910bf2e060eb291b0b2b73ecdd26f89788f30075b0a032daac7dc9e1e8177e926dbe7df0819785f4832ddcabd643a","href":"https://static.observableusercontent.com/files/7e6f9bbd522523233dc2eadf9dbec73fe8b910bf2e060eb291b0b2b73ecdd26f89788f30075b0a032daac7dc9e1e8177e926dbe7df0819785f4832ddcabd643a","name":"cb_2018_us_state_5m.json","type":"application/json","lastModified":1792088090019,"size":123343}] 49:{"id":"8f674aeb4417880c","slug":"2026-infovis-cse_week-8-lab","title":"Week 8 Lab: Plotting and Troubleshooting GeoJSON with D3","thumbnail":"55c9a2d8692dfcfb7021565e787d8606e0b6aaa7edb2097775576f6b89f42599","access_level":"unlisted","create_time":"$D2026-10-15T07:44:29.457Z","update_time":"$D2026-10-23T17:11:36.586Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/f4dbf638309ae46a2fdbe9c7c40d1cf5bd31e0cd3ce09ac558ef7a4a8f2d7377","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":425,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ddc2916ccfd28b14","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/a17ba87a2618a0219160d264d7e13fdef2d4fb8bd902ae457541c60e7498fc11","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/f4dbf638309ae46a2fdbe9c7c40d1cf5bd31e0cd3ce09ac558ef7a4a8f2d7377","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"---\n## D3 and Map Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":208,"value":"D3 specifically uses **GeoJSON** to render maps. There are alternative map frameworks such as 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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"### What Exactly IS GeoJSON?\n\nGeoJSON is formatted in the following way:\n\n${await FileAttachment(\"geojson_hierarchy.png\").image({width:1000})}\n\nIf you are familiar with JavaScript Objects, then this kind of organization should feel familiar to you. Here's an example of a simple GeoJSON:\n\n```js\n{\n \"type\": \"FeatureCollection\",\n \"features\": [\n {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinates\": [\n [\n [-74.0, 40.7],\n [-73.9, 40.7],\n [-73.9, 40.8],\n [-74.0, 40.8],\n [-74.0, 40.7]\n ]\n ]\n },\n \"properties\": {\n \"name\": \"Example Region\",\n \"population\": 10000\n }\n }\n ]\n}\n```\n\n- `geometry` determines where the region is and what its shape is.\n- `properties` provides information about that region.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"### GeoJSON Properties\n\nUnlike `geometry`, `properties` usually contain metadata about the geometry. For example:\n\n```js\n{\n \"GID_1\": \"USA.1_1\",\n \"GID_0\": \"USA\",\n \"COUNTRY\": \"UnitedStates\",\n \"NAME_1\": \"Alabama\",\n \"TYPE_1\": \"State\",\n \"ISO_1\": \"US-AL\"\n}\n```\n\nThese are properties of the state of Alabama. This particular instance gives us a lot of info, such as which country the region is a part of, what kind of region it is to begin with, and other identifiers. **Properties make it easier to link datasets together**, as you can link identifiers across datasets. Properties can also **hold information** (e.g. population counts for a region).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"---\n## Where to Find Geodata?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"Geodata is usually a combination of different data sources:\n\n1. Geographic boundary data (GeoJSON, TopoJSON, etc.) is usually converted from \"ShapeFiles\" (`.shp`).\n2. Geographic data points (e.g. points on a map) can also be encoded as GeoJSON data.\n3. Data trends and time series data are usually in the typical data format (e.g. `.csv`, Excel) and need to be mapped to GeoJSON features.\n\nYou can find existing GeoJSON files in the wild, such as in Vega-Lite's pre-existing US-Atlas GeoJSON or . However, _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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"$4f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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/, 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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"---\n## D3.js and Maps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"Once you've imported your geodata, then it's time to render. One of the files we are testing is `cb_2018_us_state_5m.json`, which converted into GeoJSON using MapShaper from the original US Census Cartographic Boundary Files Datasets.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":216,"value":"const us_state_5m = await FileAttachment(\"cb_2018_us_state_5m.json\").json();\ndisplay(us_state_5m)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"### Rendering Geoplots in D3.js\n\nRendering geoplots in D3.js is conceptually very similar to what we did with other non-scatter plot types such as Pie Charts and Histograms. Fundamentally, we need to:\n\n1. Determine what kind of **projection** we want to project our points onto.\n2. Create a **path generator** that maps raw points to our projection.\n3. Render **paths** using our path generator.\n\nObserve the code below. Here, we are projecting our data using `d3.geoAlbersUSA()`. There are other types of projections that D3.js provides, but since we're dealing with USA data then this kind of projection makes sense for us.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"// Determine our plot's dimensions\nconst usa_width = 800;\nconst usa_height = 550;\n\n// Define projection using Albers USA, our plot's dimensions, and `us_state_5m` we imported\nconst usa_projection = d3.geoConicEqualArea()\n .fitSize([usa_width, usa_height], us_state_5m);\n\n// Create geographic path generator\nconst usa_path = d3.geoPath(usa_projection);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"Now, we can render our SVG as a series of paths!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"// Create SVG\nconst usa_svg = d3.create(\"svg\")\n .attr(\"width\", usa_width)\n .attr(\"height\", usa_height);\n\n// Render each state as a path, with a fill, stroke, and stroke-width\nusa_svg.selectAll(\"path\")\n .data(us_state_5m.features)\n .enter()\n .append(\"path\")\n .attr(\"d\", usa_path)\n .attr(\"fill\", \"#D9E5EA\")\n .attr(\"stroke\", \"#333\")\n .attr(\"stroke-width\", 0.5);\n\n// Display\ndisplay(usa_svg.node());","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"**That's completely wrong!** What's going on?!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"$50","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"function reverseWinding(geodata) {\n geodata.features.forEach(feature => {\n const geometry = feature.geometry;\n if (geometry.type === \"MultiPolygon\") {\n geometry.coordinates.forEach(polygon => {\n polygon.forEach(ring => ring.reverse());\n });\n }\n\n if (geometry.type === \"Polygon\") {\n geometry.coordinates.forEach(ring => ring.reverse());\n }\n });\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"If we use this helper function to help with the winding order problem, and we create a _new_ iteration of the original GeoJSON data, then our plot should work.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"// Copy and Filter `us_state_5m`\nconst corrected = structuredClone(us_state_5m);\ncorrected.features = corrected.features.filter(\n d => d.geometry != null\n);\n\n// Reverse the winding order\nreverseWinding(corrected);\n\n// Create a corrected projection\nconst correct_projection = d3.geoConicEqualArea()\n .fitSize([usa_width, usa_height], corrected);\n\n// Create geographic path generator\nconst correct_path = d3.geoPath(correct_projection);\n\n// Create SVG\nconst correct_svg = d3.create(\"svg\")\n .attr(\"width\", usa_width)\n .attr(\"height\", usa_height);\n\n// Render each state\ncorrect_svg.selectAll(\"path\")\n .data(corrected.features)\n .enter()\n .append(\"path\")\n .attr(\"d\", correct_path)\n .attr(\"fill\", \"#D9E5EA\")\n .attr(\"stroke\", \"#333\")\n .attr(\"stroke-width\", 0.5);\n\n// Display\ndisplay(correct_svg.node());","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"### Lab Exercise: Try it yourself! (Remainder of Class)\n\n

[TO-DO]

Below, attempt to generate the geodata of one other country 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.

When you are done, upload a screenshot of your plot to this Google Drive folder with your name, NetID, and country in the filename.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":199,"value":"\n/* ===================\n// === BEGIN TO-DO ===\n// ================ */\n\n\n\n\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"import { css } from '@rk2546/infovis-cse-backend'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"css","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"2"}} 44:null