Project Goals
CHALLENGE
Build an interactive visualization for a Harry Potter dataset that shows breakdown of species demographics from the series
ROLE
Designer/Developer
TIME
1 Week
DELIVERABLES
Storyboard, design report, live web server
TYPE
Class-Project
TOOLS
Figma, JavaScript, CSS, HTML, Visual Studio Code, Github
GOALS AND STORYBOARD
Since "blood-status" plays such a big role in the plot of the Harry Potter franchise, we wanted to see if certain houses from Hogwarts were more diverse than others. We decided to measure the diversity of each house by breaking down the species of every listed character belonging to that house.
Users will see the breakdown of blood status for each house characterized by bubbles for each possible blood status, with the size corresponding to the amount of characters that fit that status per house.
By clicking on the house backgrounds, users can see an overall demographic breakdown
When a bubble is clicked, the total count of characters for that species, and within that house, will also appear
DEVELOPEMENT PROCESS
The biggest challenge during this process was finding a balance between creating an aesthetic that pays homage to the franchise, and maintaining a narrative with data.
TRADE-OFFS
1. To limit overcrowding, we had to remove labels from each of the bubbles, which forces more cognitive load on users
2. By changing the cursor on the site to be a wand, the cursor increases in size making navigation slightly more sensitive
FINAL DESIGN
Clicking on the Hufflepuff House
Clicking on one of the species bubbles in Hufflepuff
