Visualization Tricks - Generate a Heatmap of your Keystrokes

January 23rd, 2008

The other day I noticed that the letter markings on some of my keys on my keyboard were wearing off. I thought it was pretty neat. It’s nature’s heatmap of sorts. The keys I used the most wore off the fastest.

So then I got to thinking, wouldn’t it be neat to see keyboard heatmaps for different programming languages?

I assume LISP programmers would get their parenthesis keys worn down quickly, Python programmers would show elegant wear on their tab key, Perl users would get their “#$%^&*” keys worn down ;-) and Java programmers would simply burn out their keyboards with all that verbosity ;-)

Thus the keyboard heatmap generator was born:

Keyboad Heatmap

Here are some results for generating keyboard heatmaps from samples of some programming languages.

For each language there is a standard heatmap which gives each key a color from dark blue to red depending on its percent of use, and there’s a density plot which randomly places a dot on the key for each time it was hit, thus keys hit frequently have more dots.

LISP
Keyboard_HeatMap_lisp.jpeg

Keyboard_HeatMap_Density_lisp.jpeg

Python

Keyboard_HeatMap_Python.jpeg

Keyboard_HeatMap_density_Python.jpeg

Perl

Keyboard_HeatMap_Perl.jpeg

Keyboard_HeatMap_Density_Perl.jpeg


Java

Keyboard_HeatMap_Java.jpeg

Keyboard_HeatMap_density_java.jpeg

Keep in mind these are from arbitrary code samples I found on Google code search. This certainly isn’t scientific. But you do see some of the patterns I was imagining. Look at that elegant tab use in Python! Perl is a little heavy on the dollar sign. Notice the space bar usage in Java (perhaps that implies a whole lotta typing!)

Can you come up with some other interesting heatmaps? Does your code make different heatmaps than the rest of your team? What does it look like when your cat walks on the keypad? How about a baby hitting keys?

del.icio.us |  Digg |  FURL |  Yahoo! My Web 2.0 |  Reddit

My First Open Source Greeting Card Generator

December 2nd, 2007

online_greeting_card1.png

I spent all day making this greeting card generator. It was worth it though since it will save me hundreds of dollars of not having to buy cards over my life time :-)

I’m hoping this will be useful to a lot of people. It’s amazing that there were no free online greeting card generators out there. Can you find any? I think I searched pretty thoroughly.

And it’s open source like all Utility Mill utilities. I also think the source code makes a good demo of using the Report Lab PDF toolkit. It might be worth referring to if you ever need to make a stinking PDF.

del.icio.us |  Digg |  FURL |  Yahoo! My Web 2.0 |  Reddit

Kitchen Computer Using Grocist

November 28th, 2007

Kitchen computer using Grocist

Grocist user Andrew set up a really cool kitchen computer featuring a touch screen monitor, under-cabinet swivel mount, and of course a barcode scanner. His site walks through the use cases, products purchased, and setup.

del.icio.us |  Digg |  FURL |  Yahoo! My Web 2.0 |  Reddit

How to Make an HTML Element on Your Website Disappear after 10 Days

October 13th, 2007

After October 15th, 2007 this message will disappear forever.

The text above is an example of auto-expiring HTML. (Don’t see it? If it’s after October 15, 2007, then it’s working ;-) Perhaps try viewing the source of this page to see it.)

Do you have any of these problems? If so then auto-expiring HTML may help you:

  1. You put a “new” images around new content on your website, but then forget to ever remove them thus embarrassing yourself and your community.
  2. You put a deadline for your project on a website, but if you miss the deadline, wouldn’t it be nice if the deadline conveniently disapeared from the page automatically? ;-)
  3. Your brilliant blog post made it to the front page of Reddit. You want to put a message welcoming them, but since they’ll only be around for a day, you want the message to disappear automatically by the next day.

(All these examples assume you’re lazy, and care more about convenience than bandwidth.)

Can you think of more uses for auto-expiring HTML? Please leave a comment.

How to Make Auto-Expiring HTML

screenshot164.png

I’ve made this handy utility to automatically create auto-expiring HTML for you. You enter the content you want to expire, set the number of days to expiry, and paste the output into your webpage. Check it out.

How it Works

The utility wraps a div tag around whatever HTML you enter, and puts some javascript under it to hide that div if the current date is greater than your set expiration. There’s more information about its workings in the utility’s writeup.

del.icio.us |  Digg |  FURL |  Yahoo! My Web 2.0 |  Reddit

Machine Learning and Dragons - a Game

October 8th, 2007


Here is a fun little game I wrote using Python and pygame.

The Story:

knight_dragon.png

You’re a knight and your job is to kill as many dragons as you can. The twist is that the dragons use Genetic Programming to learn from every encounter. (You can optionally have them use Reinforcement learning instead too.)

Dragon Fighter Pygame - Machine Learning - Genetic Programming

You can download the source code and all files needed to run the game here (8.6 MB, GPL).

To run it, you just need Python and pygame installed.

Game Play:
Kill as many dragons as fast as you can.
The arrow keys move ye.
The space bar swings your sword.
ctrl+c to quit.

Discussion:

When using Genetic Programming, the dragons basically learn like this. Every dragon gets assigned a randomly created program tree. Here’s an example in LISP like syntax:

ikfm(ifle(20,knightdistance,attack(),mafk()),mtk())

Which means this:

if knight is facing me:
    if 20< =distance to knight:
        Breath Fire
    else:
        move away from knight
else:
   move towards knight

Dragons get points the longer they survive in a level, and they get a whole lot of points for killing the knight. After the end of a level, the dragons’ program trees are mixed up with each other to create new programs. program trees associated with the most points, get chosen more frequently to reproduce.

Sadly this scheme turned out not to work too well, though it does work once in a while. If you play say 20 games (not levels), you’ll probably see an instance of the dragons learning to chase you. But normally they don’t learn much of anything.

Here are some of the reasons I think the learning doesn’t go better:
1. The population is too small for the search space.
2. Even good dragons can get killed, just by standing too close to another dragon. They have no means to learn not to do this.
3. Fitness isn’t fair. If a dragon starts out far away from the knight (placement is random) he will probably live longer than a dragon closer to the knight.

If anyone wants to fix these things, please send me your patches.

I also tried Reinforcement learning for the dragons. This actually made them good at turning around when the knight comes near, and shooting fire at him. But they could never learn how to move.

Please try it out and let me know your feedback. Do you have any ideas on how to scale up this idea and make it into a fun game? Any ideas how to improve the AI?

del.icio.us |  Digg |  FURL |  Yahoo! My Web 2.0 |  Reddit