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:
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.
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?
|
|
|
|
January 24th, 2008 at 7:14 am
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
January 24th, 2008 at 8:16 am
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.
January 24th, 2008 at 8:17 am
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.
January 24th, 2008 at 11:22 am
Ooh. I’m using Dvorak, though! Looks shiney.
January 24th, 2008 at 11:25 am
Would be nice if you could generate Dvorak maps, then we could compare
January 24th, 2008 at 11:34 am
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
January 24th, 2008 at 12:05 pm
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.
January 24th, 2008 at 12:16 pm
Another Dvorak user here, would love an alternative version.
January 24th, 2008 at 12:24 pm
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?
January 24th, 2008 at 1:03 pm
With IntelliJ IDEA all you need to do is press alt-space and crtl-alt-space and code appears
January 24th, 2008 at 3:05 pm
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 “-”.
January 24th, 2008 at 3:10 pm
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.
January 24th, 2008 at 4:25 pm
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?
January 24th, 2008 at 4:35 pm
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.
January 24th, 2008 at 5:28 pm
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.
January 24th, 2008 at 7:56 pm
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.
January 24th, 2008 at 11:15 pm
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.
January 24th, 2008 at 11:23 pm
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.
January 25th, 2008 at 1:02 am
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.
January 25th, 2008 at 6:15 am
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.
January 26th, 2008 at 12:43 am
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.
January 28th, 2008 at 2:44 am
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.
January 28th, 2008 at 3:06 am
Nex, good point. I wonder if you could modify the utility to have profiles for different editors?
January 31st, 2008 at 5:59 am
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.
January 31st, 2008 at 6:09 am
(Well, in my first sentence I wanted to say: in search for ‘«’ and ‘»’ characters.)
February 29th, 2008 at 4:56 am
It seems like the ;, {, }, (, and ) keys would get a lot more action with Java.