Keyboard Layouts

The following keyboard images are not actually images. They are built using div elements and CSS grid. The grid is 29 columns by 5 rows. Most of the div elements span two columns. Each div has a column class and a row class. The column that each div starts at is calculated in CSS. The div elements of class, col-1, have a --column: 1 variable, the div elements of class, col-2, have a --column: 2 variable, and so on. Each keyboard graphic is contained in a div with class QWERTY, Dvorak, Workman, or Colemak.

I used Awk to find the frequency of characters in 597 text files from a Gutenberg Press CD. New-lines were counted as a return key presses, and indents were counted as TAB characters. Left and right shift keys were also counted separately; capital characters that are typed with the left hand use the right shift, and characters typed with the right hand use the left shift.

The keyboards are colored as heat maps where red characters have the highest frequency, blue the least, and green average. The different keyboard layouts have different frequency graphs due to the left and right shift keys being included in the frequency count. The colors maps were generated by linearly mapping the numbers 0 through 57 to the H parameter of the HSV color space where the minimum H value is 0 and the maximum H value is 241. S and V where set to 1, and the resulting HSV values were converted to RGB.

I also applied the Awk script to 169102 code files found on my computer.