43:["$","title",null,{"children":"Intro to D3 part 2: putting D3 on the map | Dan Swick | Observable"}] 4b:Taae,md`## D3 AND GEOJSON In short, D3 has some internal magic that can turn GeoJSON data into screen coordinates. This is not unlike other libraries such as Leaflet, but the result is much more open-ended, not constrained to shapes on a tiled Mercator map. ## TIME TO GET MAPPIN Let's walk through that SF map. First, include the neighborhoods GeoJSON data. We've assigned it to a variable named sfHousingData in another cell. The first bit of JS code should look straightforward now: \`\`\`js var width = 700, height = 580; var svg = d3.select('body') .append('svg') .attr('width', width) .attr('height', height); var neighborhoods = svg.append('g'); \`\`\` \`\`\`js var mercatorProjection = d3.geoMercator() .center([-122.43598, 37.76091]) .scale(170000) .translate([width / 1.95, height / 1.65]); \`\`\` Whoa, does that say _projection_?? (Yes. Yes it does.) If you hear a cartographer get excited about D3, this is why. We're just using boring old Mercator here because sometimes you just gotta stick with what you know. And also we already have the centerpoint from the last class 😛 D3 supports the [map projections you've always dreamed of](http://www.jasondavies.com/maps/transition/). ### BACK TO THE CODE \`\`\` var mercatorProjection = d3.geoMercator() \`\`\` Above is what a basic projection looks like. It creates a function into which you can plug longitude and latitude values and get projected coordinates back. For example, having created the \`projection\` variable, the following call would return some coordinates that your browser can understand: \`\`\`js mercatorProjection([-122.43598, 37.76091]); // longitude and latitude of SF-ish. Yeah, we're ignoring the Farallon islands. Deal with it, SF geographers. \`\`\` D3 has a [handful of projections built in](https://github.com/d3/d3-geo#projections), but there are tons more supported [in an external plugin](https://github.com/d3/d3-geo-projection/). What about the other methods in the project method chain? Let's look closer... \`\`\`js var mercatorProjection = d3.geoMercator() .center([-122.43598, 37.76091]) .scale(170000) .translate([width / 1.95, height / 1.65]); \`\`\` - **scale**: honestly, just fiddle with this until it works - **rotate** and **center**: depending on the projection, you may need to use both of these to center the projection on your area of interest. (we're using Mercator here to avoid dealing with **rotate**) - **translate**: a pixel offset, commonly specified to ensure that the center of the projection is in the center of the viewing area `4c:T7f4,md`## GEO PATHS Having said a minute ago that you can plug longitude/latitude pairs into a projection, it's rare that you will actually explicitly do this. Instead, it tends to happen behind the scenes with [path generators](https://github.com/d3/d3-geo/blob/master/README.md#paths). \`\`\`js var geoPath = d3.geoPath() .projection(mercatorProjection); \`\`\` Once again we are creating a function here. A geo path is a function that takes a GeoJSON feature and returns [SVG path](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) data, based on the specified projection. Put differently in a kind of pseudo-code, we're doing this: \`\`\`js var geoPath = function(feature){ // grab lat/lon coordinates from geojson feature // do some crazy magic to turn them into screen coordinates // return SVG path string } \`\`\` _In a moment, it will help to remember that a geo path is a function._ \`\`\`js neighborhoods.selectAll('path') .data(sfHousingData.features) .enter() .append('path') .attr('fill', '#ccc') .attr('d', geoPath); \`\`\` Most of this should look familiar by now. Select a bunch of non-existent things, bind data, append new elements, and apply some attributes. Our elements here are SVG paths, which are basically free-form shapes. 👀 \`.attr('d', geoPath)\` 👀 _what the heck is this tho_ First, in SVG Land, \`d\` is an attribute that defines the coordinates of a path. It's a crazy combination of letters and numbers. Second, this is where it helps to remember that a D3 path is actually a function. The code above is equivalent to a more familiar syntax: \`\`\`js .attr('d', function(d){ // do magic and return SVG path string }); \`\`\` ### LATHER, RINSE, REPEAT Again, if you don't really get it, don't worry! You can copy the basic template in this notebook and re-use it for whatever you're mapping. The only thing you need to do is supply your own GeoJSON and tweak the projection to fit your geography. The more you play around, the more you'll understand. `4d:T425,firstChoropleth = { var width = 700, height = 580; var svg = d3.select('body') .append('svg') .attr('width', width) .attr('height', height); var g = svg.append('g'); // Get the max housing count to define the top of our color range var max_houses = d3.max(sfHousingData.features, d => { return d.properties.COUNT }); // Create a function that returns a color value given some input var color = d3.scaleLinear().domain([0, max_houses]).range(['beige', 'red']); // Our old pal Mercator var mercatorProjection = d3.geoMercator() .center([-122.43598, 37.76091]) .scale(170000) .translate([width / 1.95, height / 1.65]); var geoPath = d3.geoPath() .projection(mercatorProjection); g.selectAll('path') .data(sfHousingData.features) .enter() .append('path') .attr('fill', d => { // Here's where the choropleth magic gets applied to our SVG elements. return color(d.properties.COUNT); }) .attr('d', geoPath); return html`${svg.node()}`; }4e:Tb5f,md`![sportgif](https://media2.giphy.com/media/nbb46ZoB74xXQpHF6P/giphy.gif?cid=790b76115cd3386c5772614b2ea75f32&rid=giphy.gif) _What the heck!_ ## How to add some color to your choropleth Compared to our basic SF map way up above, this should all look pretty familiar. If you look closely, though, there are a couple of new bits that handle the logic of colorizing our map: \`\`\`js // Get the max housing count to define the top of our color range var max_houses = d3.max(sfHousingData.features, d => { return d.properties.COUNT }); \`\`\` Here, we use D3's convenient \`max()\` method to loop through all of the features in our housing data and find the biggest \`COUNT\` property. We'll hang on to this value for later 🛍 so we can use it to define the topmost limit of our color range. \`\`\`js // Create a function that returns a color value given some input var color = d3.scaleLinear().domain([0, max_houses]).range(['beige', 'red']); \`\`\` Here, we're using another handy D3 method called \`scaleLinear()\`. Remember up above when we emphasized the fact that \`d3.geoPath()\` returns a _function_ we could use later? This is the same thing! \`d3.scaleLinear()\` returns a function that we're keeping handy as a variable called \`color\`. * **domain**: the domain defines the totality of input values that your scale function will expect as an input. Here, we're starting at zero and going all the way up to the largest value in our dataset. * **range**: this is the range of _output_ values, represented as color values in this case. **NOTE**: D3 supports [lots of different scales](https://github.com/d3/d3-scale) you can use out of the box. You can also [combine other statistical tools](http://bl.ocks.org/tmcw/4969184) with D3's \`scale\` functionality to exert your artistic vision with utmost control. We won't cover any other scales today, but I encourage you to poke around on your own. You can get **crazy** with scales! Here's a visualization of how domains and ranges are related: ![From http://www.jeromecukier.net/2011/08/11/d3-scales-and-color/](http://www.jeromecukier.net/wp-content/uploads/2011/08/d3scale1.png) \`\`\`js g.selectAll('path') .data(sfHousingData.features) .enter() .append('path') .attr('fill', d => { // Here's where the choropleth magic gets applied to our SVG elements. return color(d.properties.COUNT); }) .attr('d', geoPath); \`\`\` One last bit of tweakery brings us home. Here, in the first call to \`attr()\`, we iterate over each feature in the \`sfHousingData\` (represented as \`d\`) and run each feature's \`COUNT\` property through the fancy \`color()\` function we created earlier (getting tired of hearing about how this thing's a function yet?). Because \`color()\` helpfully returns a color value, we can use it directly in this \`attr('fill', ...)\` call. NEAT! Let's talk about one more thing: interaction. `4f:T7ab,interactiveChoropleth = { var width = 1000, height = 740; var svg = d3.select('body') .append('svg') .attr('width', width) .attr('height', height); var g = svg.append('g'); var textBox = svg.append('div').attr('id', 'info-box').attr('x', 10).attr('y', 20).html('HELLO'); // Define the div for the tooltip // The rest of the tooltip's styles are defined in another cell var tooltip = d3.select("body").append("div") .attr("id", "choroplethTooltip"); // Get the max housing count to define the top of our color range var max_houses = d3.max(sfHousingData.features, d => { return d.properties.COUNT }); // Create a function that returns a color value given some input var color = d3.scaleLinear().domain([0, max_houses]).range(['beige', 'red']); // Our old pal Mercator var mercatorProjection = d3.geoMercator() .center([-122.43598, 37.76091]) .scale(270000) .translate([width / 1.95, height / 1.65]); var geoPath = d3.geoPath() .projection(mercatorProjection); g.selectAll('path') .data(sfHousingData.features) .enter() .append('path') .attr('fill', d => { // Here's where the choropleth magic gets applied to our SVG elements. return color(d.properties.COUNT); }) .attr('stroke', '#fff') .attr('stroke-width', 1) .attr('d', geoPath) .on("mouseover", function(d) { tooltip.transition() .duration(200) .style("opacity", 1); tooltip.html(`${d.properties.COUNT} units were built in ${d.properties.nhood}.`) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); d3.select(this).style('stroke-width', 3); }) .on("mouseout", function(d) { tooltip.transition() .duration(500) .style("opacity", 0); d3.select(this).style('stroke-width', 1); }); return html`${svg.node()}`; }50:T5c8,md` ## Sick Interactive Choro! Let's recap: \`\`\`js var tooltip = d3.select("body").append("div") .attr("id", "choroplethTooltip"); \`\`\` Create a tooltip element and add it to the body of the page. Give it a unique ID so you can easily select it and apply styles. \`\`\`js .on("mouseover", function(d) { tooltip.transition() .duration(200) .style("opacity", 1); tooltip.html(\`\${d.properties.COUNT} units were built in \${d.properties.nhood}.\`) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); d3.select(this).style('stroke-width', 3); }) \`\`\` Add a "mouseover" **event listener** (remember this vocab word from last time?) to the elements in our selection. When a mouseover event occurs, add text to the popup and make it visible by increasing its opacity. Also increase the \`stroke\` width of the active neighborhood to give the viewer a visual cue that something is happening. We're also using D3's \`transition()\` method to fade the tooltip in. You can do [lots of fancy things](https://github.com/d3/d3-transition) with transitions, but we're not going to go into it any further today. \`\`\`js .on("mouseout", function(d) { tooltip.transition() .duration(500) .style("opacity", 0); d3.select(this).style('stroke-width', 1); }); \`\`\` When a "mouseout" event occurs, restore things to the way they were before. `51:[] 47:{"id":"15358359237db3ea","slug":"intro-to-d3-part-2-putting-d3-on-the-map","title":"Intro to D3 part 2: putting D3 on the map","thumbnail":"378833c9c3e4e9709cad8a0fde0e9d792f7575c9d3f222b3263bfed07cff6cc9","access_level":"public","create_time":"$D2019-05-08T18:08:33.687Z","update_time":"$D2019-10-10T00:19:26.962Z","view_time":null,"first_public_time":"$D2019-05-08T18:08:37.755Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"21a6859df74ef0b0","login":"danswick","name":"Dan Swick","avatar_url":"https://avatars-next.observableusercontent.com/a55db82953a5b821daa61e47633dabc1c2b386477ad0e07eb1c6447faa6612ca","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":185,"publish_version":185,"role":null,"authored":false,"authors":[{"type":"individual","id":"858367eabf0f2b9a","login":"danswick","name":"Dan Swick","avatar_url":"https://avatars-next.observableusercontent.com/a55db82953a5b821daa61e47633dabc1c2b386477ad0e07eb1c6447faa6612ca","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"858367eabf0f2b9a","login":"danswick","name":"Dan Swick","avatar_url":"https://avatars-next.observableusercontent.com/a55db82953a5b821daa61e47633dabc1c2b386477ad0e07eb1c6447faa6612ca","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Intro to D3 part 2: putting D3 on the map","cells":[{"id":0,"value":"md`# Intro to D3 part 2: putting D3 on the map\n\nWelcome back! We just wrapped up [Part 1](https://observablehq.com/@danswick/intro-to-d3-a-man-walks-into-a-barchart), where we made a pretty sick bar chart. This time around, we're gonna get geographical, so buckle up.\n\n![LET'S MOO THIS](https://media1.giphy.com/media/IwlWGxG6dFTP2/giphy.gif?cid=790b76115cd31b7a554b413077817772&rid=giphy.gif)\n\nEditor's note: this notebook continues to borrow _very heavily_ from Maptime Boston's great [D3 workshop](https://maptimeboston.github.io/d3-maptime/). It is tweaked a bit for Observable, D3@5, and humor.\n\n### DO NOT BE AFRAID\n\nMaybe 'D3 is not a graphical representaion' is making sense by now. We had to get pretty specific in setting visual attributes just to make a stupid bar chart. And a map is way more complicated than that, right?\n\n### D3 IS GOOD AT MAPS\nDon't sweat; it's easier than you might think! Drawing a basic map doesn't take any more code than drawing those four bars.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`# A VERY COOL MAP\n\nHere's a basic map of SF neighborhoods and the code required to make it:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"sfHousingData = {\n // Fetch our data using D3's json() method and store it for later use \n return d3.json('https://raw.githubusercontent.com/danswick/web-map-quickstart/gh-pages/spring2019/class3/sample_code/code%20on%20your%20own/sf_housing.json');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"firstMap = {\n var width = 700,\n height = 580;\n\nvar svg = d3.select('body')\n .append('svg')\n .attr('width', width)\n .attr('height', height);\n\nvar g = svg.append('g');\n\nvar mercatorProjection = d3.geoMercator()\n .center([-122.43598, 37.76091])\n .scale(170000)\n .translate([width / 1.95, height / 1.65]);\n\nvar geoPath = d3.geoPath()\n .projection(mercatorProjection);\n\ng.selectAll('path')\n .data(sfHousingData.features)\n .enter()\n .append('path')\n .attr('fill', '#ccc')\n .attr('d', geoPath);\n \n return html`${svg.node()}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"md`## HOW BOUT A CHOROPLETH THO\n\nYeah! We can do that! \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"md`## Nice work!\n\nThat's it for today. I hope you keep learning, testing out new ideas, and reading other folks' D3 code for inspiration. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"md`\n### Dependencies\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require('d3@5');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"1"}} 42:null