The inspiration for this map came from an example of brilliant email marketing. There was a Disney email that went out with a giant image of Mr. Incredible (or maybe it was Wreck-It Ralph). Rendered in the background was a complicated HTML table that was shaped like the character. This made it so that the email made sense to the recipient even if they had images in their email disabled. I wish I could find the this, but I haven't been able to locate this mysterious message. This exampled evolved in my brain into the idea to make a map out of Bootstrap grids. I thought it would make an interesting constraint that would create an fun looking map.
The breakthrough moment came when I pulled up a simple image of the lower 48 united states and counted how many states across it was at the widest point. This is one of those shamefully simple spatial tidbits that you never really think about. I couldn’t do it mentally, so I had to Google image search “contininenatal USA”
I started out in Sketch with an SVG from Wikipedia of the lower 48 states in an Albers projection. When I started looking at how I would delineate the states with horizontal rows I found the curved nature of the Albers projection to be too difficult. This was going to be a manual process so I didn’t want to have to create dozens and dozens of rows in HTML by hand.
So I switched gears and grabbed an SVG in a Mercator projection. To create the grid I started placing horizontal lines wherever there was a horizontal or semi-horizontal state border that would need defined. This resulted in just 21 rows which seemed like a much more manageable task.
The limiting factor in this exercise immediately became clear when I
overlaid the 12 columns of a Bootstrap framework over top of the states.
Smaller states were immediately ruled out, and many north-south borders
were either going to be cut short or extended. For example the northern
panhandle of Idaho is completely eliminated in favor of making Washington
and Oregon two Bootstrap columns wide. Only
New York and Maine make it onto the grid
in New England.
After delineating all of the rows, I started defining the states by coloring in the resulting grid. Surprisingly there weren’t a lot of tough calls on where the resulting states would end up.
After the shapes were drawn in Sketch I started planning the HTML and
CSS development. I knew that I had to have classes for each row with a
min-height so the map would scale vertically. A future version might
have a fixed row height based on
@media query breakpoints.
I measured the total height of my drawing and the heights of each row to calculate what the percent of the total height each row was and wrote that into the CSS classes.
I also had to define colors for each resulting pseudo-shape. I used the 4-color rule of cartography to pick numbers for each state shape. I defined four color classes in CSS and picked a set of colors from color.adobe.com.
This completed the planning work and now it was time to write the HTML. Following along across each row in the Sketch file I defined the states by setting the number of Bootstrap columns for each state and it’s corresponding color class.