Interactive Cartography Developing web applications for the (mobile) web

The modern cartographer must have an understanding of developer API's like d3js, Leaflet map tile service, ArcGIS for Javascript Server, and Google Maps API. I take pride in my ability to read code and API documentations, build responsive websites, and to produce high quality information in a short amount of time.



Hurricane Sandy Twitter Map


Caution! NOT SUPPORTED by Internet Explorer. Please update to a modern browser like Chrome, Firefox, or Opera. Thank you.


#Sandy (Hurricane Sandy Twitter Viz)This visualization supports interactive exploration of publicly contributed Tweets from the greater NYC area during the 2012 Hurricane Sandy event. This project, created by Caroline Rose, Morgan Jarocki, and Chris Cantey was built in support of Chris's Master's research and fulfilled the final project requirement for Geography 575: Interactive Cartography at the University of Wisconsin-Madison.

Twitter was mined using Chris's Python Scraper which pulls Twitter users ID, text, latitude and longitude, along with the users metadata. With x, y data you can convert the tweets into an ESRI shapefile. The application was built using d3.js, php, and MySQL.


Choropleth Mapping with d3.js


Caution! NOT SUPPORTED by Internet Explorer. Please update to a modern browser like Chrome, Firefox, or Opera. Thank you.


d3.js (data driven documents), created by Mike Bostock of the New York Times, from Stanford University, represents an exciting new paradigm in web interactivity. D3 is an open-source JavaScript library for manipulating documents based on data using vector graphics (as opposed to tile maps like google), that helps you bring data to life using HTML, SVG, and CSS: meaning that we can project geographic coordinate systems, and interact with maps and graphs in a web environment.

You can convert an ESRI shapefile to a TopoJSON or GeoJSON using www.shpescape.com. Both the GeoJSON and TopoJSON formats structure the geometry and attribute values of a given map feature as a set of properties associated with a JavaScript object. D3 provides the framework to draw, project, and interact with your shapefile. I add the retrieve operator on the counties, and I also apply a coordinated visualization with the parallel coordinate plot (PCP) that allows you to toggle different variables and compare their values to other counties.


Proportional Symbols with Leaflet


Caution! NOT SUPPORTED by Internet Explorer. Please update to a modern browser like Chrome, Firefox, or Opera. Thank you.


Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps. It is developed by Vladimir Agafonkin with a team of dedicated contributors. Weighing just about 28 KB of JS code, it has all the features most developers ever need for online maps. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while still being accessible on older ones. It can be extended with many plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.

It was my goal to 1. implement the retrieve operator, a popup window that displays point data, 2. implement sequence controls and vcr controls, and 3. dynamically update the legend, using the Leaflet framework. The data was acquired from the Madison Police Department and covers a time period of January, 2012 to October, 2012.

Back to top



Icon Design with Google Maps



The Google Maps API is the most commonly used web map service for the creation of slipply map mashups, and arguably is the most robust in terms of the range of supported functionality. The service is proprietary, however, and carries with it many restrictions of use (including a maximum number of website visits before Google charges for use of its web mapping service).

It was our primary task to create a set of icons for the Google Mashup that could easily be distinguished and interpreted. I created design of the icons usign a 16 X 16 pixel layout in Adobe Photoshop. At this scale we have a better sense of the limitations of the icon design once it is rendered in the HTML. We can then attach the images to the Google Map using the API documentation.

Back to top



2012 Election Mapping Technique Analysis



Here, I present a model for representing election maps as a guide for cartographers to select a method of representation that best meets this combination of variability and visual weight in the enumeration unit with the goal of progressing the comprehension of alternative election map techniques. This work relies heavily on the work of Dorling, Roth, Gaster and Neuman.

I define "Electorate Variability" as a continuum of values from a binary classification "red versus blue" to a perfectly continuous surface of electoral diversity. Intermediate stages of this continuum are changes in color value, changes in color hue, and value by alpha as well as changes in the thematic representation techniques from a discrete, abrupt representation to a continuous, smooth representation, e.g., proportinal symbol, dot, choropleth, etc..

Visual equalization, or adjusting the social variable visual weight to emphasize its importance can also be extended to the spatial resolution of the dataset, in this case using smaller enumeration units. A finer resolution such as county level data can emphasize urban areas versus rural areas, especially when we add a value-by-alpha layer, rather than generalizing the electorate to the state level, therefore, I include it in this model as equalization.

Back to top



Tracking the Flu on Twitter



The core of my thesis research at the University of Wisconsin-Madison is focused on gathering data from Twitter in order to better understand social phenomena geographically. The micro-blogging service Twitter is a social media platform that allows users to share opinions, links, and images in 140 or fewer characters. There are a variety of privacy settings involved with all social media platforms. One option that Twitter allows is the ability of users to display their Tweet Location .

To create the choropleth Illness Index in ArcGIS I normalize the map units by dividing the incidence of "sick" tweets by the total tweets per county. This will return a right-tail skewed distribution (hopefully; otherwise we have a serious pandemic occuring!) in the range of 0.0005 - 0.5000 (*100 = % sick). The best method to classify this type of distribution is the geometric interval because the distribution mimics a geometric series and this classification will best optimize that type of data range, ensuring that each class range has approximately the same number of values within each class and that change between intervals is fairly consistent (help.arcgis.com). Finally, I do manually tweak the interval, setting a break point on the mean so that I can create the following divergent (above/below) scheme.


Classic Thematic Mapping Creating visualizations for print media

The foundation for my design is rooted in traditional cartography. I have made it my specialty to produce all of my static maps and visuals in less than an hour, an exercise in serving the public graphic information in as timely a manner as possible.