2c:null 2d:["$","title",null,{"children":"Week 11 - Intro to D3.js: Mapping Data with D3 | rlluo1 | Observable"}] 32:T70a,md` ## D3 and Web Mapping: Map your Data! It might not surprise you, given the robust visualization capabilities of D3, that it is also great for creating interactive web maps and mapping datasets. Mapping in D3, in fact, is easier than you might think. Drawing a basic map doesn't take any more code than a bar chart, line chart, or scatter plot. Web mapping in D3 can allow for animation, visualization, and interaction. You can also coordinate charts and plots with your map. As we go along, you will learn D3 supports topology and even projections, making it very powerful! In this session, let's introduce mapping with D3 by going over some fundamentals, getting some data on the map, and then showing one example of how we can do a time slider interaction. Lastly, we'll look at TopoJSON, a GeoJSON that supports topology, and some examples of choropleth maps and how you can create those. The map below is a nice example of a [choropleth map from Mike Bostock](https://beta.observablehq.com/@mbostock/d3-choropleth), the creator of D3. It uses a number of features you might be familiar with if you have done some web mapping. The county geometry is stored as a JSON (a [TopoJSON](https://github.com/topojson/topojson/wiki) in fact, but more on this later...), and the data in a Tab-separated format (TSV). The rest of the implementation is D3 JavaScript. One important observation, note that the map is not in a [Web Mercator projection](https://en.wikipedia.org/wiki/Web_Mercator_projection), but rather an [Albers projection](https://en.wikipedia.org/wiki/Albers_projection). D3 has a large built in [projection library](https://github.com/d3/d3/blob/master/API.md#projections) that you can reference when mapping data. To see the code behind, view the notebook it has been imported from. `33:T792,md` ### 3. Projections **D3, Projections, and GeoJSON** D3 has some internal functionality that can turn GeoJSON data into screen coordinates based on the projection you set. This is not unlike other libraries such as [Leaflet.js](https://leafletjs.com/), but the result is much more open-ended, not constrained to shapes on a tiled Mercator map.^{[1](http://maptimeboston.github.io/d3-maptime/)} So, yes, D3 supports projections. Jason Davies has a fantastic illustration of various projections in [this example](http://www.jasondavies.com/maps/transition/). D3 has a handful of [projections built-in](https://github.com/d3/d3/blob/master/API.md#projections), but there are tons more supported in an [external plugin](https://github.com/d3/d3-geo-projection/).

Conical Equidistant Projection

In our example, we set properties for our projection by passing them to a projection object ([d3.geoAlbers()](https://github.com/d3/d3-geo/blob/master/README.md#geoAlbers)) and save them as a variable. We can refer to this when we use the D3 object for generating map linework. The properties are **scale**, **rotate**, **center**, and **translate**. - **Scale** sets the scale of the map (ie 1 is the smallest, the larger the numbr the more zoomed in you are, you can fiddle with this until it works). Rotate and center set parameters for the project. A full global map fits nicely around 100. The extent of Boston lands at about 190000 with our extents. - **Rotate** the map sets the longitude of origin for our Albers projection. **Center** sets a single standard parallel at 42.313, about the latitude of Boston. - Lastly, **translate** is a pixel offset, commonly specified to ensure that the center of the projection is in the center of the viewing area. This centers our map on Boston, zooming it into the extent of the city. `34:T402,md` ## Add Data to your Map To add data to the map, follow the process above and repeat it. Let's make a map using a sample rodent incident dataset. ### Rodents! Using 311 Data For a sample dataset, we will use [this dataset](https://gist.github.com/jdev42092/ee94f6d469d7084e8dca4e8533817e0e). This is a JSON dataset of rodent incident locations based on 311 data from the Boston Open Data portal. To add this to our map, it is a two step process. It follows the exact same principles of the previous step, except we do not have to set up our projection information or create the map. ### 1. Load the Data into your Document Load the boston_rodents.json dataset as follows. [**Note that in an HTML document**, you could load it in this way, or you could modify the JSON to include an object assignment before the open brackets (i.e., add \`rodentData =\` directly at the beginning of the JSON file) and then call it as a script in the head of the HTML document. But we don't have to worry about that in Observable.] `35:T70d,md` ## Adding Map Interaction Once you understand how you load data into D3, adding interaction to your map is actually quite easy. Simply put, you use D3 to change the properties of page elements and incorporate event listeners, such as mouseovers and clicks. To illustrate this, let's set up our map of rodent incidents to display some information, like an address, when you interact with the map. For the example, let's set it up to show a property of the data when you hover over an incident. In addition to our map title, we can add an element that will hold some information that can change when we hover over an incident. We will style this with the CSS we added in the last step, adding a line of code or two to a style block below. ### 1. Add Page Elements To start, we need page elements that can be populated to hold a title and some popup information on our map. The concept is that we want to create a page element that we can update the language in according to a data value. You'll find the replicated chart below, after an HTML block which holds both a title in the header and a div object with id 'label'. ### 2. Add Event Listeners and Change Properties of Page Attibutes by adding Classes Next, we can append two \`.on()\` methods to the end of the \`rodents.selectAll("path")\` method. One selects the \`#label\` div on mouseover and assigns it the address of the point, the other removes the text on mouseout. However, we run into the issue that the label moves the map down. For that, we must modify the CSS above. ### 3. Update the Cascading Style Sheets Lastly, update the style sheets to change colors and set fonts and other style elements. Uncomment the style block below the chart. This will position some of the elements on our page, and provide some simple styling. `36:T59d,md` ## Part 2: Using TopoJSON and 'Joining Data' ### Introducing TopoJSON D3 works with two types of geographic JSON, [GeoJSON](http://geojson.org/), and a format called [TopoJSON](https://github.com/mbostock/topojson). ### GeoJSON vs. TopoJSON TopoJSON is an extension of GeoJSON that encodes topology. Rather than representing geometries discretely, geometries in TopoJSON files are stitched together from shared line segments called arcs. This technique is similar to Matt Bloch’s MapShaper and the Arc/Info Export format, .e00. TopoJSON eliminates redundancy, allowing related geometries to be stored efficiently in the same file. For example, the shared boundary between California and Nevada is represented only once, rather than being duplicated for both states. A single TopoJSON file can contain multiple feature collections without duplication, such as states and counties. ([TopoJSON Wiki](https://github.com/topojson/topojson/wiki)) As a result, TopoJSON is substantially more compact than GeoJSON. The above shapefile of U.S. counties is 2.2M as a GeoJSON file, but only 436K as a boundary mesh, a reduction of 80.4% even without simplification.^{[3](https://github.com/topojson/topojson/wiki)} In order to use TopoJSONs, you have to add an extra [TopoJSON library](https://github.com/mbostock/topojson) to your document that contains the necessary components and methods. Import the TopoJSON Library below. `37:T4b9,md` ### 3. Classify by creating a Color function using \`d3.scale\` Next we classify our unemployment data into categories. D3 has a couple of different methods for doing this that are written into the [\`d3-scale\`](https://github.com/d3/d3-scale/blob/master/README.md#api-reference) module. These include continuous, quantize, quantile, ordinal, and threshold methods. We will use the quantize scale, which uniformly breaks up a continuous domain into a set of discrete categories that we give in the range. To use scale in D3, we create an function expression using the [\`d3.scaleQuantize()\`](https://github.com/d3/d3-scale/blob/master/README.md#quantize-scales) method. This takes the domain and range principles learned in the first session, and applies them using color. As a reminder: DOM

The code for our domain and range using the threshold method looks like the following. The scale will then match each value that we define in the range to a [sequential range of purples](https://github.com/d3/d3-scale-chromatic/blob/master/README.md#schemePurples) (which is already coded into D3). `38:[] 30:{"id":"04bbe90c054eb6f0","slug":"week-11-intro-to-d3-js-mapping-data-with-d3","title":"Week 11 - Intro to D3.js: Mapping Data with D3","thumbnail":"5b1f4c24ab02fc899222ca13761b19a48763bc67746e47f425a5abb4766c0b0e","access_level":"public","create_time":"$D2019-04-14T02:03:32.534Z","update_time":"$D2019-04-17T01:01:00.986Z","view_time":null,"first_public_time":"$D2019-04-14T02:03:35.809Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"10cbf6aece7b1ac0","login":"rlluo1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7a6a1a90a41b4c8bff4fdd1fd552869b31666211002b67794fd27ec4b9d55cc0","tier":"starter_2024"},"version":822,"publish_version":822,"role":null,"authored":false,"authors":[{"type":"individual","id":"be1cceaa90e2dfbd","login":"rlluo1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7a6a1a90a41b4c8bff4fdd1fd552869b31666211002b67794fd27ec4b9d55cc0","tier":null}],"members":[{"type":"individual","id":"be1cceaa90e2dfbd","login":"rlluo1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7a6a1a90a41b4c8bff4fdd1fd552869b31666211002b67794fd27ec4b9d55cc0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"338cae64fbcdb2a6","slug":"testing","title":"Class_materials_11.454","owner":{"id":"10cbf6aece7b1ac0","login":"rlluo1","name":""}},"type":"notebook","body":{"titling":"auto","title":"Week 11 - Intro to D3.js: Mapping Data with D3","cells":[{"id":0,"value":"md`# Week 11 - Intro to D3.js: Mapping Data with D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"//import {chart} from \"@mbostock/d3-choropleth\"\nimport {chart as choropleth} from \"@chagel/d3-choropleth\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"choropleth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`\n**So how does this work?**\n\nThe following tutorial will explore, in two parts, how mapping works with D3.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`\n## Part 1: D3 Mapping from the Ground Up\n\nLet's start a bit more simple and revisit our rat example and create a basic map of Boston neighborhoods. This will let us see what is happening under the hood, and we can learn some of the fundamentals and build from them to create better maps and spatial visualizations. To start, we'll visualize a map of Boston.\n\n### 1. Load the Geographic Dataset\n\nLoad the GeoJSON file of Boston neighborhoods into our document. You can find that data [here](https://gist.github.com/jdev42092/5c285c4a3608eb9f9864f5da27db4e49). \n\nTake a look at the raw GeoJSON file. [GeoJSON](http://geojson.org/) is a format that encodes geometric features, as \\`Point\\`, \\`LineString\\`, \\`Polygon\\`, \\`MultiPoint\\`, \\`MultiLineString\\`, or \\`MultiPolygon\\`, using the coordinates of each of point that feature. Read it in as an object called \\`bosNeighborhoods\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"bosNeighborhoods = d3.json('https://gist.githubusercontent.com/jdev42092/5c285c4a3608eb9f9864f5da27db4e49/raw/a1c33b1432ca2948f14f656cc14c7c7335f78d95/boston_neighborhoods.json')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`\n### 2. Create an SVG Canvas for the map\n\nAs we learned in the last class, set up a SVG object with a width, height, and an empty placeholder \"g\" element that will be used to hold all of the information about the geometry.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"width = 700;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"height = 580;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"{\n// Create SVG\nlet svg = d3.select( \"body\" )\n .append( \"svg\" )\n .attr( \"width\", width )\n .attr( \"height\", height );\n\n// Append empty placeholder g element to the SVG\n// g will contain geometry elements\nlet g = svg.append( \"g\" );\n \nreturn svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"bosProjection = d3.geoAlbers()\n .scale( 190000 )\n .rotate( [71.057,0] )\n .center( [0, 42.313] )\n .translate( [width/2,height/2] );","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"md`\n### 4. Set up the Path Generator\nPath Generators - Geo Paths\nNext in our code, we create something called a Path Generator, or Geo Path. The primary mechanism for displaying data in D3 is [d3.geoPath](https://github.com/d3/d3-geo/blob/master/README.md#geoPath). This class is similar to [d3.line](https://github.com/d3/d3-shape/blob/master/README.md#line) and the other SVG shape generators: given a geometry or feature object, it generates the path data string suitable for the \"d\" attribute of an SVG path element.\n\nBasically, the Geo Path generator is a function. One of the methods it takes is the projection you define. It reads lat/lon coordinates from a GeoJSON feature, algorithmically turns them into screen coordinates according to your specification in the projection method, and returns an SVG path string. This can then be drawn on your screen. We set the parameters in our code already, so this code is simple.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"// Create GeoPath function that uses built-in D3 functionality to turn\n// lat/lon coordinates into screen coordinates\nbos_geoPath = d3.geoPath()\n .projection( bosProjection );","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"md`## In Class Example\nModify the projection code and use the [geoEquirectangular()](https://github.com/d3/d3-geo/blob/master/README.md#geoEquirectangular) projection for the *bos_geoPath* function\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"// your code here\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`\n### 5. Bind the Data to the SVG Canvas\n\n**Classic D3 Binding - Use GeoPath**\n\nThe rest is just back to regular D3, use a selector for the elements, load the data from the JSON, bind it to the SVG using enter and append, the apply styling. The one part that might be confusing is the setting of the d attribute. This is the attribute that defines the coordinates of a path. We pass a function to it that draws the path according to the coordinates defined by the function, and the coordinates are provided by our GeoJSON.\n\nUsing a GeoJSON of Boston Neighborhoods, The result is the following map. Set up your map with only one layer, then the rest comes easy.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"{\n// Create SVG\nlet svg = d3.select(DOM.svg(width, height));\n\n// Append empty placeholder g element to the SVG\n// g will contain geometry elements\nlet g = svg.append(\"g\");\n \n// Classic D3... Select non-existent elements, bind the data, append the elements, and apply attributes\ng.selectAll( \"path\" )\n .data( bosNeighborhoods.features )\n .enter()\n .append( \"path\" )\n .attr( \"fill\", \"#ccc\" )\n .attr( \"stroke\", \"#333\")\n .attr( \"d\", bos_geoPath );\n \nreturn svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"rodentData = d3.json('https://gist.githubusercontent.com/jdev42092/ee94f6d469d7084e8dca4e8533817e0e/raw/7cfd6c34c974d3a86ff19c6180cfa22ee9ce3946/boston_rodents.json')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"md`\n### 2. Add the Data \n\nUsing the same method as before, add the dataset. First, create an empty placeholder \"g\" element, then bind data, append a \"path\" element to the \"g\" element, and apply attributes. You'll see this done in the script below, beneath where we load the neighborhoods.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"{\n// Create SVG\nlet svg = d3.select(DOM.svg(width, height));\n\n// Append empty placeholder g element to the SVG\n// g will contain geometry elements\nlet g = svg.append( \"g\" );\nlet rodents = svg.append( \"g\" );\n \n// Classic D3... Select non-existent elements, bind the data, append the elements, and apply attributes\ng.selectAll( \"path\" )\n .data( bosNeighborhoods.features )\n .enter()\n .append( \"path\" )\n .attr( \"fill\", \"#ccc\" )\n .attr( \"stroke\", \"#333\")\n .attr( \"d\", bos_geoPath );\n \nrodents.selectAll( \"path\" )\n .data( rodentData.features )\n .enter()\n .append( \"path\" )\n .attr( \"fill\", \"#900\" )\n .attr( \"stroke\", \"#999\" )\n .attr( \"d\", bos_geoPath );\n \nreturn svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`\nIf we want to change something about the points, such as changing the fill color or opacity, modify the stroke, or expand the radius of points, we can either do that through attribute methods or through assigning the d3 object a class and styling that class in CSS. \n\nThe CSS code below changes the color of anything with class 'incident' above to 'steelblue', remove the stroke, and change the opacity to 50%. Change the class of the rodents element above to incident to see whether the the fill remains red or changes to steelblue.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"md`## In Class Example\nModify the code for drawing the maps and the rodent incidents. This time draw the rodents before drawing the bosNeighborhoods. What is happening now?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"// your code here\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"// html`\n// \n// `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"html`\n

Rodent Incidents in Boston

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"{ \n// Create SVG\nlet svg = d3.select(DOM.svg(width, height));\n\n// Append empty placeholder g element to the SVG\n// g will contain geometry elements\nlet g = svg.append( \"g\" );\nlet rodents = svg.append( \"g\" );\n\n// Classic D3... Select non-existent elements, bind the data, append the elements, and apply attributes\ng.selectAll( \"path\" )\n .data( bosNeighborhoods.features )\n .enter()\n .append( \"path\" )\n .attr( \"fill\", \"#ccc\" )\n .attr( \"stroke\", \"#333\")\n .attr( \"d\", bos_geoPath );\n \nrodents.selectAll( \"path\" )\n .data( rodentData.features )\n .enter()\n .append( \"path\" )\n .attr( \"fill\", \"steelblue\" )\n .attr( \"stroke\", \"none\" )\n .attr( \"opacity\", 0.5)\n .attr( \"d\", bos_geoPath )\n .attr(\"class\", \"incident\")\n .on(\"mouseover\", d => d3.select(\"#label\").text(d.properties.LOCATION_STREET_NAME))\n .on(\"mouseout\", d => d3.select(\"#label\").text(\"Empty Selection\"));\n \nreturn svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"md`## In Class Example\nModify the code, and change the color of the dots on *\"mouseover\"*, and change text displayed to be the *Location* on *\"click\"*.\n\n**Hint: to change the color of the dots you can use these functions:**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"{\n // Create Event Handlers for mouse\n function handleMouseOver(d, i) { // Add interactivity\n // Use D3 to select element, change color and size\n d3.select(this)\n .attr(\"fill\", \"orange\");\n }\n\n function handleMouseOut(d, i) {\n // Use D3 to select element, change color back to normal\n d3.select(this).attr({\n fill: \"steelblue\"\n });\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"// your code here\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"md`**Structure of a TopoJSON**\n\n

\n\n**Sample TopoJSON Code**\n\nFor example TopoJSON code, check out the following TopoJSON documentation.\n\n[TopoJSON Specification Documentation](https://github.com/mbostock/topojson-specification/blob/master/README.md#11-examples)\n\n## Make a Choropleth Map of U.S. Counties\n\nThe following will detail, from the ground up, using TopoJSON and building a choropleth map with 'joined data' from the bottom up.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"md`\n### 1. Load in data\n\nWe will be loading in this TopoJSON, which is available from [@mbostock/d3-choropleth](https://beta.observablehq.com/@mbostock/d3-choropleth). It comes from a [pre-projected file created from the Census Bureau](https://github.com/topojson/us-atlas#us/10m.json), and therefore does not need to have a projection specified.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"us = d3.json(\"https://unpkg.com/us-atlas@1/us/10m.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"md`\n### 2. Set up path generator and dimensions\nUse D3 to set up your map elements. We did this above, so you have an understanding for what is happening now. Note that in this example, we do not need to define a projection (as the TopoJSON has already been optimized for D3). However, it is designed to fit a 960x600 object, so we will specify those in the code below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"path = d3.geoPath();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"md`\n### 3. Bind data and set up the map\n\nIn this function, we pass our data (the TopoJSON) as an argument, then create SVG elements using a classic D3 append. Selecting all paths, the TopoJSON is bound in the data method. From here, we can perform work on each element. In this circumstance, we apply a fill and stroke.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"{\nlet width = 960;\nlet height = 600;\n \n// Create SVG\nlet svg = d3.select(DOM.svg(width, height));\n\nlet g = svg.append(\"g\");\n \n// Bind TopoJSON data\ng.selectAll(\"path\")\n .data(topojson.feature(us, us.objects.counties).features) // Bind TopoJSON data elements\n .enter().append(\"path\")\n .attr(\"d\", path)\n .style(\"fill\", \"white\")\n .style(\"stroke\", \"black\");\n\nreturn svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"md`## In Class Example\nModify the code, and change the type of feature used to draw the map. Instead of drawing *counties*, draw *states*.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"// your code here\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"md`\n## Joining Data: Create a Choropleth\n\nContinuing with this example, let's join a TSV of unemployment data to our counties. Joining in D3 is a bit different than traditional GIS, but will have some similarities. \n\n### 1. Import TSV Data File\nFirst, we must import our TSV data on unemployment so it loads into our visualization. That data is available [here](https://gist.github.com/jdev42092/9a314291805640a097e16e58248627eb). \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"unemployment = d3.tsv(\"https://gist.githubusercontent.com/jdev42092/9a314291805640a097e16e58248627eb/raw/365c199c5a173a0018608615b6823b5cdcaa6bae/unemployment.tsv\", ({id, rate}) => ({county: id, rate : +rate}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"md`\n### 2. Create Single Object for the Tabular Dataset\n\nYou'll notice that the data is read-in as an array of objects. Instead, We need to create a single object for our tabular dataset; then, in this object, create properties for each county ID. We want to give the value of each property the corresponding rate. Using [\\`forEach\\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) in our array, we create our object. The code looks like the following.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"unemp_data = {\n// Create empty object for holding dataset\nconst rateById = {};\n \n// Create property for each ID, give it value from rate\nunemployment.forEach(d => (rateById[d.county] = +d.rate));\n\nreturn rateById;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"md`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"color = d3.scaleQuantize()\n .domain([1, 10])\n .range(d3.schemePurples[9]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"md`### 4. Use the Color Function to set the Fill Value for each Polygon\n\nAdjust the fill property of the append statement to use the color function. The color function takes the value found in the \\`rateById\\` object for the property that matches the ID value of the counties dataset (\\`d.id\\`). To illustrate this, you can throw in a \\`console.log\\` on d, or \\`d.id\\`. The return value is a number that is then run through our threshold scale, return a hex code for color based on what value is received. \n\nFor some tips on what colors to use, check out the [DUSPviz Color Resource page](http://duspviz.mit.edu/resources/#design).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"{\nlet width = 960;\nlet height = 600;\n \n// Create SVG\nlet svg = d3.select(DOM.svg(width, height));\n\nlet g = svg.append(\"g\");\n \n// Create empty object for holding dataset\nconst rateById = {};\n \n// Create property for each ID, give it value from rate\nunemployment.forEach(d => (rateById[d.county] = +d.rate));\n \n// Bind TopoJSON data\ng.selectAll(\"path\")\n .data(topojson.feature(us, us.objects.counties).features) // Bind TopoJSON data elements\n .enter().append(\"path\")\n .attr(\"d\", path)\n .style(\"fill\", d => color(rateById[d.id])) // get rate value for property matching data ID\n\t\t// pass rate value to color function, return color based on domain and range\n .style(\"stroke\", \"black\");\n\nreturn svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"md`\n### 5. Remove that County Stroke and Add State Outlines\nPolish our map a bit by removing the thick black stroke on each county. Simply remove the stroke property of our append.\n\nNext, use append one more time simply to create state outlines. Here, we want to use the topojson.mesh method to simplify our strokes. This method iterates through each line of geometry that is shared by multiple features. The filter function as the third argument is called for each geometry and takes two arguments representing the two geometry objects that share the arc. Each arc is only included in the mesh if the return to this function is true. An arc used by the same geometry are identical.\n\nOnly geometries with different ids will be returned and formatted with a white stroke and no fill.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"{\nlet width = 960;\nlet height = 600;\n \n// Create SVG\nlet svg = d3.select(DOM.svg(width, height));\n\nlet g = svg.append(\"g\");\n \n// Create empty object for holding dataset\nconst rateById = {};\n \n// Create property for each ID, give it value from rate\nunemployment.forEach(d => (rateById[d.county] = +d.rate));\n \n// Bind TopoJSON data\ng.selectAll(\"path\")\n .data(topojson.feature(us, us.objects.counties).features) // Bind TopoJSON data elements\n .enter().append(\"path\")\n .attr(\"d\", path)\n .style(\"fill\", d => color(rateById[d.id]));\n\ng.append(\"path\")\n\t.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"white\")\n\t.attr(\"d\", path);\n\nreturn svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"md`\nCongrats! You just created a choropleth map of unemployment in the United States. This should give you a better understanding of TopoJSON, the differences with GeoJSON, and how you join and map datasets using D3.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"html`\n