Lately, I’ve been hard at work in the Reese News Lab on a few personal projects. I’ve written line after line of code and parsed through many a data set. I’ve been the last staffer left in the newsroom most days over the last week. Despite all this work, the projects I’ve completed aren’t going to be published, and they have very little tangible use. They don’t tell a story. All of the data sets are arbitrary. There is no news value. Check out the final result of one of my projects:

If you’re wondering if it does anything but randomly change circle size, color and opacity, it doesn’t. It looks cool, but that’s about all it does from a user’s point of view. Even from a programming standpoint, it’s not very impressive.

So why all the effort? Why the late nights? What’s the point if I can’t do anything with it?

As the director of design and technology, I’m one of two student developers working for Reese News Lab. Working as a developer in a newsroom is a difficult job – code and design standards are constantly changing, and if your organization wants to remain technologically relevant, you have to keep up. In a more traditional news environment, this means learning on the job while also keeping up with the never-ending news cycle. Most of the time, news organizations end up sacrificing innovation and experimentation because they simply don’t have room for their digital folks to learn newer methods. Managing editor Alex Barinka looked at the issue of balancing deadlines and innovation in an earlier lab report.

In the lab, however, I have the opportunity and space to experiment with new frameworks (which help give code structure and organization) and libraries (which provide pre-written Javascript commands to simplify code). I get to try, fail and try again to get my programs to work. When we find awesome tools other publications are building that we want to try and emulate in our own way, I have the room to sit down with the code and figure out with my own hands exactly how they built it. And furthermore, I get to take what they built and figure out how to apply their methods (open source, of course) for projects we dream up.

That’s how the animated circles came into play. I’ve recently seen a lot of neat interactive graphics that use data to manipulate the size, location and organization of objects. After looking into what drives some of these graphics, like this one by The New York Times, I learned about the javascript library D3.js. D3.js uses data to manipulate HTML and SVGs to create visualizations based on the information they represent. D3.js is really useful, but it’s also a complex library that you can’t just pick up in a few hours. So, I sat down with the library, the API documentation and about 13 tabs of tutorials open in my browser and started playing around with all the different elements. A few days of troubleshooting and data manipulation later, and I have a grid of 40 circles to show for it.

But the point isn’t the final product. The resulting visualization doesn’t actually represent what I learned in the process of building it. The point is that I learned something new I’ll be able to use in other graphics in the future. This library, like others I’d like to spend time tinkering with, is really versatile and can be used for a variety of interactive tools and data visualizations.

My on-the-job learning doesn’t end with D3.js. In fact, I’ve already started experimenting with a few more libraries. Over the next couple of weeks, I’ll be working on a data-heavy tool that manipulates expenditures and revenue from the North Carolina budget. Before I start putting the real data to use, I’m going to explore a few different framework options to make parsing the numbers and objects much more efficient and lightweight – specifically Backbone.js and Knockout.js. The time I will have spent learning these different methods may not result in instant gratification of a publishable project, but in the long-term, it will be far from a waste.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.