How to Make a Viral Map

The most popular interactive map of this week has to be the New York Times' How Connected Is Your Community to Everywhere Else in America?. The NYT interactive map visualizes the connections people have on Facebook and comes to the conclusion that we are much more likely to know people who live near us than those who live a long way away.

I know! You're shocked, right?

The conclusion that we are more likely to be connected to people on Facebook who live closer to us than all the people we don't know who live on the other side of the country is not exactly Earth shattering. The popularity of the NYT map may have something to do with the fact that it shows that even in these days of the internet and virtual online communities distance still matters in our social relationships. However the success of this visualization may also be partly due to its simplicity and speed. In other words it is a very effective visualization of the underlying data.

Hover over a county on the NYT map and you can immediately see a choropleth view showing the likelihood of people in other US counties being connected on Facebook to any of the selected county's residents. The speed of the map is especially impressive. If you move your mouse around the map you can instantly see how this close zone of friendship on Facebook plays out across the United States.

I believe that the viral popularity of the NYT map is partly down to its speed. This speed of interaction means that the map is both a great interactive data visualization and also fun to play with.

So how can you make a similar map?

Benjamin Td asked himself the same question and set out to create the same map using Mapbox GL. You can view Benjamin's resulting Friendship Map here. The Friendship Map shows exactly the same Facebook friendship likelihood data as the NYT map. It also allows you to hover over a county and instantly view the friendship likelihood in every other US county. Benjamin's map like the NYT map is also lightning quick.

If you want to know how Benjamin's map works then you can look at the map's source code. This shows you that the data for the map is loaded via a GeoJSON file. The map uses Mapbox's Feature State API to dynamically style every county based on this data every time the user hovers over a county on the map. The map is able to style the counties so quickly because Feature State updates the state of each feature at run-time without having to re-parse the underlying geometry and data.

This probably sounds a lot more complicated than it is. Luckily Mapbox has just published an easy to follow tutorial Live Electoral Maps: A Guide to Feature State. Follow Mapbox's tutorial and you will quickly be up to speed with creating lightning fast maps just like the NYT's Facebook friendship map.

However - I can't guarantee that your map will go viral.