Ivan Zorin
Jul 23 · 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:

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:

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:

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:

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

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:

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

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

Not enough, so I kept going:

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:

That makes sense:

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:

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:

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:

I perform the same procedure with horizontal stripes:

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

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.

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

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:

If tiles are filled, it’s possible to contract the gap between the East and the West
If there’s no background, the gap should be wider

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 and D3js

Ivan Zorin

Written by

Kompany

Kompany

We analyze and visualize data, build interfaces using React and D3js

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