Click on photo to enlarge or download: This is a screen-shot of the interactive graphic I made for my story about school finance.By Rob Denton
As you may know, I love data. A few days ago I published the findings of my first deep dive into data. And it was a deep dive.
The original idea came from a coworker who mentioned school funding issues in Nebraska.
From there, I dug around on the Department of Education website for data to complement a story. The Common Core of Data quickly emerged as the greatest source of education data. It offers information broken down by school, district and state. So, being the ambitious youngster I am, I dived into the school-level data, hoping to eventually build a graphic that would allow users to inspect state, district and school information. With more than 100,000 schools in the nation, that proved to be too tall an order.
However, it did introduce me to SPSS, a data-analysis program (with the assistance of Scripps data journalist Tom Hargrove). Then, I decided to look at district data, but that was a massive data set as well. Quickly, I realized that the data was not necessarily the story, school funding was.
Truth be told, we went through a number of story ideas before I settled on generic school funding, but that’s another story altogether. With district data too dense to easily manipulate in my short time in Washington, I turned to the state data.
By this point, I had spent a good amount of time with the data, and I knew that I wanted to show a map of the U.S. where users could click on each state and see local statistics. So I made a simple Google Fusion Table mockup that worked.
However, I wanted to create something more than the boilerplate Google map. So I took the source code from the map and the source code from a colleague’s graphic and made my own. The help that I received from those two places cannot be overstated. Without them I could not have created my graphic.
Being my first go at data visualization, the process was riddled with small problems. Here are some of the issues I ran into and what I did to fix them. My hope is that this can help out other student journalists getting into data.
* Call the source of the data.
This is just good reporting. I had been working with fiscal year 2010 data and speaking with the press office at the Department of Education. Then, a few days before publishing I had a question about the data, and the press office wasn’t calling me back. So, I called the guy who compiled the data in the first place. He informed me that the department had released a preliminary version of fiscal year 2011 data, which I was very grateful for. Publishing older data with a more recent version available would have made me look foolish.
* Get the CSV (or Excel) file if possible
Nearly every data program can work with the comma separated value file type and, any Excel file can easily be converted into a CSV. When I got the fiscal year 2011 data, it was only available in PDF from. I was able to copy from the PDF into a text editor and replace spaces with commas and make it into a CSV. While it was time consuming and tedious, the new data was necessary and sharpened my data cleaning skills.
* Make Excel work for you
To be honest, I’m a Mac person and Excel is not my favorite program, but it is extremely powerful. This summer I was exposed to the concatenate function. Without getting too technical, this function allows you to combine cells into one cohesive string, which is extremely helpful. That’s how I pulled text into the graphic. Hat tip to Matt Nelson on this one, he blew my mind when he first showed me how helpful it could be.
* Working with Google Maps API (application programming interface)
I quickly realized that I would need to inset Alaska and Hawaii in my map but had no idea how to do that. So I spent some time with the code and realized I could just draw new layers in their own divs in the HTML code on top of the main map. That realization, while rudimentary, greatly increased my understanding of how my graphic could work.
* Don’t reinvent the wheel
Seriously, use code that’s already out there to start.
* But you should update the wheel
When you use someone else’s code for your own project, be sure to optimize it for your use. Take out the extraneous code that you don’t need, but be sure not to delete anything important.
Find the variables in the code and just play with them. If you break the graphic, press undo and figure out why it broke. A lot of coders say they learned by doing, this is what they mean.
* Be responsive
Try your best to use percentages for width in your graphics. With responsive designs all the rage, it’s good to get away from absolute values.
* Validate your code
I ran my HTML through the W3 validator after I got it working. Although it was functional, I still had more than 20 errors. It’s just like writing a story and having a copy editor read it. The story may make sense and still contain AP Style errors that need to be fixed. Plus, you learn a lot from fixing your own code.
In a month or a year, when you go back to look at it, you’ll thank yourself for commenting out, or explaining, your code. And anyone using your code will thank you too.
* Give yourself credit
Be sure to include a credit for yourself. On my first graphic, I forgot to put my name on it. As a college student looking for a job in the next year or two, I need a portfolio. It may be different when you work for a large organization, but when you’re still looking for a job, always give yourself credit.