The step-by-step story of making a tile grid map of Russia

Ivan Zorin
Jul 23, 2019 · 5 min read

My colleague sent me a link to a local datavis contest. Participants were supposed to figure out how to split russia into square tiles to make boxed visualizations. Like this one made for America:

Image for post
Image for post

All tiles are the same size. It’s easy to compare them, but it is more difficult to make a such map for Russia, because all subjects come in different sizes:

Image for post
Image for post
To get a closure, compare Ingushetia to Saha

It seams impossible to depict russia in tiles. So I try to use hexagonal grid. To specify, I put there some fake data, then I found a way to shorten subject names.

That’s what we’ve got by far:

Image for post
Image for post

The next evidential step is to change the hexagonal grid to a square one. Now it’s possible to get rid of the frame and to enlarge graphs:

Image for post
Image for post

Columns can be shifted into getting perfectly shaped squares layout. That actually makes it easier to compare the data with the other cells:

Image for post
Image for post

The problem is that this layout doesn’t look like Russia. In order to change that, I tried to distance the subjects of the Eastern part:

Image for post
Image for post

To make the map more crowded, I removed the horizontal gaps between the subjects:

Image for post
Image for post

The origin of the horizontal gaps is hard to be figured out. So I tried to give a couple of subjects more space:

Image for post
Image for post

Not enough, so I kept going:

Image for post
Image for post

Now the shape is ok. It’s bad to bring so much attention to some of the regions, so I tried zooming into the european part like Data Laboratory did in some of it’s projects:

Image for post
Image for post

That makes sense:

Image for post
Image for post

I like that rows of eastern and western parts don’t match, because that emphasises the idea of european part is zoomed.

Just for fun, I’m trying to make a subject flag version:

Image for post
Image for post
Sahalin (on the very right) got a great flag

It’s shape doesn’t resemble Russia, but it’s interesting to explore. It would be nice to add region names, but I’m too lazy.

To evaluate the accuracy of the tiled map I paint it’s column into different colors, then do the same for the original map:

Image for post
Image for post

It’s sick. The left bottom part is all mixed up. All the subjects should be rearranged.

I arrange and arrange and arrange. No way. As soon I fix one mistake, I bump into a couple of new ones.

A-a-a-a-a-a! Russia is crooked!
(╯°□°)╯︵ ┻━┻

I should have start with defining a criteria of a good tile map. It’s better late than never:

  • If on the real map subjects is on the boundary, it would better stay on the boundary of a tiled map
  • The more real subjects connections are preserved, the better.
  • Especially for the most dense Central Federal District (on the left)
  • All federal districts should preserve connectivity, not to break apart.
  • The shape of the tiled map should resemble the shape of Russia. At least approximately.

One more approach. Looks straighter now:

Image for post
Image for post

I perform the same procedure with horizontal stripes:

Image for post
Image for post

It looks less crooked. Let’s check if the federals districts did not break apart:

Image for post
Image for post

The Northern one (blue) did. Well, I let it be.

A better way of testing the tile map comes to my mind. If we connect subjects on the real map, according to their neighbourhood on a tile map, we’ll get a grid. The less it is distorted, the better the tile map is.

Image for post
Image for post

The Ural regions are definitely too high. Another problem is that eastern part shape doesn’t resemble Russia.

Image for post
Image for post
Image for post
Image for post

The west have become a bit better. But the east is stretched apart. I like it nevertheless, because AL (middle, bottom) dropped down and formed a nicely recognisable corner of the map.

A couple adjustments and… tada! The tile grid map is ready:

Image for post
Image for post
If tiles are filled, it’s possible to contract the gap between the East and the West

This map has won the contest, I’ve received a datavis book and a bottle of wine. Recently the map was used by Datawrapped and you can try it out there :-)


At Kompany we make interactive visualizations.

Join out Telegram channel to receive datavis tips!

Reach out to hire us.

Kompany

We analyze and visualize data, build interfaces using React…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store