As you may have heard, the Super Bowl was this past Sunday. Apparently, this is kind of a big deal for sportsball fans, and thus, the SB Nation network. It’s usually one of our biggest traffic days of the year, so there is a lot of excitement/paranoia around it from the Product Team. While we were talking about all the things going on and what might happen, I had the thought that it would be cool to see a map of all the comments on our network during the game - so I made one.
In the video, comments from our Ravens community, Baltimore Beatdown are shown in purple, and comments from our 49ers community, Niners Nation are shown in red. Comments from any other community are shown in green. When there is a lot of comment activity in one area, the dots start drawing on top of each other and it’s more of dark colored blob than a colorful dot.
Between 4PM and midnight EST, we had 49,632 comments created on the SBN network. It is worth noting that only 35,861 of those are actually mapped here, since for some comments I was unable to determine location, they were not in the US, or I was already mapping something at that exact location in the same minute. Not surprisingly, most activity comes from major population centers, so it’s hard to tell who exactly they are rooting for.
The technical details of how this was made are a bit hacky, since this was just a fun side project. D3.js provides the backbone of this visualization. It was my first time using it, and I found it to be relatively straightforward and powerful. I opted to use d3.js rather than something like Processing (or Processing.js) because it has crazy easy mapping and geography support.
The data for the visualization was put together using a combination of SQL to get comment timestamps and IP addresses (which we store for every comment) from Chorus, Awk to format the result, and the geoip gem to approximate the latitude and longitude based on IP.
Unfortunately, the animation isn’t really as smooth as I hoped. I think this is partially my inexperience with D3 and SVG drawing, and partially that JavaScript isn’t the best way to animate 45,000 points. In general, I found that reducing the number of SVG path elements greatly helped the rendering. I started off rending just one MultiPoint path, but split it into many Points so that I could animate them separately. This brought rendering to a total standstill, so I started segmenting comments into buckets so that ones that would be drawn at the same time would be one MultiPoint object, and thus one path element. This helped rendering significantly. Each bucket is further divided into three MultiPoints so that they can be color coded according to community, which unfortunately made rendering a bit slower again, but the trade off seemed worthwhile.
If you want to try and run the animation yourself, the code is available here, but be warned that it runs even worse piggybacking off blocks/GitHub than it does served locally.
We’re building great things, and we need your talent! Check out jobs.voxmedia.com for our current job listings.