August 15th, 2012

Images as datastore

In two current projects, we use images as a datastore in parts of our processing timeline, and that proved quite handy, so I thought, I would briefly share the technique with you.

In the emoto project, we use 2D matrices to store how many tweets (brightness) fall in which sentiment category (vertical) over time (horizontal):

This is not exciting per se, but the trick here is that we use this as an elevation map for the 3D models we produce for the data sculpture. So the images are only a “messenger” between two processing steps – data analysis and the 3D modelling tool. Yet, in this form, it is much more easy to detect gaps, and get a glimpse of the data structure immediately. Also, think about it this way – if your database is an image, you can apply image transformation techniques to modify your data! (Think enhance contrast, minimum/maximum, slicing, blurring,…) What can be very difficult numeric operations if only working with numbers, can be very simple operations in Photoshop, and, again, the result is immediately inspectable. The catch is, when working with grey scale, you have only 256 steps available – but in our case, that was enough.

The second image trick is to use color as an identifier code in a 2D matrix. For instance, you might want to check in which country a certain point on earth is. You do have a list of polygons for each country, but how inefficient, error prone and tedious it is to loop through all of them, and calculate a hit test with a polygon… Also, how do you calculate a hit test with a polygon, anyways?

Now here is an incredibly simple way to do it: Pick a unique color for each country. Go through all the polygons of a country and draw them on a simple map mapping lat and long to x and y coordinates in the desired precision.

Now, for any point on earth, you just need to look up the color of the pixel belonging to its map coordinate, and – there you have the code of the corresponding country. Very handy! Again, all the difficult data processing has been taken care of by the image processing algorithm..

So, next time you have a tricky data transformation issue to solve – maybe image processing can be part of the solution! I am sure there are many more tricks along these lines to discover.

( + Thanks to Stephan and Steffen from Studio NAND for developing these workflows with me!)


13 Responses to 'Images as datastore'

Subscribe to comments with RSS

  1. Christoph
    August 15th, 2012 at 4:36 pm

    Really great ideas! Thank you for sharing these.

    About that 8-bit limit: You can just switch to 16-Bit Images. And if you want to stay in the programming environment for image manipulation ImageMagick is a quite interesting tool.

  2. Nelson
    August 15th, 2012 at 5:01 pm

    The wizards at Trulia take this map color lookup trick a step further; they use it to generate dynamic chloropleth maps by looking up individual countries (or counties) in Javascript and then recoloring them. I wrote up the technique here:

  3. Flavio Curella
    August 15th, 2012 at 5:40 pm

    Very interesting point about the transformations, but I don’t get the world map use case.

    Getting which country a specific point belongs to it’s not that hard. You could use GeoSpatial databases like PostGIS, or geolocate using an API like Google Maps

    Also, mapping lat/long to x/y coords is never going to bee 100% accurate, because a) one is angular while the other one is cartesian and b) the Earth is not a perfect sphere. Of course, the error might be small enough to be insignificant to your specific application, as it’s probably the case if you’re dealing with whole countries.

  4. Moritz Stefaner
    August 15th, 2012 at 6:27 pm

    Well, it is a real-time lightweight way of responding to clicks e.g. on a globe or a map. You would not want to keep a huge DB around for that or query Google maps everytime the user clicks, right? One thing I forgot to mention – this is an old general technique used quite often in e.g. processing: you maintain an (offscreen) bitmap image, which serves as lookup for which screen coordinate corresponds to which GUI element, when clicked. Here, drawing order solves the problem of z-stacking, and again, potentially expensive geometry calculations… Not sure how the technique is called, though (clickmap?).

  5. Moritz Stefaner
    August 15th, 2012 at 6:41 pm

    Via Cedric Kiefer :

    “also a common technique for 3d picking, mostly called color buffer, selection buffer etc…

  6. Michal Migurski
    August 15th, 2012 at 6:47 pm

    Love this technique! It’s especially helpful for tiled map data, where you can take advantage of an existing pattern and zlib compression in Pngs to boot. We used the full 24 bits of rgb data for MySociety’s never released mapumental project 4 years ago, loved the flexibility and built TileStache to make it easier to do.

  7. Flavio Curella
    August 15th, 2012 at 7:31 pm

    @moritz: Yeah, in that use case, it’s probably the only feasible way to go, and the faster speed greatly overcomes the error that this technique introduces.

  8. Moritz Stefaner
    August 16th, 2012 at 9:48 am

    Just for reference, more excellent pointers for this and related techniques:

    @shashashasha @moritz_stefaner similarly I use this img to instantly obtain the equidistant curve to all nuclear plants…

    — Santiago Ortiz (@moebio) August 15, 2012

    @moritz_stefaner we also did this at Movity, encoding values into RGB: for fast interactive maps:

    — sha (@shashashasha) August 15, 2012

    @moritz_stefaner yep! in that screenshot G is nearby bars/restaurants, R is number of crime reports, B channel is average rent

    — sha (@shashashasha) August 15, 2012

    @moebio @shashashasha @moritz_stefaner travel time:… & house prices:… from…

    — Tom Carden (@RandomEtc) August 15, 2012

    @randometc have you seen FastBit? /cc @moebio @shashashasha @moritz_stefaner

    — Andrew Turner (@ajturner) August 15, 2012

  9. Jacob
    August 16th, 2012 at 3:50 pm

    Is it safe to assume this might be called the QR code projection in beginner cartographic circles?

  10. Jan Willem Tulp
    August 20th, 2012 at 10:30 am

    I also wanted to mention the 3d picker method, mentioned by Cedric Kiefer. In this Processing book the technique is also explained:

  11. […] from GIS shape files to country meshes ready to display in Flash. As intermediate steps, they used images as datastore. For instance, the subdivision size is governed by a bitmap where the borders are painted with […]

  12. unannoyingly
    May 26th, 2014 at 8:52 am

    Keylogger software allows you to read messages sent, emails written, websites visited and anything else typed on the keyboard.
    To the one hand, the hand-relaxation regions proved being quite resistant, whereas the keyboard gives way
    near the middle and over the DVD generate. An excellent a prime
    gaming computer video card will price tag hundreds of bucks.

  13. insure your gadget
    April 2nd, 2017 at 1:09 am

    I love reading through your internet site. Thanks a lot!