Friday, August 14, 2020

Choropleth Paintings



Earlier this week, while reviewing Map Mercer (which is an interactive map portrait), I joked that "I definitely haven't spent the last few hours trying to work out how to use hexbins to create my own pixelated interactive map portrait". Which of course is exactly what I had been doing.

In fact this week I have spent more than a few hours thinking about how to hexbin a photograph. Or, in other words, how to overlay a hexbin on top of an image and retrieve the color of each hexagon. My thinking is that once you have the color value of each hexagon it will then be a very simple process to overlay the completed hexbin portrait on any location on Earth using an interactive mapping library.



Unfortunately I'm not clever enough to actually code this process. Fortunately, however, the Internet is full of people far cleverly than I am. For example there is Datawrapper's Elana Levin Schtulberg. Just one day after I started wondering about how I would begin to paint pictures on maps Elana published a number of examples of interactive maps which are also pictures. And of course Elana's solution to how to draw pictures with maps is much more elegant than my idea of painting with hexbins.

In Painting by Numbers Elana has created a number of pictures by coloring administrative level geographies as choropleth visualizations. Her examples include London MSOA boundaries colored to create a picture of Big Ben, New York's electoral wards colored to create a picture of the Empire State Building and Berlin's electoral districts colored to create an interactive map painting of the Brandenburg Gate.

1 comment:

Anonymous said...

my take on this : http://www.colors.ovh/polyraster.html
example : https://imgur.com/b6tNNMg

1 - upload a geojson
2 - upload an image
3 - adjust image (scale / pan)
4 - apply

used :
- leaflet for displaying geojson
- fabric.js for scaling/panning image
- paper.js for computing average color for each polygon