Data Visualization

Data Visualization

Project Goal: To turn raw data into comprehensible information and to then make that comprehensible information into an explorable format.

Collecting data

The first phase of this project was creating a data set. I brainstormed with social justice issues in mind and settled on the topic of LGBTQ+ Rights. I chose to approach this topic in terms of LGBTQ+ representation in media, specifically television. Using information sourced online, I created a Google spreadsheet with data from 60 TV shows, categorized by network, type of LGBTQ+ representation, genre, etc.

Visualization sketches

Next, I began sketching out different methods of data visualization to see which diagram or chart would be the best fit to represent the data I had collected. It was important in this step to explore as many options as possible to find a diagram that best represented all the categories of my data. The slideshow below shows all of my sketches while the image on the right shows the type of diagram I chose for my data visualization.

Static visualization

Using Adobe Illustrator, I began creating a static diagram that represented my data from the spreadsheet. It was important for the diagram to be easy to navigate, display all of my data and categories, and to have an easily understood hierarchy to the data. My specific diagram needed a key on the poster to help the viewer fully understand the different rings of data and the poster also has a short explanation on what it is and why it is important. The image on the left is my final data visualization and the slideshow below shows the different iterations I went through in the designing process.

Medium fidelity wireframe

Once the static data visualization was complete, it was time to make it interactive. The first step for interaction is to make a wireframe to show the different interaction functions. A medium fidelity wireframe is usually black and white or greyscale. It shows clearly annotated plans for interaction but is still static.

This medium fidelity wireframe shows the plans for how a user searches for an entry, how a user can filter the search, the full display of information for an entry, and the side-menu navigation.

Interactive prototype

The final phase of this project was a high fidelity prototype. Using Adobe XD, I converted the layout from the medium fidelity wireframe into full color with the actual graphics and text, making a high fidelity prototype. I then created interactive paths through my website and recorded a walkthrough to show the interactions a user would have when engaged with the data in the website. The video below shows the walkthrough of the interactive data visualization.