Letter frequency

For my final I have decided to focus on having multiple keyboards that visualize multiple datasets in a way that is easily comparable. I have abstracted the keyboards, removed the letter, and designed them to look more like a heat map.

I did have 2-3 failed attempts at making actual heat maps but the main issue was handling the color scaling because the data is so unevenly distributed. I didn't have enough time to figure out a way to make this that would be scalable and won't just fit one specific dataset. At some point I realized I could fake the heat map effect with some CSS... And that was incredibly faster and easier to implement.

The results can be viewed on this live website. Be aware that the site is not fully responsive at this time.

For my presentation I have also included an accompanying large poster that allows people to see all the keyboards at once (I also missed doing design work...)

I think my approach to this whole project was mostly about being positive, trying all kinds of new things and practicing writing code. I haven't learned most of what D3 has to offer, but I do however feel like I have an understanding of how that library works, and that this understanding would allow me to continue using it in different ways in the future. I'm glad I also learned a lot of plain javascript on the way. One of my goals was also to learn about data scraping, which I didn't manage to get into, but I did collect a lot of data myself and figured out more low-fi ways of doing that, like through the browser's inspect window. For example, this is how I got the list of stock acronyms. Just copying and pasting wouldn't work because it would get all the table, and I only needed one column. So I console logged it and copy-pasted from there. That has made data collection so much faster.

I also learned that a lot of the work in the field of data visualization depends on how you analyze the data and "clean" it. In my case, some of it had to do with things like uppercase and lowercase characters being counted separately or not — in some cases it makes sense and in some it doesn't. Another thing that makes a huge difference is scaling — sometimes the numbers are just numbers, but to really understand the relationship between datapoints you have to visualize them in a way that's not biased or skewed. That part was especially challenging because it sort of worked differently for every use case.

These experiences had ultimately oriented me more towards creating a tool for me to able to streamline my work. I didn't want to manually adjust every single instance I made. Rather I wanted to program in a way that was scalable and efficient. And I'm glad I did, because now it's relatively easy to manage.

X button icon

Jasmine Nackash is a multidisciplinary designer and developer intereseted in creating unique and innovative experiences.