My dad turns 65 this weekend and whilst he should be retiring he’s not and will be still pottering about in the village shop he runs. My dad hasn’t always been a shopkeeper, instead spending most of his life working as a land surveyor. Land surveyors were traditionally key members of map making teams using triangulation to plot the relationship of points. It’s perhaps not surprising then that I like to understand chaos through graphical approaches such as the mapping of data. Rob has done a wonderful tour of the OER Map prototypes funded by Hewlett Foundation, looking at how they have approached the chaos. It’s interesting to contrast this with the OER Impact Map. One of the first things to note is it isn’t just one map, the OER Impact Map site is a collection of different mapping techniques. In this post I’ll introduce each and explain how it works and the pros and cons.

Global Summary


Global Evidence Map – (Click for full interactive version)

The map is a reworking of Timo Grossenbacher Global Oil Presentation which is published under a MIT licence. The map is rendered using a visualisation library called D3.js. The map has two zoom levels and is drawn using a hosted shape file. This means that the map is drawn as a vector rather than a flat image making it easy to scale to the browser window size. This also means the map is entirely hosted by the site, which is an issue for some of the other maps used and highlighted later. A downside of this is that the standard used for the vector image (scalable vector graphics .SVG) only works in modern browsers and doesn’t work with Internet Explorer 8 or less. An advantage of using D3.js/SVG is that it’s easy to make the map interactive. The two main additions to Timo’s work are to make the map zoomable by clicking on a country and a Sankey diagram to let people see the flow of data from a hypothesis (evidence is being collated for the project around a set of hypotheses. The evidence is tagged with a polarity (positive or negative) and a sector (informal, school, college or HE). The Sankey is also drawn using D3.js as a vector graphic. This means as you resize the map you can also resize the Sankey. The map and graph are drawn using several data files: a world shape file, a map data file written in the page and the Sankey data generated from one of the sites APIs.

OER Evidence Map

Full evidence map in action – (Click for full interactive version)

The ‘full evidence map’ uses a different library to render the map and interaction called LeafletJS. Like D3.js the library is open source and can be hosted on the site. Where LeafletJS is slightly different is it is essentially a framework for rendering and interacting with maps hosted elsewhere. Specifically the map you see is rendered from images (map tiles), which in this case are hosted and created by the OpenStreetMap project. This means if this source is unavailable you will just get a blank screen with markers on. The marker data is hosted in the site using another of our API’s. This means there is an opportunity for others to render this data in other ways or on their own site. To make this data interoperable we chose the GeoJSON format and an example output is here. One of the nice features of LeafletJS is the community have contributed a long list of plugins to add additional functionality. Because we have lots of data (over 300 points and counting) we use the Leaflet.markercluster to give a summary of where the points are on a global scale. A feature not shown in the graphic above is when you zoom in and there are still lots of overlapping markers, clicking on one of these ‘spiders’ the rest of the marker out. As well as filtering the points using the top menu a results box lists all the markers currently being displayed. This summary list is rendered using another visualisation library, Google Charts. Unlike the previous libraries Google Charts isn’t open source and is a visualisation service hosted by Google. The reason for taking a risk with a hosted service is we were able to quickly get the functionality we needed with very little extra code.

Hypothesis Summary Map

Hypothesis Summary – (Click for full interactive version)

For each of the hypothesis summary pages we see the return of the D3.js powered Sankey diagram. This time the Sankey is joined by a geo heatmap rendered using Google Charts. Google Charts has a number of chart types you can use and in this example with combine a Geochart with a table. As highlighted earlier there are risks associated with using service based visualisation tools. The benefit in this case is Google Charts can detect the type of browser you are using and render a suitable map based on that information. Google also make it very easy to link interactions so if you click on a country in the map it highlights the appropriate row in the table.

Tweet Map

#oermap tweet map – (Click for interactive version)

Unlike our other maps our final map is unique in that all the data lives in the cloud. The #oermap tweet map is generated by geo-coding every Twitter account with a recognisable location that tweets about #oermap or the site. Data for the map is collected using a custom Google Sheet which is able to convert location names into coordinates. From this a KML location data file is published from the sheet which can be rendered in Google Maps. How long we will be able to maintain this map is unclear as it only works in the old (classic) version of maps, but given our work with the LeafletJS library there is scope to render this data in the oermap site.


So you’ll see the strength of is not that it’s just about a map, it’s about different maps fulfilling different purposes often linked to other chart types designed to give more insight into the OER Impact Data. As all these maps are rendered in the browser the code is viewable if you are prepared to go sniffing about. Alternatively the code for all these maps and other OER Impact Map features is available on github. As always your feedback is highly valued 🙂