Demonstrates loading a local data file (encoded in TopoJSON format) and symbolizes using Leaflet functionality. Also loads a data layer form CartoDB database. JQuery detects zoom level to remove or add the hexbin layer and toggle between the relevant legends/layer switcher.
Rich Donohue rgdonohue
Example of map explained in maptimeLex Introduction to D3.js Web Mapping Through 7 Simple Maps.
This example demonstrates the use of PostGIS to move and scale Alaska and Hawaii to fit SW off the continental US in a traditional map layout, client-side using CartoDB.js.
The continental US is first transformed out of Geo Web Mercator to an USA Contiguous Albers Equal Area Conic projection using the PostGIS function ST_Transform. Inspired by Free Your Maps From Web Mercator.
Alaska and Hawaii are then transformed using their respective projections, and then moved using St_Transform. Alaska's area is also reduced in size using the ST_Scale function.
This example shows a solution to achieve perceptual (or apparent) scaling of graduated symbols, using the Leaflet library. Data are raw totals of Kenyan girls enrolled in the 8th grade by county.
- see Krygier's Perceptual Scaling of Map Symbols for the full discussion
- equation drawn from ArcGIS Desktop Discussion Forums
Apparently we've never been calculating the area of our circles for graduated symbols?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html class="no-js"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <style> | |
| @import url(http://fonts.googleapis.com/css?family=Raleway); | |
| body { |
This demonstrates a simple slideshow using JQuery, specifically JQuery's animate method. The challenge here is to get the slides to continuously loop forward and in reverse. The layout in this example shows how this is done by first moving the subsequent or preceding slide into position before animating the transition. In an actual implementation, the slides to the right would be hidden from view (such as by setting the overflow property on the #slide-container element to hidden).
A demonstration of the W3C Candidate Recommendation CSS Multi-column Layout Module. Viewing on a new page allows columns to adjust in a fluid sense, inviting opportunities for implementation in a responsive layout.
This demonstrates a responsive image technique using picturefill.js, currently one of the best responsive image solutions available. Essentially it mimics an exciting web standard on the horizon, the proposed picture element, to deliver images at an appropriate size (and bandwidth!) for a given screen size. Read more about responsive image solutions from the filament group.
My demonstration here always makes use of "art direction." I've manually cropped, zoomed, and changed the focal point of each image. View this example in a new window to resize the display.
This technique demonstrates calculating class ranges (i.e. breaks) for dynamically coloring a choropleth requested from data hosted on CartoDB.
The solution requires two requests:
- first for the raw data so the full range of the data can be classified (here using the ckmeans clustering method from Simple Statistics)
- then to request the tiles using the generated cartoCSS rules
Data are percentages of uninsured Americans in 2015. Darker blue indicates higher percentage.
Legend comes next.
This map demonstrates the technique of using a SVG icon to encode the relative magnitude of hydroelectric power generation plants in the US. Hello Kitty cares deeply about renewable energy.
WARNING: the use of this icon as a proportional symbol has not been scientifically tested.
Data source: Form EIA-860 http://www.eia.gov/electricity/data/eia860/index.html