Visual story about a Zebra (d3.js + animal movements)

I was on adding some data related cover image to this blog and I found a database about animal movements.  They are tracking several animals all over the world and the tracking data is publicly available. After short browsing I downloaded the track record (.csv) of a Zebra in the heart of Africa.

As I was interested only in the time and position data I made some preprocessing in python. The final output was 4 data columns: the longitude, latitude, the seconds to the next tracking point and the hour if the day. I included the sample code if you are interested in the details:


Finally I just included the result in the JS file as a JS array. After we have the data points in an array it's quite easy to draw the tracking points. Of course I wanted to use d3.js as it is my favorite visualization "tool" :)

The idea was not just simply draw the points but additionally:

• Small arrows display the directions.
• The size of the points are the function of the time elapsed to the next tracking point. If the tracking points are recorded more rarely the points are bigger.
• The color of the points depend on the time of the day when the tracking events were recorded. Green for the early morning, yellow for morning, orange around noon, read for the afternoon and purple for nigth.

So instead this:

Something like this:

Datails about the d3.js code:

Nodes are generated with gradients to make them really nice. And also partially transparent to visualize overlapping. Here is a magnified part:

This circles are drawn like this:
The connection of the circles was a bit mor complicated. Originally I intended to use svg path for the lines, but with it I had problems to drow the small arrows so I had to draw each line separately.

You can check the endresult in the header ;) It was also interesting to see that the visualization inspired ideas about the locations: The big yellow and orange circles are located mostly around a limited area in lower middle part. Probably there is a pasture or some water where is a good place for the zebras to spend the day. Interestingly the zebra is wandering a lot in the night and early morning. I also think they are sleaping at a different location than they are spending the day at. Of course this are just presumptions but it was good to see that a more sofisticated visualization can tell so much more about the data.

The full image: