I quite enjoy learning about flags and try to pick one up as a souvenir whenever I visit a new country. A couple years ago, I stumbled upon an online community of other flag lovers, and stop in from time to time to see what’s new.

Recently, I stumbled upon a post that had a really cool concept. What if you filled in each US state with a flag of another country with roughly the same population. The result puts a lot of things in perspective, for instance, just how populous some US states are, as well as how small many countries are compared to the United States.

I was a big fan of the post, and decided to recreate it using D3.js. D3 is a JavaScript library for creating dynamic visualizations based off data. In this case, I am using GeoJSON data for the United States, and a list of states, country flags, and some extra population information.

I’m no D3 master (yet), but once I got the map set up and the images downloaded, most of the state flags fell in to place without much fuss. I really like this concept and would like to explore it with other concepts (GDP comes to mind, though I don’t want to stroke California’s ego too much…)

I’ve put the source code on Github, and I’m open to any improvements or corrections. Let me know in the Github issues or the comments below, or drop me an email.