Introducing the Bitly Media Map!

Last March, Bitly teamed up with Forbes to produce a data visualization which looks at how 15 media properties are being disproportionately consumed online on a state-by-state basis over the month of April.  We had various preconceived notions of which state’s residents are more likely to consume news sites from certain newspapers, televised news, news magazines and online-only news properties.

For example, we believed that Fox News had a stranglehold on the south of the U.S., though maybe CNN might be able to take Georgia with their hometown advantage. We also thought that online-only sites, such as the Huffington Post, would not have the geographical bias of consumption in the same way that regional papers such as the Chicago Tribune or the Los Angeles Times would.

While the visualization and analysis over a month’s worth of data answered many of our questions, it inspired us to ask more questions that could not be determined with such a static/bulk data approach. The static visualization did not allow us the ability to determine if publishers own certain states in perpetuity or if loyalty switches based on certain stories getting traction.

The previous visualization was based on one large, finite dataset.  We recently built a new version of this Media Map and this visualization is based on the Bitly stream.  Visualizing an unending stream of data presented us with a variety of challenges, of which we will explain and also dive into how we overcame them.

map

Disproportionality versus Raw Counts

The reason that we chose to visualize disproportionate traffic rather than raw traffic count is that it makes for a more interesting analysis to highlight which properties were doing unexpectedly well in certain geographic regions relative to the nation as a whole.  If raw clicks were used to rank states, the national map would be more likely to be dominated by the largest media properties from each media category, and the regional affinity towards certain properties, whether based on geographical proximity, or the content itself would be lost.

The Forget Table

The backend for the visualization is built on top of Forget Table (http://word.bitly.com/post/41284219720/forget-table). A click on a link only registers for ten minutes, after which it is forgotten. This allows us to only consider recent traffic when assigning state winners and top articles.

Building the Interactive Map

map

We heavily used d3.js, an extremely popular javascript library that enables the rapid development of beautifully rich, data-driven visualizations.  A gallery of examples of the types of things that can be built with using d3 can be found here: https://github.com/mbostock/d3/wiki/Gallery.

In order to reduce the overall size of the files loaded to render the map, we took advantage of the TopoJSON extension of GeoJSON which uses a technique that eliminates the redefinition of shared line segments representing  geographical borders, ultimately reducing the amount of data needed to generate a complete map.

Finally, in overlaying the location of the real-time click data, we again used one of the capabilities built into d3, which converts latitude and longitude coordinates (which we have stored for all clicks that pass through the Bitlyverse) to points on a rendered map.  This is done using the Albers USA Projection functionality (which is explained in greater detail here).

Selecting the Media Properties

We selected the 40 media properties included on the map first and foremost because they were heavily featured in our existing data set.  We then narrowed the list down based on their footprint in the United States: high circulation newspapers, major TV news brands, etc.  A media property was placed in a certain media category grouping (TV/Radio, Newspapers, News Magazines and Online Only) based on the primary distribution outlet for that news brand.  For example, CNN is primarily a cable news channel, despite having a popular news website, so we placed CNN in the TV/Radio category.  We wanted to include more media properties but the map started to get too difficult to read in a useful way, so we had to limit each category to 10 media properties.  

And that is how the Bitly Media Map came together.  If you have half as much fun viewing the map as we had building it, well, then, we had twice as much fun building the map as you had viewing it!  (Sorry, data science joke.)  Be on the lookout for new and exciting projects from Bitly Labs!

Check out the new Bitly Media Map

Interested in what Bitly can do with your link click data?  Please reach out to us at community@bitly.com