Tuesday, December 3, 2013

My first choropleth map

I just want to show some SVG features. I made a map of the Netherlands where the provinces are colored determined by the number of inhabitants. I've been reading Visualize This by Nathan Yau (from FlowingData) and looking at the examples about maps I figured I should try it out myself.
I wrote a small R script to go from a list of inhabitants per province to a css list of gray tints.
A SVG map of the Netherlands was easily found on Wikipedia. This is just a great source of empty maps in vector format, where paths and groups already have id labels which you can use. In Inkscape I edited the paths so that there was only one path per province.

Since I know little to nothing about HTML, CSS, SVG coding (yet!), it took some time to find a way to use the list I made of gray tints with the fill features for every path without filling it in by hand. In the end put a group around every province path and added a 'class' with the name of the province, i.e. class="Drenthe".
To change the fill color I put the following in the style section of the SVG:

.Drenthe{fill:#202020;}

I'll put the SVG below so you can check out the details by downloading it and opening it in your own favorite text editor (notepad++)

So looking back on this small project I guess you always need to put some effort into preparing your data (getting grays in this case), but also into preparing the map. The map already looked good, but beneath the hood I had to do some work. Now it's possible to put in a new list of colors and your new map is ready. Since I have the R script to produce such a list it would only take me a couple of minutes to get a brand new map.
I added some hover functionality to test that and it works, but this is of course from a nice looking map. There's no title and no legend, but those are things to look for in the near future. P.S.: I forgot that older versions of Internet Explorer don't support SVG, so if there's no map below that's probably it.

image/svg+xml Drenthe Overijssel Gelderland Utrecht Noord-Holland Limburg Flevoland Friesland Groningen Zeeland Zuid-Holland Noord-Brabant

Tuesday, November 19, 2013

Utilities Problem

You maybe have seen this puzzle before, but perhaps don't know the name. It's a nice puzzle where you can think really hard or just try drawing solutions. I like that in a puzzle. In it simplest form the puzzle looks like this:
image/svg+xml
And when you connect all the top circles with all the bottom circles it looks like this:
image/svg+xml
But the aim of the game is that the nine lines don't cross. That basically is the Utilities Problem also sometimes called the Water,gas and electricity problem. If have never tried this before stop reading, start drawing and have fun. If you have tried it before, please continue.

The next level...

While browsing through some YouTube video's I was looking at a video on the Numberphile channel. This has some entertaining video's on mathematical subjects which are still fun even if your not that into math normally. Long story short, they had a link to a website that sells math gadgets and it's called Mathsgear.
One of the products they sell is a mug with the Utilities Problem drawn on it. So check that out, because it's a really nice twist to the problem.

And beyond

You've hopefully thought about that mug. Maybe even tried it on a real mug. All you need is mug and a whiteboard marker, so nothing is stopping you.
I myself drew houses and utility symbols on my mug, tried lots and lots of lines and felt smarter in the end. I guess it was two days after the puzzling and annoying colleagues that a thought occurred to me. What if the puzzle was on a t-shirt? It would already be cool just have a puzzle on your shirt, but now the shirt is part of the puzzle. I don't want to spoil to much and just show the result. I added an extra utility but that is vital in any modern household, internet. This make the puzzle a bit harder. And no, it isn't wireless so don't try cehating. My drawing of the puzzle looks likes this:



image/svg+xml
I put the t-shirts in my own t-shirt shop Core Business. Could make a nice holiday present (hint hint).

Wednesday, November 13, 2013

New Scientist T-shirts

In June 2013 the dutch version of the famous magazine New Scientist was launched. If you're into scientific news articles that go a bit deeper than most popular scientific magazine this is what you should read.
They have a webshop on their site filled with scientific books and dvd's and the works. To broaden their assortment they wanted to add funny and science related t-shirts.
Luckily they thought of me. I presented a number of ideas and they picked three designs which I worked out.
I'll put the designs here below and add a few lines of explanation.

Pitruvian



So this design is inspired by the Vitruvian Man by Leonardo da Vinci but with π. I really like how it worked out in the end. The idea of π combined with this shape has been done before (which I found out after I sketched it, go figure), but these were more focused on the whole old paper, sepia, blotchy ink feeling.
What I thought was important was the symmetry of the shapes. I wanted to keep it simple with just three colors and to make sure it looks natural in a way. I finished the whole thing of with this worn, grunge look, but that process is something I intend to discuss in a future blog entry.

Chemical Warning Sign



OK, this shirt is all in dutch but I think it speaks for itself. Beware of content, the person wearing this shirt is dangerous. If the warning signs don't alarm people it will at least hurt their eyes because it's really bright.
There are a couple of things I personally like about this design. First of all I managed to use only one color to create this effect of a warning sign which looks like you could find it somewhere on a wall. Really using that black background as part of the illustration. And second, I really like to old-fashioned triangular warning signs. They are really what I have in my memory as a symbol for danger. And of course the fact that these properties are applicable to human behavior.

Super Computer


Inside your head is a beautiful machine that works constantly and makes it possible for you to do stuff like reading, solving puzzles, riding a bicycle or  <fill in your favorite pastime>. So this is an ode to brains.
I loved and hated making this. Loved the idea and the result, hated the work in between.
Sure I could have done things easier, but hey I'm a perfectionist. A lot of time went into finding the right way to make this design come to live. I just started with the basic idea of an picture of a brain and the fact that is a supercomputer. But the one thing that took the most time was me wanting to have that same worn look on the image. My laptop disagreed but now we are friends again, let's leave it at that.

So that are my designs that are for sale now via this facebook shop or directly from Spreadshirt. I'm not saying you should buy them, I'm just saying they are totally awesome.