Geovisualizations for dialect data with D3

Workshop on European Dialect Syntax VII

Universität Konstanz, June 13-15, 2013

Thomas Mayer / thomas.mayer@uni-marburg.de

Three major goals of visualization:

  1. presentation
  2. exploratory analysis
  3. confirmatory analysis

John Snow’s
“dot distribution map”

Source: Wikimedia Commons [http://en.wikipedia.org/wiki/File:Snow-cholera-map-1.jpg]

Why build (geo-)visualizations in the browser?


  • JavaScript is the language of the modern browser. As such, it is the most installed language in the world: the one language you can be confident is installed on the user's computer.
  • Similarly, all modern browsers (with the introduction of IE9 in 2011) can render Scalable Vector Graphics (SVG), including mobile devices that are unable to render Flash.
  • Together, the combination of JavaScript and SVG allows us to create sophisticated charts that are accessible by a majority of Internet users.


Source: Dewar, Mike. 2012. Getting Started with D3. O’Reilly Media, p. 1f.

In sum

A web-based (geo-)visualization...

  • does not require any additional software (modern browsers are installed on almost all computers)
  • can be easily published on the internet (with no additional plugins needed)
  • can be easily enhanced with interactive features (e.g. mouse-over, mouse-click, etc.)
  • uses open-source technology
  • is scalable / can be zoomed in
  • can be exported as PDF
  • uses SVG (scalable vector graphics)
  • is easily customizable

Data visualization is a process of mapping data to visuals

what kind of data do we need?

  • geocoordinates of your locations
  • a suitable framework to make geomapping easy
  • polygons for displaying countries, continents of the area

Some useful tools


[press down arrow to see Google Earth example and Hessen Dialekterkenner]

Integrating .kmz files in Google Maps

https://maps.google.de/maps?q=https://dl.dropbox.com/u/4107474/Imperativ_von_sein.kmz&hl=de&t=h

  • q is the URL of the source file
  • hl is the language code (e.g. de=German,en=English)
  • t is the map type ("m" map, "k" satellite, "h" hybrid, "p" terrain, "e" GoogleEarth)
  • z is the zoom level (1-20)

JavaScript and Google Maps

Hessen Dialekterkenner Demo

Other frameworks

D3 (Data-Driven Documents)

  • D3 is a JavaScript library for creating data visualizations.
  • D3 connects the data to web-based documents, meaning anything that can be rendered by a web browser, such as HTML and SVG.
  • The project is entirely open source and freely available. You may use, modify and adapt the code for noncommercial or commercial use at no cost.


Source: Murray, Scott. 2013. Interactive Data Visualization. O'Reilly Media. p. 7.

D3 geovisualization examples



[press down arrow for cartogram example]

Source: Bak, Peter, Thomas Mayer, Christian Rohrdantz, David Spretke, Miriam Butt, Frans Plank, Daniel A. Keim. 2011. Cartogram for the Areal Distribution of Languages.

Basic setup


<!DOCTYPE html>
 <html>
   <head>
     <script type="text/javascript" src="d3.v2.min.js">
     </script>
     <!-- OR -->
     <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js">
     </script>
   </head>
   <body>
     <div id="vis"></div>
   </body>
 </html>
					

Google Maps with D3

World map

Naturaldata with D3

Source: http://bost.ocks.org/mike/map/

Datamaps

Europe

References and tutorials

Thank you for your attention!

http://th-mayer.de | thomas.mayer@uni-marburg.de