0

SB Nation's Super Bowl Sunday comments map

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.

Home of the Vox Media product team. We help make SB Nation, The Verge, Polygon, Curbed, Eater, Racked, and Vox.com.

Follow us on Twitter

Flickr

view all

    Dribbble

    view all

      Vox Product Stats

      • 0Verticals Launched
      • 0Communities
      • 0Open source repos
      • 0Comments in the Last 24 Hours
      • 0Git Commits to Chorus
      • 0Product Team Members
      X
      Log In Sign Up

      forgot?
      Log In Sign Up

      Please choose a new voxmedia username and password

      As part of the new voxmedia launch, prior users will need to choose a permanent username, along with a new password.

      Your username will be used to login to voxmedia going forward.

      I already have a Vox Media account!

      Verify Vox Media account

      Please login to your Vox Media account. This account will be linked to your previously existing Eater account.

      Please choose a new voxmedia username and password

      As part of the new voxmedia launch, prior MT authors will need to choose a new username and password.

      Your username will be used to login to voxmedia going forward.

      Forgot password?

      We'll email you a reset link.

      If you signed up using a 3rd party account like Facebook or Twitter, please login with it instead.

      Forgot password?

      Try another email?

      Almost done,

      By becoming a registered user, you are also agreeing to our Terms and confirming that you have read our Privacy Policy.
      Spinner.vc97ec6e

      Authenticating

      Great!

      Choose an available username to complete sign up.

      In order to provide our users with a better overall experience, we ask for more information from Facebook when using it to login so that we can learn more about our audience and provide you with the best possible experience. We do not store specific user data and the sharing of it is not required to login with Facebook.