31 | D3 is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation. 32 |33 | 34 | In short, this means that you can take data and represent it within a web browser in [all sorts of fun and effective ways](https://github.com/mbostock/d3/wiki/Gallery). 35 | 36 | D3 is good for web cartographers because, well ... [once we loved Flash](http://freedom.indiemaps.com/). But then we couldn't as much anymore. We needed to learn JavaScript and embrace open web standards as our way forward for making maps on the web. D3 offers us the promise of complete control over the design and interaction of our maps, from dynamically updating data in thematic maps to achieving subtle nuance within its visual hierarchy. And ... cartographers love to use [different map projections](http://axismaps.github.io/thematic-cartography/articles/projections.html). D3 is [really good at map projections](https://github.com/mbostock/d3/wiki/Geo-Projections). 37 | 38 | D3 is open source, meaning you can [see, copy, and modify the raw code](https://github.com/mbostock/d3/blob/master/D3) to your liking. You can even help make the code better and issue a [pull request](https://github.com/mbostock/d3/pulls) for your code to be incorporated into the build. Collaboratively, we're now participating in a thriving community of web mappers and developers who are quickly changing how we build and use geospatial information. 39 | 40 | ##How do we learn to use D3? 41 | 42 | **Warning:** It's probably a good idea to spend some time [learning JavaScript](http://eloquentjavascript.net/) – as well as other [modern web technologies](https://developer.mozilla.org/en-US/docs/Web) – before tackling D3. D3 may not be the best point-of-entry for a newbie web programmer. Playing with a selection library such as [JQuery](https://jquery.com/) wouldn't hurt either. 43 | 44 | That being said, there is a growing body of excellent tutorials and talks aimed at getting newbies to D3 over the initially steep learning curve. Among these I recommend: 45 | 46 | * [Mapping with D3: A Friendly Introduction](http://maptimeboston.github.io/d3-maptime) (presentation by [@awoodruff](https://twitter.com/awoodruff)) 47 | * [A fun, difficult introduction to d3](http://www.macwright.org/presentations/dcjq/) (presentation by [@tmcw](https://twitter.com/tmcw)) 48 | * [Interactive Data Visualization for the Web](http://alignedleft.com/work/d3-book) (book by Scott Murray) 49 | * [Interactive and Multivariate Choropleth Maps with D3](http://www.cartographicperspectives.org/index.php/journal/article/view/cp78-sack-et-al/) (an article pushlished in *Cartographic Perspectives*, written by [@northlandiguana](https://twitter.com/northlandiguana) and a couple other fellas) 50 | 51 | It's also helpful to look at examples: 52 | 53 | * [http://bl.ocks.org/mbostock](http://bl.ocks.org/mbostock) (Mike Bostock's examples) 54 | * [bl.ocksplorer.org](http://bl.ocksplorer.org/) (A web tool to help you search for more examples) 55 | * [@mapsam](https://twitter.com/vancematthews) also has good examples in his [D3.geo Cookbook](https://github.com/mapsam/d3-geo) 56 | 57 | You may also wish to consider [learning all the fundamentals skills and concepts needed to build awesome web maps](http://newmapsplus.uky.edu/) within two new online mapping Graduate Certificate and Masters degree programs I'm helping to build. [Shoot me a message](https://twitter.com/rgdonohue) if you want to know more? 58 | 59 | Let's get started already! 60 | 61 | ##1. A very simple D3 map 62 | 63 | * View the code and data for this map: [d3-map01-starter](https://github.com/maptimelex/d3-mapping/tree/master/d3-map01-starter) 64 | * See a working example here: A very simple D3 map 65 | 66 | This is a very basic map, really just a basemap consisting of county polygons. But also it is projected, in this case using an Albers Equal Area projection, which is highly suitable for making choropleth maps. Let's run through what this code is doing to produce the map? 67 | 68 | First, at the top of the web document we're loading two external resources. The first is the magical d3 JavaScript code, which here in minified and served from a content delivery network (CDN). The second is an external JavaScript file named _ky-counties.js_, being hosted locally (i.e., in the same directory as our _index.html_ file). 69 | 70 | ```html 71 | 72 | 73 | ``` 74 | 75 | When we peer inside that _ky-counties.js_ file, we'd see it's really information encoded as [GeoJSON](http://geojson.org/) (our county geometries, stored as a GeoJSON FeatureCollection) that's been assigned to a variable named
counties. Also note that the GeoJSON properties include nominal data values such as NAME (the name of each county) and numerical data such a ALAND (the area of each county, which will be useful later for normalizing data for a choropleth map):
76 |
77 | ```javascript
78 | var counties = {
79 | "type": "FeatureCollection",
80 | "features": [
81 | { "type": "Feature", "properties": { "COUNTYFP": "007", "NAME": "Ballard", "ALAND": 638843907 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -89.1719, 37.0682 ], [ -89.03, 37.2111 ], [ -88.9334, 37.2252 ], [ -88.816, 36.9541 ], [ -88.9888, 36.9195 ], [ -89.1008, 36.944 ], [ -89.1327, 36.9822 ], [ -89.1719, 37.0682 ] ] ] ] } },
82 | { "type": "Feature", "properties": { "COUNTYFP": "011", "NAME": "Bath", "ALAND": 722081626 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -83.9779, 38.1921 ], [ -83.8484, 38.2969 ], [ -83.7323, 38.2835 ], [ -83.6352, 38.1875 ], [ -83.5072, 38.0863 ], [ -83.4988, 38.0506 ], [ -83.5774, 38.0132 ], [ -83.6593, 38.0283 ], [ -83.7594, 37.9987 ], [ -83.8814, 38.1365 ], [ -83.9779, 38.1921 ] ] ] ] } }, ....
83 |
84 | ```
85 |
86 | These two files load before the rest of the JavaScript at the bottom of the page executes. Before we turn to that code, we'll note that there is a CSS rule assigning stroke and fill properties to a class named .county
87 |
88 | ```css
89 | .county {
90 | stroke: #fff;
91 | fill:#005DAA;
92 | }
93 |
94 | ```
95 |
96 | Turning now to the JavaScript code at the bottom of the page, we've first declared a couple variables for width and height, using the width and height of the browser window. We could have just as well hard code these as values such as 960px wide and 640px tall (it really depends on the layout you're going for within your window).
97 |
98 | ```javascript
99 | var width = window.innerWidth,
100 | height = window.innerHeight;
101 | ```
102 |
103 | What follows are four very compact JavaScript statements that draw an SVG map to our browser window using the GeoJSON information. Comments are provided here for clarification.
104 |
105 | Using method chaining to call a series of D3 methods, these four statements:
106 |
107 | 1) create a new SVG element and append it to the document's body
108 |
109 |
110 | ```javascript
111 | var svg = d3.select( "body" ) // select the document's body
112 | .append( "svg" ) // create and append a new svg element to it
113 | .attr( "width", width ); // give the svg width
114 | .attr( "height", height ); // give the svg height
115 | ```
116 |
117 | 2) construct a new projection using the Conic Albers Equal Area projection, centered on Kentucky and scaled somewhat arbitrarily to fit with the window
118 |
119 | ```javascript
120 | var projection = d3.geo.albers() // create a new d3 projection function, albers equal area
121 | .center([0, 37.8]) // center the project within Kentucky's mid-latitude
122 | .rotate([85.8,0]) // rotate the globe to center with Kentucky's mid-longitude
123 | .scale(8000) // play with the scale until it's 'zoomed' about right
124 | .translate([width / 2, height / 2]); // center the svg (0,0 is top, left)
125 | ```
126 |
127 | 3) construct a "path generator" using the projection information, to be used to draw SVG paths from the GeoJSON information
128 |
129 | ```javascript
130 | var geoPath = d3.geo.path() // create a new geo path generator
131 | .projection(projection); // assign the project we just created to it
132 | ```
133 |
134 | 4) create and append a new SVG 'g' element (an SVG container element used for grouping other objects)
135 |
136 | ```javascript
137 | svg.append('g') // create and append a new SVG 'g' element to the svg
138 | .selectAll('path') // selectAll the path features that haven't been created yet
139 | .data(counties.features) // bind the GeoJSON features data to them
140 | .enter() // prepare to
141 | .append('path') // append the newly create path elements to the 'g'
142 | .attr( "d", geoPath ) // define the screen coordinates of the new path(s)
143 | .attr('class','county'); // give each a class name of 'county'
144 | ```
145 |
146 | Wow, okay. There's a lot to understand there, and it's alright if you're a little confused by what's going on with all those chained method calls. People say learning D3 is difficult, and part of the reason is that it's written very concisely.
147 |
148 | Many of us begin making maps by looking at examples, copying the code, and hacking around with it a bit until it fits our use-case. These basic code examples, however, are pretty standard across D3 maps. So keep playing with them and it'll come around to make more sense.
149 |
150 | Let's push onward for now?
151 |
152 | ##2. A D3 map with basic interaction
153 |
154 | * View the code and data for this map: [d3-map02-interaction](https://github.com/maptimelex/d3-mapping/tree/master/d3-map02-interaction)
155 | * See a working example here: A D3 map with basic interaction
156 |
157 | Simply drawing a static map isn't super exciting. Much of the awesomeness of web mapping comes from giving the user the power to interact with the map, such as deriving specific information when mousing over or touching map elements. While this maptime lesson won't dive too deep into interaction, let's run through another simple example
158 |
159 | Let's say we wish to accomplish two things. We want the user to be able to retrieve the name of a specific county when hovering, and we want the map to provide a visual affordance of which county is being selected.
160 |
161 | This map is nearly identical to the previous one. We've added another CSS rule, .hover which will color the unit yellow when applied:
162 |
163 | ```css
164 | .county {
165 | stroke: #fff;
166 | fill:#005DAA;
167 | }
168 | .hover {
169 | fill: yellow;
170 | }
171 | ```
172 |
173 | Within the JavaScript, we've appended two new methods to our selected group of SVG paths, an [_.on()_ method](https://github.com/mbostock/d3/wiki/Selections#on) which adds a listener to the objects. In this case, we're listening for a 'mouseover' and and 'mouseout' event.
174 |
175 | ```javascript
176 | svg.append('g')
177 | .selectAll('path')
178 | .data(counties.features)
179 | .enter()
180 | .append('path')
181 | .attr( "d", geoPath )
182 | .attr('class','county')
183 | .on('mouseover', function(d){
184 | d3.select('h2').text(d.properties.NAME);
185 | d3.select(this).attr('class','county hover');
186 | })
187 | .on('mouseout', function(d){
188 | d3.select('h2').text('');
189 | d3.select(this).attr('class','county');
190 | });
191 | ```
192 |
193 | When triggered, the callback function for the 'mousover' event does two things:
194 |
195 | 1. selects the h2 element we've included within the document's HTML and inserts the name of the selected county within it
196 | 2. selects 'this' – that magic keyword allowing access to the context of the event, in this case the SVG path we're hovering over – and applies two CSS class rules to it, our county class and the new hover class we created.
197 |
198 | If you're puzzlingly over how the value of NAME is accessed through this code, it'd be useful for you to console.log() that d variable within the callback, and inspect the output in your browser's console:
199 |
200 | ```javascript
201 | .on('mouseover', function(d){
202 | console.log(d);
203 | })
204 | ```
205 |
206 | We're not cooking with gas yet. Let's keep trucking!
207 |
208 | ##3. A D3 map using queue.js
209 |
210 | * View the code and data for this map: [d3-map03-queue](https://github.com/maptimelex/d3-mapping/tree/master/d3-map03-queue)
211 | * See a working example here: A D3 map using queue.js
212 |
213 | Our interaction fun is over for now. Instead we're going to cover some other ground that will make our map more flexible (and slightly more technically savvy).
214 |
215 | In the previous two maps we simply loaded our GeoJSON information as an external JavaScript file when the page loaded. An alternative approach is to use an asynchronous JavaScript and XML (AJAX) request to load the GeoJSON.
216 |
217 | While there are various ways to make an AJAX request, a convenient approach is to use [Queue.js](https://github.com/mbostock/queue), a helper library written by Mike Bostock.
218 |
219 | We can include a call to load the very small queue.js minified file within in the head of our HTML document, along with the D3 code:
220 |
221 | ```html
222 |
223 |
224 | width, height, sag, projection, and geoPath, let's issue the call to load our GeoJSON:
242 |
243 | ```javascript
244 | queue()
245 | .defer(D3on, 'ky-counties.json')
246 | .await(ready);
247 | ```
248 |
249 | We use the .defer() method to invoke D3's [native capabilities for requesting JSON files](https://github.com/mbostock/d3/wiki/Requests#d3_json), which loads our file into the document. The .await() method waits until the file is finished loading before calling a custom function named ready(), which passes any generated error messages as the first argument and the GeoJSON object as the second.
250 |
251 | As we'll see later on, the power of the Queue.js helper library is that we can include as many .defer() methods as we wish, loaded many files into our document.
252 |
253 | We declare a function ready(), and define it to accept two parameters: the error message(s) and the GeoJSON object.
254 | ```javascript
255 | function ready(error, counties){
256 |
257 | svg.append('g')
258 | .selectAll('path')
259 | .data(counties.features)
260 | .enter()
261 | .append('path')
262 | .attr( "d", geoPath )
263 | .attr('class','county');
264 | }
265 | ```
266 |
267 | Remember, the statements contained within this function's body are not executed until the external GeoJSON file has finished loading. Once that happens, our map is drawn exactly as before.
268 |
269 | ##4. A D3 map using topojson
270 |
271 | * View the code and data for this map: [map04-topojson](https://github.com/maptimelex/d3-mapping/tree/master/d3-map04-topojson)
272 | * See a working example here: A D3 map using topojson
273 |
274 | Before we start working with real data to make some thematic maps, let's cover one more important component of mapping with D3: the [TopoJSON format](https://github.com/mbostock/topojson).
275 |
276 | GeoJSON is a super cool format. However, one drawback, like its ShapeFile counterpart, is that shared borders between polygons are encoded twice. This leads to file bloat (booo). To this end, Mike Bostock figured out a way to encode topology (i.e., the relation between entities) and thereby eliminate the redundancy encoded with a GeoJSON.
277 |
278 | If we examine the file included with this map, we see that is is encoded not according to the GeoJSON specification, but rather as TopoJSON.
279 |
280 | **The _ky-counties.json data used in previous maps, encoded as GeoJSON (52KB):**
281 |
282 | ```javascript
283 | {
284 | "type": "FeatureCollection",
285 | "features": [
286 | { "type": "Feature", "properties": { "COUNTYFP": "007", "NAME": "Ballard", "ALAND": 638843907 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -89.1719, 37.0682 ], [ -89.03, 37.2111 ], [ -88.9334, 37.2252 ], [ -88.816, 36.9541 ], [ -88.9888, 36.9195 ], [ -89.1008, 36.944 ], [ -89.1327, 36.9822 ], [ -89.1719, 37.0682 ] ] ] ] } },
287 | { "type": "Feature", "properties": { "COUNTYFP": "011", "NAME": "Bath", "ALAND": 722081626 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -83.9779, 38.1921 ], [ -83.8484, 38.2969 ], [ -83.7323, 38.2835 ], [ -83.6352, 38.1875 ], [ -83.5072, 38.0863 ], [ -83.4988, 38.0506 ], [ -83.5774, 38.0132 ], [ -83.6593, 38.0283 ], [ -83.7594, 37.9987 ], [ -83.8814, 38.1365 ], [ -83.9779, 38.1921 ] ] ] ] } },
288 | ```
289 |
290 | **The same _ky-counties.json data used in this maps, encoded as GeoJSON (30KB):**
291 |
292 | ```javascript
293 | {"type":"Topology","objects":{"counties":{"type":"GeometryCollection","geometries":[{"type":"Polygon","properties":{"COUNTYFP":"007","NAME":"Ballard","ALAND":638843907,"oil_wells":0,"gas_wells":0},"arcs":[[0,1,2]]},{"type":"Polygon","properties":{"COUNTYFP":"011","NAME":"Bath","ALAND":722081626,"oil_wells":45,"gas_wells":18},"arcs":[[3,4,5,6,7]]},{"type":"Polygon","properties":{"COUNTYFP":"013","NAME":"Bell","ALAND":929806591,"oil_wells":23,"gas_wells":593},"arcs":[[8,9,10,11,12,13]]},
294 | ```
295 |
296 | While the difference between 50KB and 32KB in this example is quite trivial, the TopoJSON starts to pay off when loading more more complex, less abstracted geometries (consider all of US counties).
297 |
298 | To use topojson, we need to first make sure its functionality is accessible within our JavaScript by including a request to load it. Our document is now loading three separate JavaScript libraries:
299 |
300 | ```html
301 |
302 |
303 |
304 | ```
305 |
306 | To access our TopoJSON data and draw our same simple map with D3, we only need to change one line within our JavaScript. Whereas previously we were simply passing counties.features within the .data() method (i.e., .data(counties.features)), this time we need to invoke a topojson method named .feature:
307 |
308 | ```javascript
309 | svg.append('g')
310 | .selectAll('path')
311 | .data( topojson.feature(counties, counties.objects.counties).features)
312 | .enter()
313 | .append('path')
314 | .attr( "d", geoPath )
315 | .attr('class','county');
316 | ```
317 |
318 | Note that the first argument passed when calling topojson.feature is a reference to our TopoJSON object. The second argument digs into this object to access the specific objects contained within it. Note the object keys objects and counties encoded within the _ky-counties.json_ TopoJSON itself (pasted above).
319 |
320 | The topojson.feature() method converts our TopoJSON back into GeoJSON (whew! GeoJSON I thought you were gone forever!). The final .features is a property that allows us to use the returned GeoJSON's features as our data. Our script then continues as it has and we, once again, have a pretty boring (but highly efficient!) static basemap of Kentucky's counties.
321 |
322 | ##5. A D3 map plotting oil and gas well points
323 |
324 | * View the code and data for this map: [map05-data-point](https://github.com/maptimelex/d3-mapping/tree/master/d3-map05-data-point)
325 | * See a working example here: A D3 map plotting oil and gas well points
326 |
327 | Alright, enough of this basemap nonsense already. Let's work with some real data to do some thematic web mapping!
328 |
329 | In my ongoing efforts to better understand our changing energy landscapes, I've dug up some [fun data on oil and gas wells in Kentucky](http://kgs.uky.edu/kgsweb/DataSearching/oilsearch.asp), maintained by the [Kentucky Geological Survey](http://www.uky.edu/KGS/). The data are stored within a CSV and have a data attribute of either "OIL" or "GAS". For this map we're going to try to plot these wells using D3.
330 |
331 | **Disclaimer:** This is really kinda a silly exercise, as normally you wouldn't want to create such a large number of SVG elements. We'd likely run into problems if we applied panning and zooming, for instance. Better solutions exist using the HTML5 Canvas API or baking the data into tiles using something like [Mapbox Studio](https://www.mapbox.com/mapbox-studio). But ... let's just experiment for now, shall we?
332 |
333 | Within [@awoodruff]()'s wonderful examples of D3 for[@maptimeBOSTON] he plotted some point data encoded as GeoJSON. While this is fine for a limited number of points, the well data I've dug up has 65,551 records. Translating this 1.8MB CSV file into GeoJSON leaves us with an 11MB file, a bit too large for loading into a web map. Therefore, it's desirable to load the data as CSV and covert either to GeoJSON within the script (something Mapbox's [leaflet-omnivore](https://github.com/mapbox/leaflet-omnivore) is good at) or use to directly create the desired SVG elements (the approach we'll explore here). Remember, flat-file CSVs are about as efficient data format as you'll ever get!
334 |
335 | For this map we're first going to load in our CSV data, in addition to our beloved KY county polygons, again using Queue.js's awesome asynchronous power. We'll pass the resultant CSV data into our .ready() function along with the county data, modifying the functions signature to accept the third parameter referencing our wells data:
336 |
337 | ```javascript
338 | queue()
339 | .defer(D3on, 'ky-counties.json')
340 | .defer(d3.csv, 'wells.csv')
341 | .await(ready);
342 |
343 | function ready(error, counties, wells){
344 |
345 | // sweet JS code here
346 | }
347 |
348 | ```
349 |
350 | Note that the d3.csv() method has converted the CSV data to an Array of JavaScript Objects. We could console.log(wells) and inspect the result in the JavaScript console:
351 |
352 | 
353 |
354 | Instead of drawing SVG 'path' elements, we're going to create [SVG 'circle' elements](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle) to represent each of the wells.
355 |
356 | Let's look at the code to see how this is done:
357 |
358 | ```javascript
359 | svg.append('g')
360 | .selectAll("circle")
361 | .data(wells)
362 | .enter()
363 | .append("circle")
364 | .attr("cx", function(d){
365 | return projection([d["X"], d["Y"] ])[0];
366 | })
367 | .attr("cy", function(d){
368 | return projection([d["X"], d["Y"] ])[1];
369 | })
370 | .attr("r", 1);
371 | ```
372 |
373 | Similar to drawing SVG 'path' elements with D3, we apply a sequence of chained methods to select all the 'circle' elements (that don't exist yet), bind the data, and enter and append the new elements.
374 |
375 | SVG 'circle' elements require 'cx' and 'cy' attributes to be placed within screen coordinates. However, we need to translate our longitude ('X') and latitude ('Y') values into screen coordinates. How do we do this? We've already been doing it to draw our 'path' elements, using the powerful _d3.projection_ functionality. So, we simply need to pass that function an array of our two coordinates and assign the translated values as the 'circle' element's 'cx' and 'cy' attributes, respectively. We'll also give the circle a radius ('r' attribute) of 1.
376 |
377 | 
378 |
379 | Cool, now we've plotted way too many SVG circles on our D3 map. There's a definite spatial pattern we can recognize (i.e., where wells exist). Let's make one final adjustment to make it a more useful thematic map. How can we see the spatial pattern between oil and gas wells? Rather than encode these circles with size, as we would with a [proportional symbol map](http://www.cartographicperspectives.org/index.php/journal/article/view/cp76-donohue-et-al/1307), let's encode these nominal categories using color ([or hue, more accurately](http://axismaps.github.io/thematic-cartography/articles/color_schemes.html)).
380 |
381 | To achieve this with D3 JavaScript code, I'm going to append a few more methods to the group of circles: two to style the stroke and fill of the circles and another to set the opacity of the circles at .6 to improve the readability of the map. The modified code uses simple conditional statements to determine if a given circle is oil or gas, and applies either a red fill color (for oil) or an orange fill color (for gas) to each of the selected circles.
382 |
383 | ```javascript
384 | svg.append("g")
385 | .selectAll("circle")
386 | .data(wells)
387 | .enter()
388 | .append("circle")
389 | .attr("cx", function(d){
390 | return projection([d["X"], d["Y"] ])[0];
391 | })
392 | .attr("cy", function(d){
393 | return projection([d["X"], d["Y"] ])[1];
394 | })
395 | .attr("r", 1)
396 | .style("fill", function(d){
397 | if(d.Org_Result == "OIL"){
398 | return "#e41a1c";
399 | }else if(d.Org_Result == "GAS"){
400 | return "#fd8d3c";
401 | }
402 | })
403 | .attr("opacity", ".6");
404 | ```
405 |
406 | Result shows us the spatial distribute of these two well types:
407 |
408 | 
409 |
410 | Whew! Okay. Two more maps and it's nearly time for #geoBeers?
411 |
412 | ##6. A D3 county choropleth map of Kentucky oil or gas wells
413 |
414 | * View the code and data for this map: [map06-data-area](https://github.com/maptimelex/d3-mapping/tree/master/d3-map06-data-area)
415 | * See a working example here: A D3 county choropleth map of Kentucky oil or gas wells
416 |
417 | While plotting the specific points was both fun and informative, let's say we wish to aggregate these points to the county level to both simplify the map and avoid the mess of drawing 65,551 circles atop one another. Also, we want to take advantage of our amazing ability to project our map into an equal area projection, so let's make a choropleth map (Yaaahhh! The world doesn't have enough of these yet).
418 |
419 | We can see that the TopoJSON supplied with this map also contains the number of oil and gas wells, already aggregated to each county:
420 |
421 | ```javascript
422 | {"type":"Topology","objects":{"counties":{"type":"GeometryCollection","geometries":[{"type":"Polygon","properties":{"COUNTYFP":"007","NAME":"Ballard","ALAND":638843907,"oil_wells":0,"gas_wells":0},"arcs":[[0,1,2]]},{"type":"Polygon","properties":{"COUNTYFP":"011","NAME":"Bath","ALAND":722081626,"oil_wells":45,"gas_wells":18},"arcs":[[3,4,5,6,7]]},{"type":"Polygon","properties":{"COUNTYFP":"013","NAME":"Bell","ALAND":929806591,"oil_wells":23,"gas_wells":593},"arcs":[[8,9,10,11,12,13]]}
423 | ```
424 |
425 | On one hand, editing the D3 code to change the fill color of our county 'path' elements isn't very hard (we just did it for the circles). We know we can access the data values for each element (e.g., (d.properties.oil_wells) and simply need to modify our d3-map04 code like so:
426 |
427 | ```javascript
428 | svg.append("g")
429 | .selectAll("path")
430 | .data( topojson.feature(counties, counties.objects.counties).features)
431 | .enter()
432 | .append("path")
433 | .attr( "d", geoPath )
434 | .attr("class","county")
435 | .attr( "fill", function(d){
436 | // return some color here return based upon the # of wells
437 | });
438 | ```
439 |
440 | However, choropleth maps are trickier to make than we might think at first. You can read more about this in a [handy guide to thematic cartography recently published by Axis Maps](http://axismaps.github.io/thematic-cartography/articles/choropleth.html).
441 |
442 | For one, we need to standardize these raw counts. Fortunately our county polygons also have property values for area, which makes sense to use in this case (we want to know the density of wells within each county for proper comparison). That's pretty easy then, we can simply use the calculated value of d.properties.oil_wells/d.properties.ALAND.
443 |
444 | How do we then assign a color based upon that value to each polygon? We need to classify the data in some way. That is, we need to group the observations in some meaningful way (e.g., counties with few, moderate, or high number of wells).
445 |
446 | [D3's Quantitate Scales](https://github.com/mbostock/d3/wiki/Quantitative-Scales) make this pretty easy, and you can play with a variety of options including logarithmic, quantile-based, and even linear (i.e., continuous) scales with which to determine what color is applied to what unit. There are numerous examples from which to draw upon:
447 |
448 | * [Population Choropleth](http://bl.ocks.org/mbostock/6320825)
449 | * [Projected Choropleth](http://bl.ocks.org/mbostock/5925375)
450 | * [Kentucky Population Density](http://bl.ocks.org/mbostock/5737662)
451 | * [Area Choropleth](http://bl.ocks.org/mbostock/4206573)
452 | * [Choropleth](http://bl.ocks.org/mbostock/4060606)
453 | * [Threshold Choropleth](http://bl.ocks.org/mbostock/3306362)
454 |
455 | We're gunna make things a little trickier though, and use [Jenks natural breaks optimization](https://en.wikipedia.org/wiki/Jenks_natural_breaks_optimization), a classification method that minimizing within-group variance and maximizes between-group differences (huh? [read more ...](http://axismaps.github.io/thematic-cartography/articles/classification.html)).
456 |
457 | Calculating the breaks using code [can be a little tricky](http://www.macwright.org/2013/02/18/literate-jenks.html). Fortunately, the bright programmer working for [Mapbox](https://www.mapbox.com/), Tom MacWright, wrote a useful little JavaScript library called [Simple Statistics](http://www.macwright.org/simple-statistics/) which includes a method ss.jenks() that can do the heavy thinking for us.
458 |
459 | Tom even provides an example of using it with D3: [Jenks Natural Breaks with simple-statistics and d3](http://bl.ocks.org/tmcw/4969184)
460 |
461 | So then, once we include the Simple Statistics library in our document (we're linking to a local copy because it doesn't appear to be hosting on a CDN), we're ready to rock in roll:
462 |
463 | ```html
464 |
465 | ```
466 |
467 | First, before we draw our map, we want to determine the class breaks using the Simple Statistics method. To achieve this, we'll use the [native JavaScript method .map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to derive an array of all our values, and then use ss.jenks() to return a given number of 'natural' class breaks (in this case 5).
468 |
469 | Note that the ss.jenks() method returns the min and max values of the range as well, which [we don't need for the d3.scale.threshold().domain()](http://bl.ocks.org/rgdonohue/823a0c67087e0a66d171). So we'll use JavaScript methods of .shift() and .pop() to remove the first and last elements from this Array.
470 |
471 | For the d3.scale.threshold().range() values we'll simply hard-code 5 color values into an Array. We then use these two Arrays to construct a function for returning a specific color based upon a value falling within the derived class breaks.
472 |
473 | ```javascript
474 | var attribute = "gas_wells"; // alternative is "oil_wells"
475 |
476 | var breaks = ss.jenks(counties.objects.counties.geometries.map(function(d) {
477 | return d.properties[attribute]/d.properties.ALAND;
478 | }), 5);
479 |
480 | breaks.shift(); // remove min value from breaks Array before applying to domain
481 | breaks.pop(); // same for max
482 |
483 | var colors = ["#feedde","#fdbe85","#fd8d3c","#e6550d","#a63603"];
484 |
485 | var jenks = d3.scale.threshold()
486 | .domain(breaks)
487 | .range(colors);
488 | ```
489 |
490 | We can then send our calculated wells density value to this function and assign the return value to the 'fill' attribute of each polygon. Wha-la ... in a few terse lines of code we have a choropleth map classified according to Jenks optimal classification breaks.
491 |
492 | ##7. A toggle D3 county map of Kentucky oil and gas wells
493 |
494 | * View the code and data for this map: [map07-data-area-toggle](https://github.com/maptimelex/d3-mapping/tree/master/d3-map07-data-area-toggle)
495 | * See a working example here: A toggle D3 county map of Kentucky oil and gas wells
496 |
497 | In the previous example, we could change the data represented by editing the code (i.e., the value of the variable attribute) and re-rendering the map. But what if we wanted to give our user the ability re-draw the map with a simple toggle button?
498 |
499 | First we add some HTML elements to the document's body:
500 |
501 | ```html
502 |
506 | ```
507 |
508 | We then need to move the code that applies a fill color to each county from the original construction of these elements into it's own function which can be called repeatedly (we'll name it color() here). We use D3 to select our form element and detect a change, upon which the value of the variable attribute is reassigned and the color() function is called again.
509 |
510 |
511 | ```javascript
512 | var countiesSVG = svg.append("g")
513 | .selectAll("path")
514 | .data( topojson.feature(counties, counties.objects.counties).features)
515 | .enter()
516 | .append("path")
517 | .attr( "d", geoPath )
518 | .attr("class","county");
519 |
520 | color();
521 |
522 | d3.selectAll("input").on("change", function() {
523 | attribute = this.id;
524 | color();
525 | });
526 |
527 | function color(){
528 |
529 | d3.selectAll('.county')
530 | .transition()
531 | .attr( "fill", function(d){
532 | return jenks(d.properties[attribute]/d.properties.ALAND);
533 | });
534 | }
535 | ```
536 |
537 | The color function simply selects all elements with a class of '.county' (i.e., all of our county polygons) and assigns a color value to the fill attribute as before. This example includes the use of a [d3.transtion()](https://github.com/mbostock/d3/wiki/Transitions) to make the transition between maps more pleasant on the eye.
538 |
539 |
540 | **Additional tools and resources used in this web mapping process:**
541 |
542 | * [TopoJSON](https://github.com/mbostock/topojson)
543 | * [Mapshaper](https://github.com/mbloch/mapshaper)
544 | * [Simple Statistics](http://www.macwright.org/simple-statistics/)
545 | * [Turf.js](http://turfjs.org/)
546 | * [Open Office Calc](https://www.openoffice.org/product/calc.html)
547 | * [geojson-precision](https://github.com/jczaplew/geojson-precision)
548 | * [QGIS](http://www.qgis.org/)
549 | * [Stack Overflow](http://stackoverflow.com/)
550 |
551 |
552 |
--------------------------------------------------------------------------------
/assets/css/the-big-picture.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Start Bootstrap - The Big Picture HTML Template (http://startbootstrap.com)
3 | * Code licensed under the Apache License v2.0.
4 | * For details, see http://www.apache.org/licenses/LICENSE-2.0.
5 | */
6 | @import url(http://fonts.googleapis.com/css?family=Montserrat);
7 | body {
8 | margin-top: 50px;
9 | margin-bottom: 50px;
10 | background: none;
11 | font-family: 'Montserrat', Arial, sans-serif;
12 | color: #ffffff;
13 | }
14 |
15 | .full {
16 | /*background: url(http://placehold.it/1920x1080) no-repeat center center fixed; */
17 | background-color: #005daa;
18 | -webkit-background-size: cover;
19 | -moz-background-size: cover;
20 | -o-background-size: cover;
21 | background-size: cover;
22 |
23 | }
24 |
25 | p>a, p>a:hover {
26 | color: #cdcdcd;
27 | }
28 |
29 | a.list-group-item {
30 | background-color: transparent;
31 | border-color: transparent;
32 | border-radius: 4px;
33 | }
34 | a.list-group-item:hover {
35 | background-color: white;
36 | }
37 |
38 | a.list-group-item .list-group-item-heading {
39 | color: #ffffff;
40 | }
41 | a.list-group-item:hover .list-group-item-heading {
42 | color: #005daa;
43 | }
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/assets/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maptimelex/d3-mapping/f2ab187883ac7bde7f6b958bcc3029fe5a7d1082/assets/fonts/glyphicons-halflings-regular.eot
--------------------------------------------------------------------------------
/assets/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maptimelex/d3-mapping/f2ab187883ac7bde7f6b958bcc3029fe5a7d1082/assets/fonts/glyphicons-halflings-regular.ttf
--------------------------------------------------------------------------------
/assets/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maptimelex/d3-mapping/f2ab187883ac7bde7f6b958bcc3029fe5a7d1082/assets/fonts/glyphicons-halflings-regular.woff
--------------------------------------------------------------------------------
/assets/fonts/glyphicons-halflings-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maptimelex/d3-mapping/f2ab187883ac7bde7f6b958bcc3029fe5a7d1082/assets/fonts/glyphicons-halflings-regular.woff2
--------------------------------------------------------------------------------
/assets/js/bootstrap.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap v3.3.4 (http://getbootstrap.com)
3 | * Copyright 2011-2015 Twitter, Inc.
4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
5 | */
6 | if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(a){"use strict";var b=a.fn.jquery.split(" ")[0].split(".");if(b[0]<2&&b[1]<9||1==b[0]&&9==b[1]&&b[2]<1)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher")}(jQuery),+function(a){"use strict";function b(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return{end:b[c]};return!1}a.fn.emulateTransitionEnd=function(b){var c=!1,d=this;a(this).one("bsTransitionEnd",function(){c=!0});var e=function(){c||a(d).trigger(a.support.transition.end)};return setTimeout(e,b),this},a(function(){a.support.transition=b(),a.support.transition&&(a.event.special.bsTransitionEnd={bindType:a.support.transition.end,delegateType:a.support.transition.end,handle:function(b){return a(b.target).is(this)?b.handleObj.handler.apply(this,arguments):void 0}})})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var c=a(this),e=c.data("bs.alert");e||c.data("bs.alert",e=new d(this)),"string"==typeof b&&e[b].call(c)})}var c='[data-dismiss="alert"]',d=function(b){a(b).on("click",c,this.close)};d.VERSION="3.3.4",d.TRANSITION_DURATION=150,d.prototype.close=function(b){function c(){g.detach().trigger("closed.bs.alert").remove()}var e=a(this),f=e.attr("data-target");f||(f=e.attr("href"),f=f&&f.replace(/.*(?=#[^\s]*$)/,""));var g=a(f);b&&b.preventDefault(),g.length||(g=e.closest(".alert")),g.trigger(b=a.Event("close.bs.alert")),b.isDefaultPrevented()||(g.removeClass("in"),a.support.transition&&g.hasClass("fade")?g.one("bsTransitionEnd",c).emulateTransitionEnd(d.TRANSITION_DURATION):c())};var e=a.fn.alert;a.fn.alert=b,a.fn.alert.Constructor=d,a.fn.alert.noConflict=function(){return a.fn.alert=e,this},a(document).on("click.bs.alert.data-api",c,d.prototype.close)}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.button"),f="object"==typeof b&&b;e||d.data("bs.button",e=new c(this,f)),"toggle"==b?e.toggle():b&&e.setState(b)})}var c=function(b,d){this.$element=a(b),this.options=a.extend({},c.DEFAULTS,d),this.isLoading=!1};c.VERSION="3.3.4",c.DEFAULTS={loadingText:"loading..."},c.prototype.setState=function(b){var c="disabled",d=this.$element,e=d.is("input")?"val":"html",f=d.data();b+="Text",null==f.resetText&&d.data("resetText",d[e]()),setTimeout(a.proxy(function(){d[e](null==f[b]?this.options[b]:f[b]),"loadingText"==b?(this.isLoading=!0,d.addClass(c).attr(c,c)):this.isLoading&&(this.isLoading=!1,d.removeClass(c).removeAttr(c))},this),0)},c.prototype.toggle=function(){var a=!0,b=this.$element.closest('[data-toggle="buttons"]');if(b.length){var c=this.$element.find("input");"radio"==c.prop("type")&&(c.prop("checked")&&this.$element.hasClass("active")?a=!1:b.find(".active").removeClass("active")),a&&c.prop("checked",!this.$element.hasClass("active")).trigger("change")}else this.$element.attr("aria-pressed",!this.$element.hasClass("active"));a&&this.$element.toggleClass("active")};var d=a.fn.button;a.fn.button=b,a.fn.button.Constructor=c,a.fn.button.noConflict=function(){return a.fn.button=d,this},a(document).on("click.bs.button.data-api",'[data-toggle^="button"]',function(c){var d=a(c.target);d.hasClass("btn")||(d=d.closest(".btn")),b.call(d,"toggle"),c.preventDefault()}).on("focus.bs.button.data-api blur.bs.button.data-api",'[data-toggle^="button"]',function(b){a(b.target).closest(".btn").toggleClass("focus",/^focus(in)?$/.test(b.type))})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.carousel"),f=a.extend({},c.DEFAULTS,d.data(),"object"==typeof b&&b),g="string"==typeof b?b:f.slide;e||d.data("bs.carousel",e=new c(this,f)),"number"==typeof b?e.to(b):g?e[g]():f.interval&&e.pause().cycle()})}var c=function(b,c){this.$element=a(b),this.$indicators=this.$element.find(".carousel-indicators"),this.options=c,this.paused=null,this.sliding=null,this.interval=null,this.$active=null,this.$items=null,this.options.keyboard&&this.$element.on("keydown.bs.carousel",a.proxy(this.keydown,this)),"hover"==this.options.pause&&!("ontouchstart"in document.documentElement)&&this.$element.on("mouseenter.bs.carousel",a.proxy(this.pause,this)).on("mouseleave.bs.carousel",a.proxy(this.cycle,this))};c.VERSION="3.3.4",c.TRANSITION_DURATION=600,c.DEFAULTS={interval:5e3,pause:"hover",wrap:!0,keyboard:!0},c.prototype.keydown=function(a){if(!/input|textarea/i.test(a.target.tagName)){switch(a.which){case 37:this.prev();break;case 39:this.next();break;default:return}a.preventDefault()}},c.prototype.cycle=function(b){return b||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},c.prototype.getItemIndex=function(a){return this.$items=a.parent().children(".item"),this.$items.index(a||this.$active)},c.prototype.getItemForDirection=function(a,b){var c=this.getItemIndex(b),d="prev"==a&&0===c||"next"==a&&c==this.$items.length-1;if(d&&!this.options.wrap)return b;var e="prev"==a?-1:1,f=(c+e)%this.$items.length;return this.$items.eq(f)},c.prototype.to=function(a){var b=this,c=this.getItemIndex(this.$active=this.$element.find(".item.active"));return a>this.$items.length-1||0>a?void 0:this.sliding?this.$element.one("slid.bs.carousel",function(){b.to(a)}):c==a?this.pause().cycle():this.slide(a>c?"next":"prev",this.$items.eq(a))},c.prototype.pause=function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition&&(this.$element.trigger(a.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},c.prototype.next=function(){return this.sliding?void 0:this.slide("next")},c.prototype.prev=function(){return this.sliding?void 0:this.slide("prev")},c.prototype.slide=function(b,d){var e=this.$element.find(".item.active"),f=d||this.getItemForDirection(b,e),g=this.interval,h="next"==b?"left":"right",i=this;if(f.hasClass("active"))return this.sliding=!1;var j=f[0],k=a.Event("slide.bs.carousel",{relatedTarget:j,direction:h});if(this.$element.trigger(k),!k.isDefaultPrevented()){if(this.sliding=!0,g&&this.pause(),this.$indicators.length){this.$indicators.find(".active").removeClass("active");var l=a(this.$indicators.children()[this.getItemIndex(f)]);l&&l.addClass("active")}var m=a.Event("slid.bs.carousel",{relatedTarget:j,direction:h});return a.support.transition&&this.$element.hasClass("slide")?(f.addClass(b),f[0].offsetWidth,e.addClass(h),f.addClass(h),e.one("bsTransitionEnd",function(){f.removeClass([b,h].join(" ")).addClass("active"),e.removeClass(["active",h].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger(m)},0)}).emulateTransitionEnd(c.TRANSITION_DURATION)):(e.removeClass("active"),f.addClass("active"),this.sliding=!1,this.$element.trigger(m)),g&&this.cycle(),this}};var d=a.fn.carousel;a.fn.carousel=b,a.fn.carousel.Constructor=c,a.fn.carousel.noConflict=function(){return a.fn.carousel=d,this};var e=function(c){var d,e=a(this),f=a(e.attr("data-target")||(d=e.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""));if(f.hasClass("carousel")){var g=a.extend({},f.data(),e.data()),h=e.attr("data-slide-to");h&&(g.interval=!1),b.call(f,g),h&&f.data("bs.carousel").to(h),c.preventDefault()}};a(document).on("click.bs.carousel.data-api","[data-slide]",e).on("click.bs.carousel.data-api","[data-slide-to]",e),a(window).on("load",function(){a('[data-ride="carousel"]').each(function(){var c=a(this);b.call(c,c.data())})})}(jQuery),+function(a){"use strict";function b(b){var c,d=b.attr("data-target")||(c=b.attr("href"))&&c.replace(/.*(?=#[^\s]+$)/,"");return a(d)}function c(b){return this.each(function(){var c=a(this),e=c.data("bs.collapse"),f=a.extend({},d.DEFAULTS,c.data(),"object"==typeof b&&b);!e&&f.toggle&&/show|hide/.test(b)&&(f.toggle=!1),e||c.data("bs.collapse",e=new d(this,f)),"string"==typeof b&&e[b]()})}var d=function(b,c){this.$element=a(b),this.options=a.extend({},d.DEFAULTS,c),this.$trigger=a('[data-toggle="collapse"][href="#'+b.id+'"],[data-toggle="collapse"][data-target="#'+b.id+'"]'),this.transitioning=null,this.options.parent?this.$parent=this.getParent():this.addAriaAndCollapsedClass(this.$element,this.$trigger),this.options.toggle&&this.toggle()};d.VERSION="3.3.4",d.TRANSITION_DURATION=350,d.DEFAULTS={toggle:!0},d.prototype.dimension=function(){var a=this.$element.hasClass("width");return a?"width":"height"},d.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("in")){var b,e=this.$parent&&this.$parent.children(".panel").children(".in, .collapsing");if(!(e&&e.length&&(b=e.data("bs.collapse"),b&&b.transitioning))){var f=a.Event("show.bs.collapse");if(this.$element.trigger(f),!f.isDefaultPrevented()){e&&e.length&&(c.call(e,"hide"),b||e.data("bs.collapse",null));var g=this.dimension();this.$element.removeClass("collapse").addClass("collapsing")[g](0).attr("aria-expanded",!0),this.$trigger.removeClass("collapsed").attr("aria-expanded",!0),this.transitioning=1;var h=function(){this.$element.removeClass("collapsing").addClass("collapse in")[g](""),this.transitioning=0,this.$element.trigger("shown.bs.collapse")};if(!a.support.transition)return h.call(this);var i=a.camelCase(["scroll",g].join("-"));this.$element.one("bsTransitionEnd",a.proxy(h,this)).emulateTransitionEnd(d.TRANSITION_DURATION)[g](this.$element[0][i])}}}},d.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("in")){var b=a.Event("hide.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.dimension();this.$element[c](this.$element[c]())[0].offsetHeight,this.$element.addClass("collapsing").removeClass("collapse in").attr("aria-expanded",!1),this.$trigger.addClass("collapsed").attr("aria-expanded",!1),this.transitioning=1;var e=function(){this.transitioning=0,this.$element.removeClass("collapsing").addClass("collapse").trigger("hidden.bs.collapse")};return a.support.transition?void this.$element[c](0).one("bsTransitionEnd",a.proxy(e,this)).emulateTransitionEnd(d.TRANSITION_DURATION):e.call(this)}}},d.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()},d.prototype.getParent=function(){return a(this.options.parent).find('[data-toggle="collapse"][data-parent="'+this.options.parent+'"]').each(a.proxy(function(c,d){var e=a(d);this.addAriaAndCollapsedClass(b(e),e)},this)).end()},d.prototype.addAriaAndCollapsedClass=function(a,b){var c=a.hasClass("in");a.attr("aria-expanded",c),b.toggleClass("collapsed",!c).attr("aria-expanded",c)};var e=a.fn.collapse;a.fn.collapse=c,a.fn.collapse.Constructor=d,a.fn.collapse.noConflict=function(){return a.fn.collapse=e,this},a(document).on("click.bs.collapse.data-api",'[data-toggle="collapse"]',function(d){var e=a(this);e.attr("data-target")||d.preventDefault();var f=b(e),g=f.data("bs.collapse"),h=g?"toggle":e.data();c.call(f,h)})}(jQuery),+function(a){"use strict";function b(b){b&&3===b.which||(a(e).remove(),a(f).each(function(){var d=a(this),e=c(d),f={relatedTarget:this};e.hasClass("open")&&(e.trigger(b=a.Event("hide.bs.dropdown",f)),b.isDefaultPrevented()||(d.attr("aria-expanded","false"),e.removeClass("open").trigger("hidden.bs.dropdown",f)))}))}function c(b){var c=b.attr("data-target");c||(c=b.attr("href"),c=c&&/#[A-Za-z]/.test(c)&&c.replace(/.*(?=#[^\s]*$)/,""));var d=c&&a(c);return d&&d.length?d:b.parent()}function d(b){return this.each(function(){var c=a(this),d=c.data("bs.dropdown");d||c.data("bs.dropdown",d=new g(this)),"string"==typeof b&&d[b].call(c)})}var e=".dropdown-backdrop",f='[data-toggle="dropdown"]',g=function(b){a(b).on("click.bs.dropdown",this.toggle)};g.VERSION="3.3.4",g.prototype.toggle=function(d){var e=a(this);if(!e.is(".disabled, :disabled")){var f=c(e),g=f.hasClass("open");if(b(),!g){"ontouchstart"in document.documentElement&&!f.closest(".navbar-nav").length&&a('').insertAfter(a(this)).on("click",b);var h={relatedTarget:this};if(f.trigger(d=a.Event("show.bs.dropdown",h)),d.isDefaultPrevented())return;e.trigger("focus").attr("aria-expanded","true"),f.toggleClass("open").trigger("shown.bs.dropdown",h)}return!1}},g.prototype.keydown=function(b){if(/(38|40|27|32)/.test(b.which)&&!/input|textarea/i.test(b.target.tagName)){var d=a(this);if(b.preventDefault(),b.stopPropagation(),!d.is(".disabled, :disabled")){var e=c(d),g=e.hasClass("open");if(!g&&27!=b.which||g&&27==b.which)return 27==b.which&&e.find(f).trigger("focus"),d.trigger("click");var h=" li:not(.disabled):visible a",i=e.find('[role="menu"]'+h+', [role="listbox"]'+h);if(i.length){var j=i.index(b.target);38==b.which&&j>0&&j--,40==b.which&&jListed below are the seven example maps from Rich Donohue's introductory lesson on D3.js, presented at the June meetup of maptimeLEX. You can follow along with the presentation on GitHub to create the maps listed below.
70 |