D3: keyboard project

After talking to Ellen last week I made a couple changes to my plan — mainly adding Ellen's suggestion which is to allow users to test their own text. I added this functionality and another keyboard that shows the normal distribution of characters in the English language. I'm working on calculating the percentage of similarity between the user's input and the "normal" one because I think having one number to sum it all would be nice.

‍

Github repo | Live link

‍

I also added hover functionality that shows the percentage of occurrence per letter. I realized it's not always relevant to distinguish between uppercase and lowercase letters (it might be relevant in the case of passwords, but not so much in other datasets). So I added the option to either display lowercase and uppercase, or just one of them, in which case the calculation would take into account both as if they were the same letter. I made further improvements to the function that creates keyboards, so now I'm able to also specify the color scheme and the keyboard layout.

At some point this project started to become more of a tool making project rather than a data vis project as I was thinking a lot about how to make this work for as many use cases as possible. I guess it's part of it, but in the time I have left I hope to focus on the actual data visualization side of it.

‍

‍

I researched a little about how to scale the colors, and went with a square root scale for the password ones, and linear scale for the english letter frequency ones. This is a little tricky to handle efficiently as the colors are calculated differently for each scale and requires further adjustments in some functions like the one that decides the text color.

‍

Another thing that came up during my meeting with Ellen was to maybe try and experiment with the keys' sizing rather than their color — have the sizes of keys correspond to their frequency. I think having a series of these that differ in the datasets they're visualizing could be interesting. This is a bit more complex to build computationally / dynamically, so I'm not sure yet how this is going to work but I guess some css grid might do the trick.

‍

Next steps:

1. Continue researching scaling methods and figure out how to implement easily changeable scales.
2. Try more datasets as previously mentioned (and more forms of keyboards)
3. Figure out how to calculate the percentage of similarity between the user input and the existing english letter frequency.
4. Try displaying the keyboards on a smaller scale or in a different form that allows the user to view a few of them at once. I think being able to compare the different distributions would be interesting.
5. Figure out the layout and design for the final outcome.

I might have to start prioritizing at this point as I'm not sure this is all feasible in two weeks but we'll see...