Deprecated: Assigning the return value of new by reference is deprecated in /f2/blendedtechnologies/public/wp-content/plugins/pmetrics.php on line 1192
Blended Technologies » Blog Archive » Visualization Tricks - Generate a Heatmap of your Keystrokes

Visualization Tricks - Generate a Heatmap of your Keystrokes

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

26 Responses to “Visualization Tricks - Generate a Heatmap of your Keystrokes”

  1. Carl Friedrich Bolz Says:

    I made a heatmap from all the Python code PyPy contains. Looks very much like your Python-heatmap, though:

    http://morepypy.blogspot.com/2008/01/pypy-keyboard-heatmap.html

  2. Nikolai Says:

    It’s a nice toy, but it would be much more interesting if it compared different keyboard layouts for a single language. For example, it’s a real PITA to programm on a german layout, since you have to press a combination with AltGr (right Alt key) to produce braces, brackets, pipes, tildes and @s. Also, it could produce some interesting ergonomical propositions, for example making all special characters appear without Shift und numbers with Shift, so that parens could be entered much easier for Lisp programmers.

  3. Nikolai Says:

    Yeah, one more suggestion: it also depends on your editor just how much weared your keyboard is, Lispniks wouldn’t need any closing parens if they are using proper editor like Emacs.

  4. Justin George Says:

    Ooh. I’m using Dvorak, though! Looks shiney.

  5. J. Pablo Fernández Says:

    Would be nice if you could generate Dvorak maps, then we could compare ;)

  6. Greg - CEO/Founder Says:

    Carl, that’s really cool.

    Nikolia, Justin, Pablo, those are great ideas for features. The generator is completly open to editing so feel free to implement Dvorak and German ;-)

  7. Paulo Says:

    I think this is a great idea, I’ve always wondered about this myself. My suggestion is that you use a single gradient instead of different colors for the scale. You see, the scale is ordinal and unidimensional. With different colors we’re forced to go back and forth to the legend all the time. The density plot is a good alternative, but the colored map has the advantage that you actually see what the character is.

  8. Fiona Says:

    Another Dvorak user here, would love an alternative version.

  9. Greg - CEO/Founder Says:

    Paulo, I originally wanted to do a gradient like you suggest but I couldn’t figure out how to make one :-( Any ideas how to implement that? Or at least what colors to use?

  10. idea Says:

    With IntelliJ IDEA all you need to do is press alt-space and crtl-alt-space and code appears

  11. Adrian Quark Says:

    Lisp uses the semicolon key more than Java? That sounds fishy. I know CLers sometimes use “:” in their symbol names, but surely not that often, and certainly less often than “-”.

  12. Greg - CEO/Founder Says:

    Adrian, maybe they start comments with ;;;? That’s what it looks like in the code I used. Perhaps I found an unusual dialect? The LISP link in the post links to the code I used.

  13. Mike Says:

    Yep, Lisp comments begin with semi-colons.

    I looked at the high semi-colon use of Lispers with suspicion initially too until I realized it was due to all the comments. Interesting that the comment key is used more than any other in Lisp.

    Do Lispers write well commented code or is it that they write less code and therefore comments make up a larger proportion of it?

  14. Greg - CEO/Founder Says:

    Good question Mike. We should look at some more LISP samples. I just pulled the first one I saw from Google code .. probably not representative.

  15. Rogan Creswick Says:

    re: Lisp commenting

    There is a common convention in lisp to increase the number of “;”’s leading a comment based on the scope of the comment’s content. one “;” is sufficient to create a comment, but that is very rarely used. I’ve always followed these rough guidelines:

    ; used to comment out code briefly, generally only when debugging.
    ;; used for most non-documentation related commenting. Code that you *might* want to comment back in later, or informational comments within a function.
    ;;; function/class header comments. (lisp has a couple object libraries, most notably CLOS)
    ;;;; file header comments.

  16. Richard Szopa Says:

    Really cool idea.

    Unfortunately, just looking at the source is probably not enough to get a decent heatmap. For example, your heatmap for Common Lisp doesn’t show much usage for the Tab key. However, my experience (I’ve programmed quite a lot in CL and even got payed for it a couple of times ;) ) tells me that Tab is an extremely often used key: in Slime (and nearly every self respecting Lisper uses Slime) it usually does both indenting and autocompletion.

    “:” is used in CL to make symbols in the keyword package. These are used for optional, named arguments to functions (much like “def foo(bar=1, baz=2): return baz, bar” in Python), which are common if you use CLOS.

  17. Stephen Thorne Says:

    I have 3.5mb of keystrokes logged from vim, mostly spent writing python code. Too bad the utility can’t be used for such a large dataset.

  18. Greg - CEO/Founder Says:

    Stephen, you could grab the code and run it locally. Of course with that many characters the density plot would just give you a keyboard with all solid black keys, but the heatmap would certainly be interesting. Be sure to post the result.

  19. Darren Says:

    I have noticed the WASD keys getting worn on my keyboard after a number of years. It could be interesting to do the same thing for video games. I suspect you’d need to collect that data live, though.

  20. Anon Says:

    Would look much better with a single color gradient. It’s too difficult to make sense of the current images with all the different colors.

    Also looking forward to some dvorak images.

  21. different anon Says:

    I show gratitude and even more demand for Dvorak comparison pictures…

    (even better: make it possible to change the layout and picture so that we can see what the heatmap for a kinesis keyboard would look like.)

    Also, include a map for a body of plain old English text for comparison.

  22. nex Says:

    It was already mentioned that just tallying up character counts isn’t quite accurate; here’s another example for this, from the Python world: Figuring out where to indent in Python is so trivial that every sane editor should do it for you. (Basically it’s enough to increase the indent level when the previous live ends in a colon.) Therefore, the actual number of key-presses for tab would be much lower than projected (unless you use tab for auto-completion), while the backspace key would be used much more than projected (often you start a new line and it’s automatically indented more than you want). I guess heavy use of auto-completion would also shift the distribution away from letters and more towards punctuation.

  23. Greg - CEO/Founder Says:

    Nex, good point. I wonder if you could modify the utility to have profiles for different editors?

  24. Det Says:

    Would be interesting to trace keyhits of some template programmers for openArchitectureWare. Perhaps this would be a totally equalised heatmap, as they press EVERY key in search for this damn ‘>’ characters … ;-) .

    @Nikolai (#2):

    Yes, typing code on a german keyboard is exactly why I learned to type english 10 finger system. By switching the layout everything’s easier.

    And if you have to switch inside a text very often between code an prosa, the spanish keyboard is a good trade-off. You only miss the sz sign. All coding is way easier than on german layout, and umlauts are possible too.

    For a professional coder learning to type blindly with an adequate layout is definitely worth the effort.

  25. Det Says:

    (Well, in my first sentence I wanted to say: in search for ‘«’ and ‘»’ characters.)

  26. Ronald Says:

    It seems like the ;, {, }, (, and ) keys would get a lot more action with Java.