As American as Baseball and...Twitter Maps!

Many things herald the long-awaited arrival of spring - sunnier weather, leafier trees - but no springtime event is more exciting to baseball fans than Opening Day! On an appointed day in April, all 30 Major League Baseball teams open the new season enthusiastically with 15 back-to-back ball games.

While our Madrid office tends to pay more attention to another kind of “‘bol” sport, this year’s MLB Opening Day was super exciting for us in CartoDB New York because MLB asked us to create a series of Twitter maps for each and every opening day game! How often does baseball and cartography collide?! Mapping Tweets for each team’s hashtag during their game turned out to be a great way to visualize the ferverous excitement of fans and even uncover some interesting stories. Take a look at what we found!

First Up: St Louis Cardinals vs Chicago Cubs

This was one of my favorite maps of the day simply because of the sheer size of activity we captured - over 125,000 Tweets, more than any other game. This makes sense as it was the first game, actually played on the Sunday evening before Monday, the actual opening day. This timing also probably gave more fans a chance to watch and Tweet along - not everybody gets to watch baseball while they’re at work on Monday like we did at CartoDB! There are also three distinct “bursts” over the course of the game that correspond to the timing of the three runs by St Louis.

Small City Pride: Milwaukee Brewers vs Colorado Rockies

This map isn’t super interesting at first glance, but I liked it just because of how clearly it shows the dedication of Milwaukee and Wisconsin-based fans to their home team. The game came early in the day, so only around 10,000 tweets were sent pertaining to the game, and it was a 10-0 shutout by Colorado. But just look at how brightly most of Wisconsin shines with that yellow hue…

“I thought we had a roof”: Atlanta Braves vs Miami Marlins vs The Weather

When I generated this map, it left me scratching my head for some time. Somewhere around the time of the second inning, there was a country-wide, sustained burst of Tweets specifically for the Marlins, in orange. What happened there?

Turns out, Marlins Park is a modern stadium built in 2012 with a retractable roof to avoid rain delays. Except that retractable roofs don’t actually save you from the rain if you leave them open. Marlins’ President David Samson started the game with the roof open, and “tried to predict that a cloud would go north and it went south on top of our ballpark,” pelting the stadium with precipitation in the second inning and delaying the game for 16 minutes while the roof closed, as reported by Fox Sports. This 16-minute delay corresponds almost exactly with the orange burst in our Torque map. Add to that its comical nature and that the name of the stadium, “Marlins Park”, is the same as the team hashtag we were collecting, and you can see how we captured a bevy of Tweets from across the country from people who may have heard about the incident but didn’t start out watching the game.

This just goes to show there are stories to be uncovered everywhere, and CartoDB Twitter maps can help you find them.

CartoCSS Deep Dive: How we made the maps

This was a demanding project as we had to download Twitter data and create a map for MLB just minutes after the close of each game. With the help of a CartoCSS template we developed that we could quickly copy and paste, CartoDB more than proved to be up to the challenge!

Key parts:

• We used CDB_Math_Mode as the Torque aggregation function, which determines the “mode” (statistics for “most common value”) of the column you give it. In the case of two-category Twitter maps like these, category_name works well.

• To make the bubbles “grow” and fade in, we employed a series of frame-offset rules. Animated Torque maps consist of a number of frames played over a number of seconds (each set by -torque-frame-count and -torque-animation-duration). A frame-offset lets you do something a few frames before or after the main frame the feature/Tweet shows up in, so you can do fade-ins and fade-outs by changing the marker-fill-opacity, or give a “fireworks” effect by changing the marker-width property.

• marker-fill sets the color of the dots. We had a pre-approved list of hex colors for every team in MLB, so updating each map mostly involved just changing these values!

/** torque_cat visualization */Map{-torque-frame-count:256;-torque-animation-duration:15;-torque-time-attribute:"postedtime";-torque-aggregation-function:"CDB_Math_Mode(category_name)";-torque-resolution:2;-torque-data-aggregation:linear;}#twitter_braves_marlins{comp-op:lighter;marker-fill-opacity:0.6;marker-line-color:#FFF;marker-line-width:0;marker-line-opacity:1;marker-type:ellipse;marker-width:3;marker-fill:#FF9900;}#twitter_braves_marlins[frame-offset=1]{marker-width:3;[value=1]{marker-fill-opacity:0.1;}[value=2]{marker-fill-opacity:0.3;}}#twitter_braves_marlins[frame-offset=2]{marker-width:7;marker-fill-opacity:0.08;}#twitter_braves_marlins[frame-offset=3]{marker-width:9;marker-fill-opacity:0.05;}#twitter_braves_marlins[frame-offset=4]{marker-width:11;marker-fill-opacity:0.025;}#twitter_braves_marlins[frame-offset=5]{marker-width:13;marker-fill-opacity:0.02;}#twitter_braves_marlins[value=1]{marker-fill:#CE1141;}#twitter_braves_marlins[value=2]{marker-fill:#FF6600;}

The Best Tweet of All

Once we were done creating all the maps, MLB’s videography team put together a great 45-second video that captured the entire Opening Day Twitter bonanza, and tweeted it out on the main @MLB account!

What Twitter maps will you make?

Happy Mapping!