We first discussed creating online interactive visualizations to go with an ongoing series on suicides in Montana. The reporter working on the series had a large packet of data that spanned over several years, and we were looking for a way to present the data to online readers in a way that would not only look nice, but that would also allow readers to see the real impacts of the subject matter. I found that I could use Google’s Visualization API to create interactive charts by simply handing it the data and specifying the type of chart I wanted. I could then customize the look of the charts, and add some controls to allow readers to compare different charts.

 

The Visualization API also includes what are known as geocharts, which allow you to display data on a map in a way that illustrates regional comparisons. In our case, I created a “heatmap” of suicide rates across the country. We wanted to do the same at the county level, but unfortunately, Google’s geocharts currently don’t allow charting counties. It was challenging, but I was able to combine several technologies to mimic Google’s geocharts, using a file containing point-by-point data of Montana county outlines, and an HTML5/Javascript framework known as KineticJS. I used the data from the file to draw the outlines of each county on the HTML5 canvas, and used the KineticJS framework to allow user interaction with each county. The suicide data was entered directly into the file with the county outlines.

 

In another case, a reporter working on a story about wildlife management handed me a packet of information from Montana’s Fish, Wildlife and Parks Department, which contained maps showing the historical ranges of a number of animals native to Montana. I was able to track down the maps online and create higher-resolution versions to create a layered interactive map that would allow readers to look at how the populations of each species have changed over the years. I brought the maps into Photoshop and layered them on top of one another as best I could. This was difficult for some, as several maps were hand-drawn, and went back over a century. I assigned different hues to each species to tell them apart, and created different patterns to differentiate between years. I then exported each map layer as a PNG image, and used CSS to layer them. Checkboxes were added to allow the readers to toggle each layer and to toggle each species. This allowed the readers to compare the range of different animals (ex. wolves and elk).

 

My most recent interactive package uses the Montana High School Association’s basketball record book to show some statistics from basketball championship games over the past 102 years. I used the Google Visualization API to create column and pie charts to show which teams have won the most championships, which teams have the highest win percentage, and what the average score differential is in each game. Buttons and drop-down lists allow readers to switch between classifications and between boys and girls. I also created a fairly simple Google map that uses custom markers to show the number of championships won by each school. This also uses a data file containing all schools to allow us to continue to update the map, and to add extra data that might be used for other purposes (ex. other sport championships, student enrollment).

  

Most interactive pieces are just combinations of existing technologies, and it’s often possible to re-use code from one project to the next to save time. The visualizations provide a way for readers to see the data in a way that has a greater impact than a PDF or a table of values. The interaction isn’t always high-level, but it does give the reader a sense that they are exploring the data, and not simply reading it.

Suicide series:

Frequency of U.S. suicides, 2010

Frequency of Montana suicides by county, 1997-2011

Montana and U.S. suicide statistics

Depression and suicide assessment

 

Outdoors:

Montana wildlife distribution map

 

State basketball :

Basketball champions map

Basketball championship statistics

 

Chase Doak is a digital media programmer at The Billings Gazette. He graduated in 2009 from the University of Montana with a degree in Photo/multimedia journalism. Chase has been a web designer and programmer for ten years.

Contact Chase at cdoak@billingsgazette.com, 406-657-1309.

 

(0) comments

Welcome to the discussion.

Keep it Clean. Please avoid obscene, vulgar, lewd, racist or sexually-oriented language.
PLEASE TURN OFF YOUR CAPS LOCK.
Don't Threaten. Threats of harming another person will not be tolerated.
Be Truthful. Don't knowingly lie about anyone or anything.
Be Nice. No racism, sexism or any sort of -ism that is degrading to another person.
Be Proactive. Use the 'Report' link on each comment to let us know of abusive posts.
Share with Us. We'd love to hear eyewitness accounts, the history behind an article.