Demo Video
Below is a video demonstrating how to use the visualization.
Visualization explanation
We decided to go with a map because of the data we wanted to display. We were trying to come up with a fun, interactive visualization that would attract all kinds of users (attendees, vendors, and potential sponsors); whilst making it informative as well. The final concept we came up with was a map that would display the zip codes of attendees and vendors.
The idea is to highlight (or brush) a specific data point (or sets of data points). This will produce a table next to the map displaying more information regarding that data point. For attendees that displays favorite activity, likelihood to purchase goods at store, if it raised user awareness, their experience, how they found out about the event, and their age range. For vendors that displays vendor name, city, and state. Users also will have the ability to zoom in and out of the map; providing more concise results. The user can also double click on the map (when already zoomed in) to reset the map to its default scale. The attendee table will also be color coded to the same color as the data point (orange). The same behavior occurs with the vendor data (blue). In the attendee table, the values are scaled from 1-5; with the exception of "Likelihood To Purchase At Store". That is scaled to be 1-6.
Here is a picture of the map in its base form:
Here is a picture of the map with attendee information selected:
Here is a picture of the map with vendor information selected:
Here is a picture of the map while zoomed in with vendor and attendee information selected:
Data Analysis
Task Analysis and Design Process
Embedded below are two documents detailing our Task Analysis and Design Process. The first document contains our task analysis table, as we well as our initial design sketches and ideas for visualizations. The second document contains our final visualization sketch and a description of what its original purpose.
Conclusion
We were able to implement a basic map that plotted visual information regarding the location of attendees and vendors. We were also able to get a working table that displayed the information pertaining to each data point. In trying to display our data, we were limited by just the 2019 data because we didn't have the list of vendors from prior years. The list of vendors from 2019 was extrapolated from the SBN website. We then had to look up the zip code for every vendor manually. Also, because many of the variables had null data on it, we were forced to drop some of that data; limiting it even more.
In the future if we still had the time and ability to keep working on this, we would like to incoprorate more information. First we'd like to implement a filtering option that would help you filter for just attendee data points, or vendor data points. Likewise, the ability to filter through specific vendor names so that only their location would highlight. We would also like to add more data points to the map. Right now we are only using the data from 2019. If we had more information on the vendors, then we'd be able to publish data from 2017, 2018, and etc. Another improvement would be to cut the initial view of the map and only display the Northeast region. However, if the user chose to, they can still zoom in to inspect it more closely, or zoom out to see more of USA. We would also like to label, and color each state for the aesthetic visual appeal.
Acknowledgments
We would like to extend a special thanks to the teaching staff of DS 4200. The professor and TA's religiously helped us to accomplish our tasks. We definitely wouldn't have gotten as far as we did in our project without them. We would also like to acknowledge their tutorial code. It helped us a lot in setting up a basic framework for our code (listed below).
- D3: Data-Driven Documents by Mike Bostock.
- Pure CSS responsive "Fork me on GitHub" ribbon by Chris Heilmann.
- D3 Tutorial Code by Aditeya Pandey and Dylan Cashman.