Map of Japan and USA Made Using CSS Grid

I’ve seen lots of maps in Japan using a simplified minimal boxy design and I think it looks kind of nice in an elegant way and is useful for displaying information, so I thought I’d give it a try, using only HTML and CSS. Now that the need to support IE11 has decreased I think it’s safe now to use CSS grid for this kind of thing.

I also made a map of the United States using the same technique which is something I don’t think I’ve ever really seen much before.

The map of Japan is colored based on 地方 (region) and the map of the United States is colored based on “census regions” since it seems like there isn’t as much of a standard way of dividing the US into regions compared with Japanese 地方 which are more commonly used.

Maybe some time I’ll make this into a more popular react component or something. I think it would be cool to have an easy way to make these kinds of maps.