29:null 2a:["$","title",null,{"children":"Intro to Cartographic Visualization | Ayaan Kazerouni | Observable"}] 2f:T429,

30:T2f07,### GeoJSON [GeoJSON](https://en.wikipedia.org/wiki/GeoJSON) is a JSON-based standard for representing spatial data. It is used to represent _geometries_ like points, lines, and polygons. For example, the following object describes the geometry for the state of Colorado, drawn as a Polygon: ```js { "type": "Feature", "properties": { "id": "08", "name": "Colorado", }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -106.190554, 40.997607 ], [ -106.061181, 40.996999 ], [ -105.730421, 40.996886 ], [ -105.724804, 40.996910 ], [ -105.277138, 40.998173 ], [ -105.276860, 40.998173 ], [ -105.256527, 40.998191 ], [ -105.254779, 40.998210 ], [ -104.943371, 40.998084 ], [ -104.855273, 40.998048 ], [ -104.829504, 40.999270 ], [ -104.675999, 41.000957 ], [ -104.497149, 41.001828 ], [ -104.497058, 41.001805 ], [ -104.467672, 41.001473 ], [ -104.214692, 41.001657 ], [ -104.214191, 41.001568 ], [ -104.211473, 41.001591 ], [ -104.123586, 41.001626 ], [ -104.104590, 41.001543 ], [ -104.086068, 41.001563 ], [ -104.066961, 41.001504 ], [ -104.053249, 41.001406 ], [ -104.039238, 41.001502 ], [ -104.023383, 41.001887 ], [ -104.018223, 41.001617 ], [ -103.972642, 41.001615 ], [ -103.971373, 41.001524 ], [ -103.953525, 41.001596 ], [ -103.906324, 41.001387 ], [ -103.896207, 41.001750 ], [ -103.877967, 41.001673 ], [ -103.858449, 41.001681 ], [ -103.750498, 41.002054 ], [ -103.574522, 41.001721 ], [ -103.497447, 41.001635 ], [ -103.486697, 41.001914 ], [ -103.421975, 41.002007 ], [ -103.421925, 41.001969 ], [ -103.396991, 41.002558 ], [ -103.382492, 41.002232 ], [ -103.365314, 41.001846 ], [ -103.362979, 41.001844 ], [ -103.077804, 41.002298 ], [ -103.076536, 41.002253 ], [ -103.059538, 41.002368 ], [ -103.057998, 41.002368 ], [ -103.043444, 41.002344 ], [ -103.038704, 41.002251 ], [ -103.002026, 41.002486 ], [ -103.000102, 41.002400 ], [ -102.982690, 41.002157 ], [ -102.981483, 41.002112 ], [ -102.963669, 41.002186 ], [ -102.962522, 41.002072 ], [ -102.960706, 41.002059 ], [ -102.959624, 41.002095 ], [ -102.944830, 41.002303 ], [ -102.943109, 41.002051 ], [ -102.925568, 41.002280 ], [ -102.924029, 41.002142 ], [ -102.906547, 41.002276 ], [ -102.904796, 41.002207 ], [ -102.887407, 41.002178 ], [ -102.885746, 41.002131 ], [ -102.867822, 41.002183 ], [ -102.865784, 41.001988 ], [ -102.849263, 41.002301 ], [ -102.846455, 41.002256 ], [ -102.830303, 41.002351 ], [ -102.827280, 41.002143 ], [ -102.773546, 41.002414 ], [ -102.766723, 41.002275 ], [ -102.754617, 41.002361 ], [ -102.739624, 41.002230 ], [ -102.653463, 41.002332 ], [ -102.621033, 41.002597 ], [ -102.578696, 41.002291 ], [ -102.575738, 41.002268 ], [ -102.575496, 41.002200 ], [ -102.566048, 41.002200 ], [ -102.556789, 41.002219 ], [ -102.487955, 41.002445 ], [ -102.470537, 41.002382 ], [ -102.469223, 41.002424 ], [ -102.379593, 41.002301 ], [ -102.364066, 41.002174 ], [ -102.292833, 41.002207 ], [ -102.292622, 41.002230 ], [ -102.292553, 41.002207 ], [ -102.291354, 41.002207 ], [ -102.272100, 41.002245 ], [ -102.267812, 41.002383 ], [ -102.231931, 41.002327 ], [ -102.212200, 41.002462 ], [ -102.209361, 41.002442 ], [ -102.191210, 41.002326 ], [ -102.124972, 41.002338 ], [ -102.070598, 41.002423 ], [ -102.051718, 41.002377 ], [ -102.051614, 41.002377 ], [ -102.051292, 40.749591 ], [ -102.051292, 40.749586 ], [ -102.051398, 40.697542 ], [ -102.051725, 40.537839 ], [ -102.051519, 40.520094 ], [ -102.051465, 40.440008 ], [ -102.051840, 40.396396 ], [ -102.051572, 40.393080 ], [ -102.051798, 40.360069 ], [ -102.051553, 40.349214 ], [ -102.051309, 40.338381 ], [ -102.051922, 40.235344 ], [ -102.051894, 40.229193 ], [ -102.051909, 40.162674 ], [ -102.052001, 40.148359 ], [ -102.051744, 40.003078 ], [ -102.051569, 39.849805 ], [ -102.051363, 39.843471 ], [ -102.051318, 39.833311 ], [ -102.051254, 39.818992 ], [ -102.050594, 39.675594 ], [ -102.050099, 39.653812 ], [ -102.050422, 39.646048 ], [ -102.049954, 39.592331 ], [ -102.049806, 39.574058 ], [ -102.049764, 39.568180 ], [ -102.049554, 39.538932 ], [ -102.049673, 39.536691 ], [ -102.049679, 39.506183 ], [ -102.049369, 39.423333 ], [ -102.049370, 39.418210 ], [ -102.049167, 39.403597 ], [ -102.048960, 39.373712 ], [ -102.048449, 39.303138 ], [ -102.047250, 39.137020 ], [ -102.047189, 39.133147 ], [ -102.047134, 39.129701 ], [ -102.046571, 39.047038 ], [ -102.045388, 38.813392 ], [ -102.045334, 38.799463 ], [ -102.045448, 38.783453 ], [ -102.045371, 38.770064 ], [ -102.045287, 38.755528 ], [ -102.045375, 38.754339 ], [ -102.045212, 38.697567 ], [ -102.045156, 38.688555 ], [ -102.045127, 38.686725 ], [ -102.045160, 38.675221 ], [ -102.045102, 38.674946 ], [ -102.045074, 38.669617 ], [ -102.045288, 38.615249 ], [ -102.045288, 38.615168 ], [ -102.045211, 38.581609 ], [ -102.045189, 38.558732 ], [ -102.045223, 38.543797 ], [ -102.045112, 38.523784 ], [ -102.045262, 38.505532 ], [ -102.045263, 38.505395 ], [ -102.045324, 38.453647 ], [ -102.044936, 38.419680 ], [ -102.044442, 38.415802 ], [ -102.044944, 38.384419 ], [ -102.044613, 38.312324 ], [ -102.044568, 38.268819 ], [ -102.044567, 38.268749 ], [ -102.044510, 38.262412 ], [ -102.044398, 38.250015 ], [ -102.044251, 38.141778 ], [ -102.044589, 38.125013 ], [ -102.044255, 38.113011 ], [ -102.044644, 38.045532 ], [ -102.043844, 37.928102 ], [ -102.043845, 37.926135 ], [ -102.043219, 37.867929 ], [ -102.043033, 37.824146 ], [ -102.042953, 37.803535 ], [ -102.042668, 37.788758 ], [ -102.042158, 37.760164 ], [ -102.041990, 37.738541 ], [ -102.041876, 37.723875 ], [ -102.041574, 37.680436 ], [ -102.041694, 37.665681 ], [ -102.041582, 37.654495 ], [ -102.041585, 37.644282 ], [ -102.041618, 37.607868 ], [ -102.041894, 37.557977 ], [ -102.041899, 37.541186 ], [ -102.042016, 37.535261 ], [ -102.041786, 37.506066 ], [ -102.041801, 37.469488 ], [ -102.041755, 37.434855 ], [ -102.041669, 37.434740 ], [ -102.041676, 37.409898 ], [ -102.041586, 37.389190 ], [ -102.041524, 37.375018 ], [ -102.042089, 37.352819 ], [ -102.041974, 37.352613 ], [ -102.041817, 37.309490 ], [ -102.041664, 37.297650 ], [ -102.041963, 37.258164 ], [ -102.042002, 37.141744 ], [ -102.042135, 37.125021 ], [ -102.042092, 37.125021 ], [ -102.041809, 37.111973 ], [ -102.041983, 37.106551 ], [ -102.041920, 37.035083 ], [ -102.041749, 37.034397 ], [ -102.041921, 37.032178 ], [ -102.041950, 37.030805 ], [ -102.041952, 37.024742 ], [ -102.042240, 36.993083 ], [ -102.054503, 36.993109 ], [ -102.184271, 36.993593 ], [ -102.208316, 36.993730 ], [ -102.260789, 36.994388 ], [ -102.355288, 36.994506 ], [ -102.355367, 36.994575 ], [ -102.698142, 36.995149 ], [ -102.742060, 36.997689 ], [ -102.759860, 37.000019 ], [ -102.778569, 36.999242 ], [ -102.806762, 37.000019 ], [ -102.814616, 37.000783 ], [ -102.841989, 36.999598 ], [ -102.979613, 36.998549 ], [ -102.985807, 36.998571 ], [ -102.986976, 36.998524 ], [ -103.002199, 37.000104 ], [ -103.086106, 37.000174 ], [ -103.155922, 37.000232 ], [ -103.733247, 36.998016 ], [ -103.734364, 36.998041 ], [ -104.007855, 36.996239 ], [ -104.250536, 36.994644 ], [ -104.338833, 36.993535 ], [ -104.519257, 36.993766 ], [ -104.624556, 36.994377 ], [ -104.625545, 36.993599 ], [ -104.645029, 36.993378 ], [ -104.732031, 36.993447 ], [ -104.732120, 36.993484 ], [ -105.000554, 36.993264 ], [ -105.029228, 36.992729 ], [ -105.120800, 36.995428 ], [ -105.155042, 36.995339 ], [ -105.220613, 36.995169 ], [ -105.251296, 36.995605 ], [ -105.419310, 36.995856 ], [ -105.442459, 36.995994 ], [ -105.447255, 36.996017 ], [ -105.465182, 36.995991 ], [ -105.508836, 36.995895 ], [ -105.512485, 36.995777 ], [ -105.533922, 36.995875 ], [ -105.627470, 36.995679 ], [ -105.664720, 36.995874 ], [ -105.716471, 36.995849 ], [ -105.718470, 36.995846 ], [ -105.996159, 36.995418 ], [ -105.997472, 36.995417 ], [ -106.006634, 36.995343 ], [ -106.201469, 36.994122 ], [ -106.247705, 36.994266 ], [ -106.248675, 36.994288 ], [ -106.293279, 36.993890 ], [ -106.343139, 36.994230 ], [ -106.476280, 36.993839 ], [ -106.500589, 36.993768 ], [ -106.617159, 36.992967 ], [ -106.617125, 36.993004 ], [ -106.628652, 36.993175 ], [ -106.628733, 36.993161 ], [ -106.661344, 36.993243 ], [ -106.675626, 36.993123 ], [ -106.750591, 36.992461 ], [ -106.869796, 36.992426 ], [ -106.877292, 37.000139 ], [ -107.420913, 37.000005 ], [ -107.420915, 37.000005 ], [ -107.481737, 37.000005 ], [ -108.000623, 37.000001 ], [ -108.249358, 36.999015 ], [ -108.250635, 36.999561 ], [ -108.288086, 36.999555 ], [ -108.288400, 36.999520 ], [ -108.320464, 36.999499 ], [ -108.320721, 36.999510 ], [ -108.379203, 36.999459 ], [ -108.619689, 36.999249 ], [ -108.620309, 36.999287 ], [ -108.954404, 36.998906 ], [ -108.958868, 36.998913 ], [ -109.045223, 36.999084 ], [ -109.045166, 37.072742 ], [ -109.045058, 37.074661 ], [ -109.044995, 37.086429 ], [ -109.045189, 37.096271 ], [ -109.045173, 37.109464 ], [ -109.045203, 37.111958 ], [ -109.045156, 37.112064 ], [ -109.045995, 37.177279 ], [ -109.045978, 37.201831 ], [ -109.045487, 37.210844 ], [ -109.045584, 37.249351 ], [ -109.046039, 37.249993 ], [ -109.045810, 37.374993 ], [ -109.043464, 37.484711 ], [ -109.043137, 37.499992 ], [ -109.041915, 37.530653 ], [ -109.041865, 37.530726 ], [ -109.041806, 37.604171 ], [ -109.042131, 37.617662 ], [ -109.042089, 37.623795 ], [ -109.042269, 37.666067 ], [ -109.041732, 37.711214 ], [ -109.041760, 37.713182 ], [ -109.041636, 37.740210 ], [ -109.042098, 37.749990 ], [ -109.041461, 37.800105 ], [ -109.041754, 37.835826 ], [ -109.041723, 37.842051 ], [ -109.041844, 37.872788 ], [ -109.041653, 37.881170 ], [ -109.041058, 37.907236 ], [ -109.043121, 37.974260 ], [ -109.042819, 37.997068 ], [ -109.042820, 37.999301 ], [ -109.041837, 38.153022 ], [ -109.041762, 38.164690 ], [ -109.054648, 38.244921 ], [ -109.060062, 38.275489 ], [ -109.059962, 38.499987 ], [ -109.060253, 38.599328 ], [ -109.059541, 38.719888 ], [ -109.057388, 38.795456 ], [ -109.054189, 38.874984 ], [ -109.053943, 38.904414 ], [ -109.053797, 38.905284 ], [ -109.053233, 38.942467 ], [ -109.053292, 38.942878 ], [ -109.052436, 38.999985 ], [ -109.051512, 39.126095 ], [ -109.050765, 39.366677 ], [ -109.051363, 39.497674 ], [ -109.051040, 39.660472 ], [ -109.050615, 39.874970 ], [ -109.050873, 40.058915 ], [ -109.050813, 40.059579 ], [ -109.050944, 40.180712 ], [ -109.050973, 40.180849 ], [ -109.050969, 40.222662 ], [ -109.050946, 40.444368 ], [ -109.050314, 40.495092 ], [ -109.050698, 40.499963 ], [ -109.049955, 40.539901 ], [ -109.050074, 40.540358 ], [ -109.048044, 40.619231 ], [ -109.048249, 40.653601 ], [ -109.048373, 40.662602 ], [ -109.049088, 40.714562 ], [ -109.048455, 40.826081 ], [ -109.050076, 41.000659 ], [ -108.884138, 41.000094 ], [ -108.631108, 41.000156 ], [ -108.526667, 40.999608 ], [ -108.500659, 41.000112 ], [ -108.250649, 41.000114 ], [ -108.181227, 41.000455 ], [ -108.046539, 41.002064 ], [ -107.918421, 41.002036 ], [ -107.625624, 41.002124 ], [ -107.367443, 41.003073 ], [ -107.317794, 41.002967 ], [ -107.241194, 41.002804 ], [ -107.000606, 41.003444 ], [ -106.857773, 41.002663 ], [ -106.453859, 41.002057 ], [ -106.439563, 41.001978 ], [ -106.437419, 41.001795 ], [ -106.430950, 41.001752 ], [ -106.391852, 41.001176 ], [ -106.386356, 41.001144 ], [ -106.321165, 40.999123 ], [ -106.217573, 40.997734 ], [ -106.190554, 40.997607 ] ] ] } } ``` A GeoJSON object describes the geometry of a geographic region (in the **`geometry`** above) and can also include non-spatial properties of the region (in the **`properties`** member). In this case, the object has the following information: - The region has a `name` of `"Colorado"`. - The region has an `id` of `"08"` — This is the state's id according to the Federal Information Processing System (i.e, [its FIPS code](https://www.bls.gov/respondents/mwr/electronic-data-interchange/appendix-d-usps-state-abbreviations-and-fips-codes.htm)). - The points that make up the polygon. Much about GeoJSON can be found in the [official specification](https://geojson.org/) or in this [book chapter](https://geobgu.xyz/web-mapping/geojson-1.html) by Michael Dorman.31:[{"id":"a4affdca9cb1ccf828fef9e7aeec81647b3a422f9091c3685662698ae3c53ab68fb2c6ffc151594633322d9307490091ad6f03e368049b7b6f217469fbcda350","href":"https://static.observableusercontent.com/files/a4affdca9cb1ccf828fef9e7aeec81647b3a422f9091c3685662698ae3c53ab68fb2c6ffc151594633322d9307490091ad6f03e368049b7b6f217469fbcda350","name":"airport_volume_airport_locations@1.csv","type":"text/csv","lastModified":1745806245391.629,"size":141284}] 2d:{"id":"6f40444ed0382ccb","slug":"csc477-cartographic-visualization-intro","title":"Intro to Cartographic Visualization","thumbnail":"9c71065950ffae609aa27a3d6960a84df9d2051a1739addb7f430c618fa5f8de","access_level":"unlisted","create_time":"$D2025-04-27T22:17:06.917Z","update_time":"$D2026-05-05T16:51:13.278Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024"},"version":705,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null}],"members":[{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":24,"collection":{"id":"6c810503155b0a33","slug":"csc-477-cal-poly","title":"CSC 477","owner":{"id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni"}},"type":"notebook","body":{"title":"Intro to Cartographic Visualization","cells":[{"id":0,"value":"# Intro to Cartographic Visualization\n\n*Notebook accompanying [these lecture slides](https://observablehq.com/@ayaankazerouni/csc477-cartographic-visualization-intro)*.\n\nThis notebook is supplemental reading for our lecture on cartographic visualization.\nYou should also read the [UW Data Vis Curriculum notebook on the topic](https://observablehq.com/@uwdata/cartographic-visualization).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"## A point for each major airport","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":596,"value":"This notebook plays with a dataset of airport locations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":598,"value":"airports.view(3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"Looking at our airports data, what happens if we treat its `lon` and `lat` columns as `x` and `y` coordinates and plot them as a \"scatterplot\"? The relative east/west north/south placement of points is pretty accurate. Hover your mouse over the point on the far left: Honolulu International Airport is far to the west. If you were to look for San Francisco International Airport, chances are you know where to start looking!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":141,"value":"// TODO code here\nvl.markCircle()\n .data(airports)\n .encode(\n vl.x().fieldQ('lon'),\n vl.y().fieldQ('lat'),\n vl.tooltip(['Name'])\n )\n .width(700)\n .height(400)\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"However, this would introduce some _distortion_. For example, points with equal longitudes on Earth are closer together the closer you get to the poles, and farther from each other near the equator.\nSimply plotting longitudes on a linear scale would distort that: points closer to the poles would appear much farther from each other than they actually are.\n\nVega-Lite provides the channels **`vl.longitude()`** and **`vl.latitude()`** for encoding geographic data. Let's swap out our `x` and `y` encodings for those instead.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":199,"value":"// Code here\nvl.markCircle()\n .data(airports)\n .encode(\n vl.longitude().fieldQ('lon'),\n vl.latitude().fieldQ('lat'),\n vl.tooltip(['Name'])\n )\n .project(\n vl.projection('equalEarth')\n )\n .width(600)\n .height(300)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"_What changed?_ \n\nLongitudes and latitudes are not like x and y coordinates that are linearly oriented on a 2D plane.\nInstead, they define points on a spherical surface (the Earth).\n\n\"Flattening\" the sphere to represent it on a plane (a 2D image on your screen) involves transforming the longitude and latitude data using a [_map projection_](https://en.wikipedia.org/wiki/Map_projection).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":220,"value":"### Map projections\n\nA map projection is a transformation that takes geographical data about points on a spherical surface (the Earth) and transforms it for representation on a 2D plane.\n\nProjections are kind of like _scales_: their job is to map from the data domain (geographic position) to a visual range (pixels). However, unlike scales, projections are two-dimensional—where previously we defined scales separately for `x` and `y` encodings, map projections transform the entire tuple of (longitude, latitude) to a new tuple (`x`, `y`).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":279,"value":"A number of map projections exist, the most well-known of which is the [Mercator](https://en.wikipedia.org/wiki/Mercator_projection) projection.\n\nAll projections distort properties of the spherical surface being represented on a 2D plane. For example, in flattening the sphere for a 2D planar surface, the Mercator projection causes areas farther from the equator to appear proportionally larger than they actually are. The effect is illustrated in the \"indicatrix\" below.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":229,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":549,"value":"As a result of the projection, areas farther from the equator (like Antarctica and Greenland) appear far larger than they actually are.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":287,"value":"Let's project our airports data using the Mercator projection.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":233,"value":"vl.markCircle({ size: 50 })\n .data(airports)\n .encode(\n vl.longitude().fieldQ('lon'),\n vl.latitude().fieldQ('lat'),\n vl.tooltip(['Orig', 'Name'])\n )\n .project(\n vl.projection('mercator') // <--- Mercator projection\n )\n .width(800)\n .height(500)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"Erm, okay, our data are projected, but it's rather difficult to put our airport locations into context without the underlying world map.\n\nBut what's the \"data\" we are drawing when we draw \"a map\"?\n\nLet's take a short detour to learn about how geographical data is represented.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":473,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":537,"value":"### TopoJSON\n\nAs described, GeoJSON objects can become quite large. One reason for this is that a GeoJSON object representing multiple regions that border each other would replicate those boundaries. These redundancies can result in large file sizes. As a result, for our purposes, we will use a different format called **TopoJSON**. TopoJSON's main difference is that it will _not_ store redundant data for shared boundaries, vastly reducing file sizes.\n\n[Details are in the TopoJSON specification](https://github.com/topojson/topojson-specification).\n\nBelow is an example of a TopoJSON object. Expand it and poke at it!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"world = (await require('vega-datasets@3.2.1'))['world-110m.json']()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"A TopoJSON object includes the following:\n\n- An **`objects`** field that is, itself, an object. This value contains a series of fields whose values are GeoJSON _geometries_.\n- An **`arcs`** field whose value is an array of arcs, or line segments.\n- Optionally, there may be a **`transform`** field that includes information about scaling and translations (zoom and pan).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":487,"value":"Expand the **`objects`** field above. See that it has spatial data for the\n\n1. Landmasses on Earth (**`land`**),\n2. Information about country borders (**`countries`**)\n\nThese are known as _features_. We can give this to a Vega-Lite specification as **`.data()`** using the following:\n\n```js\nvl.topojson(world).feature('land')\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"## Ok, back to our airports! ✈️","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":314,"value":"The chart below shows the landmasses of the world map using the Mercator projection.\n\nThe following Vega-Lite concepts are introduced:\n\n- The [Geoshape mark](https://vega.github.io/vega-lite/docs/geoshape.html)\n- The function **`vl.topojson`**, described above, to extract the `\"land\"` feature from the TopoJSON object.\n- The **`vl.graticule`** and **`vl.sphere`** functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":297,"value":"{\n const graticule = vl.markGeoshape({ stroke: 'darkgrey' })\n .data(vl.graticule());\n\n const sphere = vl.markGeoshape({ stroke: 'black', fill: 'transparent' })\n .data(vl.sphere());\n \n const landmasses = vl.markGeoshape({ fill: 'lightgrey' })\n .data(\n vl.topojson(world).feature('land')\n )\n .width(800)\n .height(500)\n\n return vl.layer(sphere, graticule, landmasses)\n .project(\n vl.projection('equalEarth')\n )\n .render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"Drawing our airport points is now only a matter of layering the two charts together. In addition to the layers, I've given the points a size encoding and set opacity to 0.5 to account for overlaps.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":324,"value":"{\n const graticule = vl.markGeoshape({ stroke: 'darkgrey' })\n .data(vl.graticule());\n\n const sphere = vl.markGeoshape({ stroke: 'black', fill: 'transparent' })\n .data(vl.sphere());\n \n const landmasses = vl.markGeoshape({ fill: 'lightgrey' })\n .data(\n vl.topojson(world).feature('land')\n )\n .width(800)\n .height(500)\n\n const airportCircles = vl.markCircle()\n .data(airports)\n .encode(\n vl.longitude().field('lon'),\n vl.latitude().field('lat'),\n vl.size().fieldQ('TotalSeats')\n .scale({ range: [ 20, 500 ]})\n )\n\n return vl.layer(sphere, graticule, landmasses, airportCircles)\n .project(\n vl.projection('equalEarth')\n )\n .render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"You could also visualize the data using other projections. Try changing \"mercator\" to \"equalEarth\" in the chart above. The notebook from the Vega-Lite team on [Cartographic Projections](https://observablehq.com/@vega/vega-lite-cartographic-projections) is a good playground for different kinds of projections.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":177,"value":"The example uses this airport data sourced from the [World Bank](https://data.worldbank.org/). I somewhat arbitrarily filtered the dataset to only show the airports that serve over 1 million passengers per year (i.e., `totalSeats > 1000000`).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"airports = aq.fromCSV(\n await FileAttachment(\"airport_volume_airport_locations@1.csv\").text(),\n {\n parse: {\n TotalSeats: s => +s,\n Airport1Latitude: l => +l,\n Airport1Longitude: l => +l\n }\n }\n).rename({\n Airport1Latitude: 'lat',\n Airport1Longitude: 'lon'\n})\n.filter(d => d.TotalSeats > 1000000)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"