Pine Beetle Infestation 1999 – 2014 Webmap

In 1999, while many were living in fear of the infamous flop of a supposed world-ending disaster known as “the Y2K bug”, there was a bug beginning its infestation that actually did so significant damage. Dendroctonus ponderosae, order Coleoptera, family Curculionidae, or known otherwise simply as “The Mountain Pine Beetle” have devastated the pine forests of western Canada, most notably the province of British Columbia. As a province whose forest products comprise a whopping one third of all exports, this little bug has been a big problem.

I took a course in the Intl. Masters in Geomatics program at Hochschule Karlsruhe called “Time Dependent Visualization”. The aim of the course was to understand the various methods of depicting time on both static and dynamic maps. The final project was to create a static map and a web map, both depicting the same temporal phenomenon, but the dynamic map had to have some intrinsic added value. The end result of my work was the webmap “Pine Beetle Infestation in Productive Forests in British Columbia, 1999-2014”.

The map, made using Javascript (+ various helper libraries), Leaflet and d3, shows the progression of the pine beetle infestation from 1999 to 2015 using data scraped from a comprehensive report commissioned by the British Columbia provincial government. It presents the information in as direct a way as possible, while offering some additional context to help put some of the numbers in perspective. For instance, the symbols for each region plainly show the amount of productive forest it has, and how much of that is actually comprised of pine forests, which are the trees affected by the infestation. Saying “70% destroyed” can sound absolutely catastrophic, but by showing that 70% as being only 70% of 5% of total forest softens the blow a little.

A time slider at the top right, as well as a “Play” button allows the user to watch the infestation play out, and see which regions were hit when, how fast, and how long until things leveled out.

As far as interactivity goes, I added some controls for clicking on the regions. the “+” buttons will add that region’s loss over time to the left or right side of a pyramid bar chart, allowing for regions to be aggregated and compared to each other. The arrow buttons just next to them will completely replace their side of the pyramid with the next-clicked region.

You can also change the visualization method by selecting the tabs just below the “Play” and “Stop” buttons. By visualizing the data in terms of percent loss, the spatial extent of the infestation over time becomes clearer, as the viewer can see where the infestation started, and how it spread over time.

I’m rather happy with how this map turned out. I learned a lot about Javascript by making it, especially from the process linking together the map and the pyramid containers. I also started to get a lot more familiar with bootstrap on this project, which was nice because up to then I was usually making layouts manually, which was taking up a lot of time.

A static version of this map can be found in “Static Maps”:

Leave a Reply

Your email address will not be published. Required fields are marked *