Demo Video
Here is a demonstration of our visualization
Visualization explanation
Design Justification
For our visualizations, we decided to do a map and linked table to present our data. For the map, we wanted to allow users to discover, derive and enjoy the information that they find out about members in the Sustainable Business Network’s directory. With a map, we used circles as glyphs to showcase where the members are. We decided to use orange circles against a gray map for the contrast in hue which allows users to easily see where the locations are. Because of our use of a map we decided to filter the data to only keep members who had physical locations. Although some members only had a presence online we wanted to showcase the members that had physical locations. Users can manipulate the map via brushing. We decided that once a glyph is brushed it will highlight in red color. Although the glyphs are orange we found that red provided a good pop out to show which members were selected. Once the map is brushed it is linked to a table that provides more information on the members so that users can choose to find out more information on members such as the name, business type, and address. We decided to put the map side by side with the table because of how closely linked the two are in finding out more information about members. Conversely, users can select members on the table to view where they are located on the map.
Walkthrough
On the left-hand side, users are presented with a map. Users can elect to zoom in to see glyphs more clearly on the map. Then users can brush the glyphs (representing members). After brushing it will link to the table on the right-hand side. The table provides the following information: Name, Product, Address information, and contact information. The users can select specific members on the table to see where they appear on the map.
Data Analysis
Summary of data
The data given to us by SBN gives an overview of the members in the network including some basic information about each member. There are columns for the member type, name of the business or organization, product/service type, address information, phone number and email. All the data provided was categorical.
Data Preprocessing
We first pulled our data into an excel sheet to be able to more efficiently analyze it. We found that several of the columns lacked information. Specifically, the address column was missing data for nearly 30 organizations. We were able to fill in most of the missing data simply by searching for the information on Google. However, some organizations still had missing addresses and we assume that is because they lack a physical (brick and mortar) presence.
Lastly, we had to find the latitude and longitude for all the organizations in our dataset to plot it on the map. We used a script through Google Sheets that consisted of a simple function which returns the latitude and longitude values for given address using the Google Maps Geocoder. These addresses were created through the concatenation of the address, city, state, and zip code.
After we finalized our dataset, we started working on creating our visualization!
Task Analysis
There are various business in the local community of New England. SBN is willing to build up a strong connection among them to facilitate their collaboration and establish conducive business environments. Our domain task is to showcase the organizations to everyone who will use our visualization. Our visualization should make the users enable to get a brief understanding of the New England community firstly. In another word, there should be a big picture first. Then, users should be able to dig in and grab the detail information they want. There should be something that can draw users’ interests, meanwhile we cannot use any ranking or filters in order to give equal opportunities to all of the organizations.
We intend to help users to gain awareness of the location, business and contact information by utilizing interactive map and table. Users are allowed to zoom in and out smoothly and gather any further information they want by playing with the visualization. Our visualization aims to increase the using experience by adding brushing, linking and some on-click events.
Our analytics task is to give the users a summary / overview of the local community of the New England, and the most important information they can get is the geographic location. Our search task is to explore, and the high level task is to present. We want our users to dig out the information they want from our interactive visualization.
Design Process
We designed our visualization iteratively through first finding examples, then making a sketch, and finally creating a mockup in Tableau.
Our first step designing our visualizations was to take inspiration from visualizations that have already been made for similar functions. To do this, we all set out to find a visualization that related to the tasks we were trying to complete. We wanted to see different layouts, features, and general ideas that we could mold into our own.
Next, we sketched out a few ideas we had for visualizations. These sketches were, for the most part, directly inspired by the working examples. The goal was to place different elements and see how they looked before actually coding anything. This way, we could move into making an interactive version efficiently.
Finally, we created a working mockup in Tableau. This was very easy, and we were able to connect our data to show both a map of the member locations, as well as have a filterable table on the side. These are elements that are more difficult to do in D3, so Tableau was very useful in that aspect. Through making these interactive visualizations, we were able to see what worked with our ideas and what did not.
Example visualization from here
Illustrated map by Ruisong
Mockup in Tableau
Conclusion
We believe we did a good job of representing the various organizations that are working with SBN by plotting them on the map above and linking them with the table so that the user can find important information about a business. We also added zoom functionality to improve the overall user experience of our visualization by allowing the user to have a better look at all the businesses working with SBN on a state-by-state basis.
However, there is always room for improvement. For instance, given time we would like to add more features to our table such that the user can select any business from the table and the map would zoom into the particular state in which that business is operating so that users can quickly look up various organizations and their location. Furthermore, adding a "get directions" feature to our map is another neat feature that could improve the visualizations by allowing a user to seamlessly reach any organization that is part of the SBN community.
We would also like to mention that it was a pleasure helping an organization like SBN that is promoting local businesses and we hope this project can contribute to their ongoing success!
Acknowledgments
List here where any code, packages/libraries, text, images, designs, etc. that you leverage come from.
- D3: Data-Driven Documents by Mike Bostock.
- Pure CSS responsive "Fork me on GitHub" ribbon by Chris Heilmann.
- Zoom to Bounding Box by Mike Bostock
- Zoom (SVG) by Mike Bostock
- Mission: The Sustainable Business Network by The Sustainable Business Network of Boston
- Table From CSV by "jfreels"