Geovisualizations for dialect data with D3

Workshop on European Dialect Syntax VII

Universität Konstanz, June 13-15, 2013

Thomas Mayer /

Three major goals of visualization:

  1. presentation
  2. exploratory analysis
  3. confirmatory analysis

John Snow’s
“dot distribution map”

Source: Wikimedia Commons []

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

  • 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>
     <script type="text/javascript" src="d3.v2.min.js">
     <!-- OR -->
     <script type="text/javascript" src="">
     <div id="vis"></div>

Google Maps with D3

World map

Naturaldata with D3




References and tutorials

Thank you for your attention! |