06 December 2017

Bears and data visualisation

Could a brown bear, a black bear, and a polar bear meet? The answer is: yes. In this post, I'll show you where with a data visualisation; I'll explain how it is constructed with d3.js; and then extend this example to demonstrate some more complex interactions.

Bear range

A brown bear, black bear, and polar bear could cross paths in northern parts of Canada or Alaska. We can see this in the data visualisation, below, which shows some of the (overlapping) areas over which different species of bear range. Such meetings are likely becoming more common as a warmer climate pushes brown bears further north, and polar bears further south, off of the sea ice, onto land. Sightings of polar-brown bear hybrids (grolar bears) are concrete evidence of such meetings.

Meeting points

In general, bears like to live in the north. In fact, no one species of bear lives exclusively south of the equator. The most southerly ranging are spectacled bears. These bears live in the Andes mountains of South America, and live as far south as Argentina.


Insights like these would be difficult to know from, and describe with, tables and charts. Therefore, this is an excellent use case for a data visualisation: the goal of which is to aid discovery, communicate and explain something about the world.

Web page cartography

The data visualisations on this page are built with a JavaScript library called d3.js. With this library we can load large amounts of data, and construct visual representations of it with HTML, CSS and SVG. Data can be found from an increasing variety of sources, as more and more organisations make their data freely available to everyone. Of course, we are not limited to data downloads. Data could come from anywhere: from user data, captured by Drupal; or from a web service; or from another source.

D3.js can do many things, and is particularly good for cartography. My process for making these maps is as follows: first download, or trace, the geometry (polygons). Two geometry collections are required: the countries of the world, and the known range of terrestrial mammals. To work with this data I convert it into a more friendly format, called GeoJSON. Next, I filter out all mammals, except bears. I then filter out any redundant data properties, like country names, and add some new properties, like common species names. Finally, I simplify, reduce, and compress the data into another format, called TopoJSON. My data files are now, together, less than 200KB. Phew! All I need to do now is to write the JavaScript. This involves loading the data, projecting the spherical geometry onto a plane, and generating the SVG markup. In this case, I have used an orthographic projection because they are good for displaying globes, but many different projections are possible.

Orthographic projection

Giant pandas

Back to bears, which in Asia are generally much smaller – and friendlier – than elsewhere. The areas in which they inhabit are smaller too. Sadly most species in the region are classified as vulnerable, mainly due to a loss of their habitats, which are shrinking due to human activity. Giant panda's now occupy just a few mountain ranges in central China (red area, below); there are less than 2000 remaining in the wild.

Panda country

The good news for our bamboo eating friends is that, thanks to conservation efforts, giant panda numbers are increasing again. Their status was recently changed from 'endangered' to 'vulnerable', following a 17% population increase over a decade.

Virtual globe

All of the data visualisations, above, are generated by a single script and data set. I'm simply passing in different values for width, height, zoom, rotation etc. It would be a trivial matter to provide a user interface to enable any page visitor to pass in their own values, but let's instead make a globe that's more like the real thing.

Give it a spin

This globe shows the range of black bears, and can be rotated by dragging it in any direction. The rotation applied to the globe results from the initial pointer selection and its subsequent end position. This method is made available by the d3-inertia extension, which builds upon the concept of versor dragging. The use of versors to calculate rotation, involves some complex mathematics, and we probably shouldn't go there.

Although a very simple example, if you have explored this globe, you may have guessed that there are two species of black bear: North American and Asian. They are very similar, and the most common species of bear – but they're not always easy to find. Black bears are good sleepers, and they can spend more than half of their lives hibernating. While they sleep their hearts may beat only eight times in a minute, and they can lose a third of their weight before they wake up.

I hope I have shown, above, that a data driven web page can transform a subject into something more visually appealing and insightful. There is still more that could be done with this example, like making it zoomable, for instance. There are also many other forms of visualisation that could help us to understand more about this data set.

If you're interested in hearing more about data visualisation, please send an email to my colleague: randal.whitmore@wunder.io.

Data: Natural Earth Data/IUCN Red List

Teaser image