25:["$","title",null,{"children":"Cartographic Visualization in D3 | Isaac Kisker's Workspace | Observable"}] 49:T897,md` _“The making of maps is one of humanity's longest established intellectual endeavors and also one of its most complex, with scientific theory, graphical representation, geographical facts, and practical considerations blended together in an unending variety of ways.”_ — [H. J. Steward](https://books.google.com/books?id=cVy1Ms43fFYC) Cartography – the study and practice of map-making – has a rich history spanning centuries of discovery and design. Cartographic visualization leverages mapping techniques to convey data containing spatial information, such as locations, routes, or trajectories on the surface of the Earth.

Approximating the Earth as a sphere, we can denote positions using a spherical coordinate system of _latitude_ (angle in degrees north or south of the _equator_) and _longitude_ (angle in degrees specifying east-west position). In this system, a _parallel_ is a circle of constant latitude and a _meridian_ is a circle of constant longitude. The [_prime meridian_](https://en.wikipedia.org/wiki/Prime_meridian) lies at 0° longitude and by convention is defined to pass through the Royal Observatory in Greenwich, England. To "flatten" a three-dimensional sphere on to a two-dimensional plane, we must apply a [projection](https://en.wikipedia.org/wiki/Map_projection) that maps (\`longitude\`, \`latitude\`) pairs to (\`x\`, \`y\`) coordinates. Similar to [scales](https://d3js.org/d3-scale), projections map from a data domain (spatial position) to a visual range (pixel position). However, the scale mappings we've seen thus far accept a one-dimensional domain, whereas map projections are inherently two-dimensional. In this notebook, we will introduce the basics of creating maps and visualizing spatial data with D3, including: - Data formats for representing geographic features, - Geo-visualization techniques such as point, symbol, and choropleth maps, and - A review of common cartographic projections. `4a:T8e0,md` ~~~ json { "type": "Feature", "id": 8, "properties": {"name": "Colorado"}, "geometry": { "type": "Polygon", "coordinates": [ [[-106.32056285448942,40.998675790862656],[-106.19134826714341,40.99813863734313],[-105.27607827344248,40.99813863734313],[-104.9422739227986,40.99813863734313],[-104.05212898774828,41.00136155846029],[-103.57475287338661,41.00189871197981],[-103.38093099236758,41.00189871197981],[-102.65589358559272,41.00189871197981],[-102.62000064466328,41.00189871197981],[-102.052892177978,41.00189871197981],[-102.052892177978,40.74889940428302],[-102.052892177978,40.69733266640851],[-102.052892177978,40.44003613055551],[-102.052892177978,40.3492571857556],[-102.052892177978,40.00333031918079],[-102.04930288388505,39.57414465707943],[-102.04930288388505,39.56823596836465],[-102.0457135897921,39.1331416175485],[-102.0457135897921,39.0466599009048],[-102.0457135897921,38.69751011321283],[-102.0457135897921,38.61478847120581],[-102.0457135897921,38.268861604631],[-102.0457135897921,38.262415762396685],[-102.04212429569915,37.738153927339205],[-102.04212429569915,37.64415206142214],[-102.04212429569915,37.38900413964724],[-102.04212429569915,36.99365914927603],[-103.00046581851544,37.00010499151034],[-103.08660887674611,37.00010499151034],[-104.00905745863294,36.99580776335414],[-105.15404227428235,36.995270609834606],[-105.2222388620483,36.995270609834606],[-105.7175614468747,36.99580776335414],[-106.00829426840322,36.995270609834606],[-106.47490250048605,36.99365914927603],[-107.4224761410235,37.00010499151034],[-107.48349414060355,37.00010499151034],[-108.38081766383978,36.99903068447129],[-109.04483707103458,36.99903068447129],[-109.04483707103458,37.484617466122884],[-109.04124777694163,37.88049961001363],[-109.04124777694163,38.15283644441336],[-109.05919424740635,38.49983761802722],[-109.05201565922046,39.36680339854235],[-109.05201565922046,39.49786885730673],[-109.05201565922046,39.66062637372313],[-109.05201565922046,40.22248895514744],[-109.05201565922046,40.653823231326896],[-109.05201565922046,41.000287251421234],[-107.91779872584989,41.00189871197981],[-107.3183866123281,41.00297301901887],[-106.85895696843116,41.00189871197981],[-106.32056285448942,40.998675790862656]] ] } } ~~~ `4b:Ta6c,md` There are numerous (if not infinite) ways of converting (or 'projecting') a point on a sphere (e.g. the earth) to a point on a flat surface (e.g. a screen) and people have written countless articles (such as this one) on the pros and cons of different projections. In short there is no perfect projection as every projection will distort shape, area, distance and/or direction. Choosing a projection is a case of choosing which property you don't want to be distorted and accepting that there'll be distortion in the other properties (or choose a projection that strives for a balanced approach). Some of the properties we might wish to consider include: - _Area_: Does the projection distort region sizes? - _Bearing_: Does a straight line correspond to a constant direction of travel? - _Distance_: Do lines of equal length correspond to equal distances on the globe? - _Shape_: Does the projection preserve spatial relations (angles) between points? Selecting an appropriate projection thus depends on the use case for the map. For example, if we are assessing land use and the extent of land matters, we might choose an area-preserving projection. If we want to visualize shockwaves emanating from an earthquake, we might focus the map on the quake's epicenter and preserve distances outward from that point. Or, if we wish to aid navigation, the preservation of bearing and shape may be more important. We can also characterize projections in terms of the _projection surface_. Cylindrical projections, for example, project surface points of the sphere onto a surrounding cylinder; the "unrolled" cylinder then provides our map. As we further describe below, we might alternatively project onto the surface of a cone (conic projections) or directly onto a flat plane (azimuthal projections). For example, if it's important that the size of countries are represented accurately then choose a projection that strives to preserve area (probably to the cost of shape, distance and direction). D3 has a number of core projections that should cover most use cases: - geoAzimuthalEqualArea - geoAzimuthalEquidistant - geoGnomonic - geoOrthographic - geoStereographic - geoAlbers - geoConicConformal - geoConicEqualArea - geoConicEquidistant -geoEquirectangular - geoMercator - geoTransverseMercator Some projections preserve area (e.g. geoAzimuthalEqualArea & geoConicEqualArea), others distance (e.g. geoAzimuthalEquidistant & geoConicEquidistant) and others relative angles (e.g. geoEquirectangular & geoMercator). For a more in depth discussion of the pros and cons of each projection explore D3's [Projection Pages](https://d3js.org/d3-geo/projection).`4c:T48d,{ // create SVG element let svg = d3.select(DOM.svg(width, height)); svg .append("rect") .attr("fill", "#fafafa") .attr("stroke-width", "1") .attr("stroke", "#dddddd") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height); if (margin) { // add dashed outline svg .append("rect") .attr("fill", "none") .attr("stroke", "#999999") .attr("stroke-width", "1") .attr("stroke-dasharray", "8 5") .attr("x", margin) .attr("y", margin) .attr("width", width - 2 * margin) .attr("height", height - 2 * margin); // add text svg .append("text") .attr("x", width / 2) .attr("y", height - 3) .attr("font-size", 12) .attr("text-anchor", "middle") .attr("fill", "#999999") .text("(The map's margin)"); } // add text svg .append("text") .attr("x", width / 2) .attr("y", height / 2) .attr("dy", 7) .attr("text-anchor", "middle") .attr("fill", "#999999") .text(margin ? "A Map" : "A map without margin"); // pass to Observable to represent this block return svg.node(); }4d:T4b4,districtCouncilMap = { let svg = d3.select(DOM.svg(width, height)); //Draw a background rectangle. This could also be done by just styling the svg in a css file. svg .append("rect") .attr("fill", "#fafafa") .attr("stroke-width", "1") .attr("stroke", "#dddddd") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height); // construct the path elements using the D3 data join svg .selectAll("path") // data() expects an Array, so make sure to pass the features entry of our FeatureCollection .data(districtCouncils.features) // select all data items that are not represented on the map yet, and add them .enter() .append("path") // assign attributes to those new elements .attr("d", pathGenerator) .attr("fill", "none") .attr("stroke", "#999999") .attr("stroke-width", "2"); // Add the single point we created earlier. Can you tell where it is located? :-) svg .append("circle") .attr("cx", projectedPoint[0]) .attr("cy", projectedPoint[1]) .attr("r", 2.5) .attr("fill", "#000000") .attr("stroke", "none"); // pass to Observable to draw this block return svg.node(); }4e:T6b8,districtCouncilMap2 = { let svg = d3.select(DOM.svg(width, height)); //Draw a background rectangle. This could also be done by just styling the svg in a css file. svg .append("rect") .attr("fill", "#fafafa") .attr("stroke-width", "1") .attr("stroke", "#dddddd") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height); // construct the path elements using the D3 data join svg .selectAll("path") // data() expects an Array, so make sure to pass the features entry of our FeatureCollection .data(districtCouncils.features) // select all data items that are not represented on the map yet, and add them .enter() .append("path") // assign attributes to those new elements .attr("d", pathGenerator) .attr("fill", "none") .attr("stroke", "#32a852") .attr("stroke-width", ".5"); // construct the path elements using the D3 data join svg .append("g") .selectAll("path") // data() expects an Array, so make sure to pass the features entry of our FeatureCollection .data(bikeways.features) // select all data items that are not represented on the map yet, and add them .enter() .append("path") // assign attributes to those new elements .attr("d", pathGenerator) .attr("fill", "none") .attr("stroke", "#999999") .attr("stroke-width", "2"); // Add the single point we created earlier. Can you tell where it is located? :-) svg .append("circle") .attr("cx", projectedPoint[0]) .attr("cy", projectedPoint[1]) .attr("r", 2.5) .attr("fill", "#000000") .attr("stroke", "none"); // pass to Observable to draw this block return svg.node(); }4f:Ta48,crashesMap2 = { let svg = d3.select(DOM.svg(width, height)); //Draw a background rectangle. This could also be done by just styling the svg in a css file. svg .append("rect") .attr("fill", "#fafafa") .attr("stroke-width", "1") .attr("stroke", "#dddddd") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height); // construct the path elements using the D3 data join svg .selectAll("path") // data() expects an Array, so make sure to pass the features entry of our FeatureCollection .data(districtCouncils.features) // select all data items that are not represented on the map yet, and add them .enter() .append("path") // assign attributes to those new elements .attr("d", pathGenerator) .attr("fill", "none") .attr("stroke", "#999999") .attr("stroke-width", "2"); svg .selectAll("path") // data() expects an Array, so make sure to pass the features entry of our FeatureCollection .data(bikeways.features) // select all data items that are not represented on the map yet, and add them .enter() .append("path") // assign attributes to those new elements .attr("d", pathGenerator) .attr("fill", "none") .attr("stroke", "#32a852") .attr("stroke-width", "0.5"); // Add the single point we created earlier. Can you tell where it is located? :-) // svg // .append("circle") // .attr("cx", projectedPoint[0]) // .attr("cy", projectedPoint[1]) // .attr("r", 5) // .attr("fill", "#000000") // .attr("stroke", "none"); // svg // .append("g") // .attr("fill", "#009999") // .attr("fill-opacity", 0.5) // .attr("stroke", "white") // .attr("stroke-width", 0.5); //TODO: Modify this group to select and draw circles based on the bikeData. const colorScale = d3.scaleOrdinal() .domain(bikeData.map(d => d.Crash_Type)) .range(['red ', 'steelblue', 'steelblue', 'steelblue', 'steelblue', 'steelblue', 'steelblue']); svg .append("g") .selectAll("circle") // data() expects an Array, so make sure to pass the features entry of our FeatureCollection .data(bikeData) // select all data items that are not represented on the map yet, and add them .enter() .append("circle") .attr("cx", (d) => projection([d.Longitude, d.Latitude])[0]) .attr("cy", (d) => projection([d.Longitude, d.Latitude])[1]) .attr("r", 3) .attr("fill", (d) => colorScale(d.Crash_Type)) .attr("opacity", ".5") .attr("stroke", "#000000"); // pass to Observable to draw this block return svg.node(); }50:Ta50,// TODO: crashesMap = { let svg = d3.select(DOM.svg(width, height)); //Draw a background rectangle. This could also be done by just styling the svg in a css file. svg .append("rect") .attr("fill", "#fafafa") .attr("stroke-width", "1") .attr("stroke", "#dddddd") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height); // construct the path elements using the D3 data join svg .selectAll("path") // data() expects an Array, so make sure to pass the features entry of our FeatureCollection .data(districtCouncils.features) // select all data items that are not represented on the map yet, and add them .enter() .append("path") // assign attributes to those new elements .attr("d", pathGenerator) .attr("fill", "none") .attr("stroke", "#999999") .attr("stroke-width", "2"); svg .selectAll("path") // data() expects an Array, so make sure to pass the features entry of our FeatureCollection .data(bikeways.features) // select all data items that are not represented on the map yet, and add them .enter() .append("path") // assign attributes to those new elements .attr("d", pathGenerator) .attr("fill", "none") .attr("stroke", "#32a852") .attr("stroke-width", "0.5"); // Add the single point we created earlier. Can you tell where it is located? :-) // svg // .append("circle") // .attr("cx", projectedPoint[0]) // .attr("cy", projectedPoint[1]) // .attr("r", 5) // .attr("fill", "#000000") // .attr("stroke", "none"); // svg // .append("g") // .attr("fill", "#009999") // .attr("fill-opacity", 0.5) // .attr("stroke", "white") // .attr("stroke-width", 0.5); //TODO: Modify this group to select and draw circles based on the bikeData. const colorScale = d3.scaleOrdinal() .domain(bikeData.map(d => d.Crash_Type)) .range(['red ', 'steelblue', 'steelblue', 'steelblue', 'steelblue', 'steelblue', 'steelblue']); svg .append("g") .selectAll("circle") // data() expects an Array, so make sure to pass the features entry of our FeatureCollection .data(bikeData) // select all data items that are not represented on the map yet, and add them .enter() .append("circle") .attr("cx", (d) => projection([d.Longitude, d.Latitude])[0]) .attr("cy", (d) => projection([d.Longitude, d.Latitude])[1]) .attr("r", 3) .attr("fill", (d) => colorScale(d.Crash_Type)) .attr("opacity", ".5") .attr("stroke", "#000000"); // pass to Observable to draw this block return svg.node(); }51:[{"id":"2e333605ceb4390b3d8d964af9319d7ddda6f49ea71d056124a32bfd33bab0cd70774ea0ffc3248b7c0d678313223f9f45019533fe8146a598ed4434582e9e81","href":"https://static.observableusercontent.com/files/2e333605ceb4390b3d8d964af9319d7ddda6f49ea71d056124a32bfd33bab0cd70774ea0ffc3248b7c0d678313223f9f45019533fe8146a598ed4434582e9e81","name":"finalresult.png","type":"image/png","lastModified":1698261794677.009,"size":673652},{"id":"ea941b379f4f79cfa5efadd025653c7cbb49b4b40f24e210de4560a0f61b0742e2790da492250c8db8aad5631060cd5c7b4e7b08149ee5f583f7c282dc9a5bd4","href":"https://static.observableusercontent.com/files/ea941b379f4f79cfa5efadd025653c7cbb49b4b40f24e210de4560a0f61b0742e2790da492250c8db8aad5631060cd5c7b4e7b08149ee5f583f7c282dc9a5bd4","name":"Pedestrian_and_Bike_Crash_Dataset__.csv","type":"text/csv","lastModified":1698261794677.009,"size":150181},{"id":"5f049eaffa6f7460e62a134f77f72d151475dc0bb66797045604799fbdf69e7bcf0c40fce4603acab37b20bc33af5bb7ea1052ab79460a89194748a0ccde5152","href":"https://static.observableusercontent.com/files/5f049eaffa6f7460e62a134f77f72d151475dc0bb66797045604799fbdf69e7bcf0c40fce4603acab37b20bc33af5bb7ea1052ab79460a89194748a0ccde5152","name":"bikeways.png","type":"image/png","lastModified":1698261794677.009,"size":442508},{"id":"5e7ffb12cc6496255af008e0495167a03cbd1ff97d755d2fee86a352a6fbcfd8a9f9ecca99905d882c57ca0e58ad10ea879493f1279b7656390fd0bd5d98a48d","href":"https://static.observableusercontent.com/files/5e7ffb12cc6496255af008e0495167a03cbd1ff97d755d2fee86a352a6fbcfd8a9f9ecca99905d882c57ca0e58ad10ea879493f1279b7656390fd0bd5d98a48d","name":"Bikeways.geojson","type":"application/geo+json","lastModified":1698261794677.009,"size":928478},{"id":"7c7899f8201be7df7b91fd0bcdbf0e4c991dea72bb093132044b9be7e8413c1b09969bbbcef9e3ad8ae6340ad60088c64f207dd5e9e3a69e118ca62aa75a6a6a","href":"https://static.observableusercontent.com/files/7c7899f8201be7df7b91fd0bcdbf0e4c991dea72bb093132044b9be7e8413c1b09969bbbcef9e3ad8ae6340ad60088c64f207dd5e9e3a69e118ca62aa75a6a6a","name":"District_Councils.geojson","type":"application/geo+json","lastModified":1698261794677.009,"size":42581},{"id":"16ecd48b052b01f664ba589f60e8936bf79f07886d3bb4eda163e1f2ee71c06d32b3a2e12e0242066ac8edc0b87e53d4d10df0822a5b59a6f12c0daba87d06a5","href":"https://static.observableusercontent.com/files/16ecd48b052b01f664ba589f60e8936bf79f07886d3bb4eda163e1f2ee71c06d32b3a2e12e0242066ac8edc0b87e53d4d10df0822a5b59a6f12c0daba87d06a5","name":"crashes.png","type":"image/png","lastModified":1698261794677.009,"size":630779}] 29:{"id":"6e4145934de112f2","slug":null,"title":"Cartographic Visualization in D3","thumbnail":"0b74b523b7267934fcb438061772eed176dd7998e0a795d607a2c0568ccab945","access_level":"public","create_time":"$D2023-10-25T19:23:14.677Z","update_time":"$D2023-11-17T22:08:17.365Z","view_time":null,"first_public_time":"$D2023-10-25T19:23:14.677Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"33bc90254553ee44","login":"isaac-kisker-ws","name":"Isaac Kisker's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/af476018cc679b0480e4b3c1d3ee024757439918432322179e725594d2c8a880","tier":"starter_2024","bio":"","following":false},"version":359,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9e502139a4e7c755","login":"isaac-kisker","name":"Isaac Kisker","avatar_url":"https://avatars-next.observableusercontent.com/a72eff3e79b4661c1f4802e2e0e484aed1cf0b2fde42067c8c0eac4e8109a832","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"9e502139a4e7c755","login":"isaac-kisker","name":"Isaac Kisker","avatar_url":"https://avatars-next.observableusercontent.com/a72eff3e79b4661c1f4802e2e0e484aed1cf0b2fde42067c8c0eac4e8109a832","tier":null,"role":"editor"},{"type":"team","id":"33bc90254553ee44","login":"isaac-kisker-ws","name":"Isaac Kisker's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/af476018cc679b0480e4b3c1d3ee024757439918432322179e725594d2c8a880","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Cartographic Visualization in D3","cells":[{"id":0,"value":"# Cartographic Visualization in D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`\n

\n## Geographic Data: GeoJSON\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`\nUp to this point, we have worked with JSON and CSV formatted datasets that correspond to data tables made up of rows (records) and columns (fields). In order to represent geographic regions (countries, states, _etc._) and trajectories (flight paths, subway lines, _etc._), we need to expand our repertoire with additional formats designed to support rich geometries.\n\n[GeoJSON](https://en.wikipedia.org/wiki/GeoJSON) models geographic features within a specialized JSON format. A GeoJSON \\`feature\\` can include geometric data – such as \\`longitude\\`, \\`latitude\\` coordinates that make up a country boundary – as well as additional data attributes.\n\nHere is a GeoJSON \\`feature\\` object for the boundary of the U.S. state of Colorado:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`\nThe \\`feature\\` includes a \\`properties\\` object, which can include any number of data fields, plus a \\`geometry\\` object, which in this case contains a single polygon that consists of \\`[longitude, latitude]\\` coordinates for the state boundary. The coordinates continue off to the right for a while should you care to scroll...\n\nTo learn more about the nitty-gritty details of GeoJSON, see the [official GeoJSON specification](http://geojson.org/) or read [Tom MacWright's helpful primer](https://macwright.org/2015/03/23/geojson-second-bite).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`We'll start by loading in the geojson file with the information about the district councils in Saint Paul. I downloaded the file from the [Saint Paul open data website](https://information.stpaul.gov/datasets/stpaul::district-councils/about). Note that you can add files to your observable notebook (see the attachment symbol to the right of the screen), and you can easily import them into your program as well. See [this tutorial](https://beta.observablehq.com/@mbostock/introduction-to-data) on how to host and load data in Observable `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"districtCouncils = FileAttachment(\"District_Councils.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`\n

\n## Map Projections\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`\n### Step 1: Defining the map geometry\n\nTo draw a map, you first need to make up your mind about the size you want it to have. You may also want to define a margin, to avoid drawing right up to the edges of the map.\n\nUsually the map's geometry is defined as a set of parameters at the top of our program:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"viewof width = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"viewof height = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"viewof margin = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"md`We can use these parameters to sketch out our map surface. You can also change these parameters and see how the map geometry updates in real time! (_Try this by entering different numbers in the boxes above, or by using the up/down arrows next to the numbers_)\n\nSo this is a sketch of what our map will look like:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`You can choose one of the available [D3 projections](https://github.com/d3/d3-geo#projections) and set it up in a way that your geometry will neatly cover the available map space. Use the [\\`fitExtent()\\`](https://github.com/d3/d3-geo#projection_fitExtent) method to do so:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"projection = d3.geoMercator().fitExtent(\n [\n [margin, margin], // top, left\n [width - margin, height - margin] // bottom, right\n ],\n districtCouncils // geometry\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"md`_Try swapping the projection used above with a few other types of projections and see how they affect the maps further down the page._ Before you move on, set it back to the Mercator projection.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"md`The projection transforms points in geographic space into coordinates on our map.\n\n Warning! \nD3 as well as GeoJSON expect geographic coordinates as an Array containing the sequence \\`[, ]\\`. Note the ordering!\n\nTo test our projection, let's define a single geographic point. (I looked up the coordinates for a place in St. Paul to make sure it is a point visible on the map. Can you guess where it is?)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"lonLatPoint = [-93.1674493302, 44.9368412526] // a point in St. Paul","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md`The \\`projection\\` is simply a function, taking a longitude/latitude point as a parameter and returning an x/y point on the map:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"projectedPoint = projection(lonLatPoint) // the geographic coordinates are transformed into map coordinates","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`We can use these x/y map coordinates to plot the point to the map:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"pointMap = {\n // create SVG element\n let svg = d3.select(DOM.svg(width, height));\n\n svg\n .append(\"rect\")\n .attr(\"fill\", \"#fafafa\")\n .attr(\"stroke-width\", \"1\")\n .attr(\"stroke\", \"#dddddd\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n // construct the element\n svg\n .append(\"circle\")\n .attr(\"cx\", projectedPoint[0])\n .attr(\"cy\", projectedPoint[1])\n .attr(\"r\", 2.5)\n .attr(\"fill\", \"#000000\")\n .attr(\"stroke\", \"none\");\n\n svg\n .append(\"text\")\n .attr(\"x\", projectedPoint[0] + 6)\n .attr(\"y\", projectedPoint[1])\n .attr(\"dy\", 2)\n .attr(\"font-size\", \"9\")\n .text(lonLatPoint);\n\n // pass to Observable to represent this block\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"md`\n

\n## Path Generators`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"md`The shapes in the D3 maps are made up of SVG path elements. Each of them has a d attribute (path data) which defines the shape of the path.\n\nThe path data consists of a list of commands such as M0,80L100,100L200,30L300,50L400,40L500,80 which describe the shape of the path. Each letter such as M or L describe a command such as 'move to' and 'draw a line to'. See the [SVG specification](https://www.w3.org/TR/SVG/paths.html) for more detail.\n\nD3 includes a *[path generator](https://github.com/d3/d3-geo#paths)* that creates paths from the projection shapes.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"pathGenerator = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"md`The path generator is a function that takes a GeoJSON object as argument and transforms its geometry into an [SVG path expression](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) representing the projected geometry:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"mapPath = pathGenerator(districtCouncils)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md`All you need to do is assign the output of the path generator to the \\`d\\` attribute of an SVG \\`path\\` element.\n\nThe code below constructs an SVG element for our map (using the \\`width\\` and \\`height\\` parameters set up [above](#width), which you can still modify to adjust the map's size). To draw all of the district council outlines on the map, use [D3's data join](https://bost.ocks.org/mike/join/) mechanism -- the core of the “magic” of D3. The array of councils is joined with the \\`path\\`s on the map using the [\\`data()\\`](https://github.com/d3/d3-selection#selection_data) function, and the missing elements are created and intialized using the path generator.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md`

\n## Going Further: Adding More Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`\nSo far the map just shows outlines. Let's go a bit further. We'll start by adding in a bikeway dataset from the [St. Paul open data website](https://information.stpaul.gov/datasets/stpaul::bikeways-1/about).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"bikeways = FileAttachment(\"Bikeways.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"md`We want the result to look something like this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"FileAttachment(\"bikeways.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"md`_In the box below draw the bikeways on top of the district council outlines_. I used #32a852 for the stroke and 0.5 for the stroke weight.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"md`### Adding in Data Points\nAwesome! Let's add some data points to our map. I grabbed a list of pedestrian and bike crashes from [the city of Saint Paul's open datasets](https://information.stpaul.gov/datasets/stpaul::pedestrian-and-bike-crash-dataset-/explore). `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"bikeData = FileAttachment(\"Pedestrian_and_Bike_Crash_Dataset__.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"md`_Expand the bikeData array and inspect the contents. What features does this dataset have?_. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":292,"value":"FileAttachment(\"crashes.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"md`_Now modify the code below (find the TODO comment) to draw svg circles at each position there was a crash_. The result should look like the image above. Each circle should be centered on the projected longitude and latitude. The radius should be 3. Color the circles red if the Crash_Type is \"bike\" and steelblue for anything else.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md`### Making a Chloropleth Map\nA [choropleth map](https://en.wikipedia.org/wiki/Choropleth_map) uses shaded or textured regions to visualize data values. Sized symbol maps may be more accurate to read, as people tend to be better at estimating proportional differences between the area of circles than between color shades. Nevertheless, choropleth maps are popular in practice for visualizing rates and useful when too many symbols become perceptually overwhelming.\n\nLet's have some fun and make a chloropleth map. Let's use the number of bike crashes in each district to set the colors. If only there were some way that we could easily tell if a lat/long point lay within a geojson geometry...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"addCrashData = {\n for (const districtIndex in districtCouncils.features) {\n var district = districtCouncils.features[districtIndex];\n district.properties.numBikeCrashes = 0;\n for (const bikeIndex in bikeData) {\n if (\n d3.geoContains(district, [\n bikeData[bikeIndex].Longitude,\n bikeData[bikeIndex].Latitude\n ])\n ) {\n district.properties.numBikeCrashes += 1;\n }\n }\n }\n color.domain([\n 0,\n d3.max(districtCouncils.features, (d) => d.properties.numBikeCrashes)\n ]);\n return districtCouncils;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"color = d3.scaleQuantize().range(d3.schemeBlues[9])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"md`The code above adds a new property to the bikeData dataset for each district. The geoContains function can be used to test whether a point is inside a geo path. The code also creates a color scale, setting the domain based on the number of bike crashes, and the range to a set of colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"md`_Modify your map above to also encode the district color based on the number of crashes_. Your final result should look something like the image below: `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"FileAttachment(\"finalresult.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"$50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"md`\n

\n## Extras\nIf you still have additional time, try downloading some other feature layer from the [the city of Saint Paul's open datasets](https://information.stpaul.gov/search) and create additional map visualizations using it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"md`

\n## Attribution\nSome of the text for this activity comes directly from the UW Data Lab's [Cartographic Visualization](https://observablehq.com/@uwdata/cartographic-visualization) in vega-lite activity, the [D3 in Depth](https://www.d3indepth.com/geographic/) series, and [Florian Ledermann](https://observablehq.com/@floledermann/drawing-maps-from-geodata-in-d3).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"1"}} 24:null