Category Archives: dataviz

Exploring Interactive Text

The writing tool telescopic text came up in one of our team conversations recently, this led to a longer conversation about text and various ways in which text is represented online. This conversation made me flash back to Bret Victor’s idea of “explorable explanations” In his 2011 article he asks the question:

what does it mean to be an active reader?

In his essay Bret Victor  suggests three possible ways to facilitate active reading:

  • reactive documents: these allow the reader to play with the author’s assumptions and analyses, and see the consequences.
  • explorable examples: these make the abstract concrete, and allows the reader to develop an intuition for how a system works.
  • contextual examples: these allow the reader to learn related material just-in-time, and cross-check the author’s claims.parable




Other similar interactive visualizations can be found on

While these examples point to interesting ways to engage learners, the problem is the skills required to create such resources. Tools such as telescopic text are relatively easier to use and don’t require any special skill or knowledge to use. On the other hand creating an interactive like the parable of polygons requires some coding skills. In order for faculty to embrace and adopt  the tools will have to become more user friendly. An example of a user friendly resource is keshif  a data browser which allows users to visualize and explore data. The only step needed is to upload data via a particular format via Google Docs.  Currently I’m interested in exploring user friendly tools that can be used to augment text  to encourage active learning. Crossfilter and dc.js are two tools I’m exploring right now.

Mapping Instagram Posts

Last week I spoke with a faculty member involved in the VCU Bike Race Book project who wanted a way to map her students tweets during the course. After a couple of web searches it seems that a lot of the web services that offer tweet mapping either map just one users tweets or charge a fee for their services. Preferably we’d like to map posts with a particular hashtag/keyword and not just restrict it to one users tweets.   I know Tom Woodward is also exploring as another option.
In any case the students in this class will also be using Instagram to share so I started to look for a way to map geotagged instagram posts. I came across the Karten plugin which finds geotagged posts and images relating to specific hashtags and maps them on a google map. Karten can be used in any post or page with a shortcode and its quite simple to setup. The plugin can be downloaded from Github (zip). once installed you  need to provide the following in Karten’s settings:

Google Maps API key
Instagram API Client ID
Instagram API Client Secret
instagram API Access Token

When all of this is set up you can create a new map, select the keyword/hashtag and then embed it using the shortcode. The resulting map might look like the one above.



Initial steps: mapping with D3.JS

I have been fascinated by some of the interactive maps on the web created with the d3.js javascript library. The New York Times especially has a bunch of stories augmented with the addition of interactive maps. Some of these maps can be found on chartsnthings.

While the data determines what type of visualization can be created I think that when used well interactive maps can add rich layers to a story.  Perhaps a different type of digital storytelling if you will. The two maps below are examples of this. The first student created project below from UW Madison is  an interactive map that charts the changes in abortion rights since Roe vs Wade in America. If you were to take away the map and leave just the text, you would be left with a compelling story but the story would probably not be as engaging as before.  Likewise with the second example where a timeline integrated with the map depicts flu trends in  various US states over a period of time. Once again the addition of the map makes the story come to life.Unnamed image


After perusing these and other examples from Mike Bostock the creator of D3. I wanted to learn how to build my own interactive maps. Starting from scratch the code  seemed quite daunting but thanks to the many examples I found on the web

I managed to cobble together some code to draw a simple map with a basic tooltip interaction.

Here’s the simple map I created with D3 and how I created it


Finding Data:
The first step was to find geographical data. Initially I found some github repositories with geojson and topojson files but none seemed to have the required details needed so I tried to find shapefiles with the necessary information. These sites (below) were helpful in finding shapefiles:

I went to   and downloaded the file as topojson. I then had to edit the country names in the topojson file using After editing the json file all that was left was coding the map with d3.js.

The Code:
I must admit part of the code didn’t make much sense to me initially but after several tests and the help of Chrome’s Inspect Element feature I got it to work and I’m at the point where I have a basic understanding of what everything does. So here goes:

The CSS below styles the tooltip for the map







The next step is the projection algorithm that creates the map in a flat plane



The tooltip code (below) is setup to display information when the user hovers over a particular country.  The objects property “name” refers to the different countries in the topojson file. The information shown in the tooltip is pulled from there.




The next part of the code below references the specific topojson file

this part of the code sets up the scale for the map


The rest of the code below draws the map from the data in the topojson file







Once again a simple map but it took several trial and error attempts. Next steps will be to experiment with additional data and creating interaction on the map….using a combination of timeline sliders etc…..