Demo Video
Visualization explanation
Our visualization is composed of three main parts: the map, the table, and the bar chart. All of these visualizations are linked together, with brushing between them. With the dataset that we recieved, we felt the best way to accomplish the goal of finding and browsing SBN businesses for potential clients would be this comprehensive view.
The map allows potential clients to browse their local area and locate businesses near them, select them by dragging a box around them, and have the details of those businesses represented in both the bar chart and the table. The points on the map are color-coded by business type, which is consistent with the colors used by the bar chart, allowing for someone browsing the map to get an idea of where the closest business with a certain type is to them. States are color-coded by whether or not a state has an SBN business inside of it: green if so, grey if not.
From the table, one can browse the names, categories, locations, and other details of the businesses that have been plotted on the map. If nothing on the map is selected, this will be a list of all businesses in the dataset.
When a selection is made on the map, the selected businesses are displayed on the table. This allows a user to specify a certain area on the map and recieve information on all businesses in the selected area.
Clicking on a business on the table will highlight its location on the map by changing the corresponding location to the turquois higlight color.
Lastly is the bar chart. By default, it displays a breakdown of all dataset businsesses by business category, allowing SBN to get an idea of what areas they have many businesses and which they are lacking in.
Selecting a certain area of the map changes the bar chart's dataset to be exclusive to the businesses in that area of the map, allowing SBN to perform the same task previously mentioned on certain areas of interest. As mentioned previously, the colors of the bar chart are consistent with the colors of the business points on the map, except when highlighting, where the chart is a single color.
Data Analysis
Summary of data, data types, and data preprocessing.
Our data analysis assignment can be found here:
Task Analysis
Summary of task table.
Our task analysis assignment can be found at the bottom of this document:
Design Process
Sketches and design choices to justify final visualization.
Our initial sketches can be found here:
Our visualization search can be found here:
Our interactive sketch can be found here:
Our final design can be found here:
Conclusion
We completed three types of data visualizations, a bar chart, map, and table. The map represents the location of each SBN member The bar chart represents what industries the members are a part of. Lastly, the table gives textual information about each member. As you brush over a map, the respected rows on the table will be highlighted and the bar chart will display what industry the member is a part of. This will also work when you brush over rows on the table. We believe the project does a great job at describing in more detail the members of SBN. In the future, good directions to think about is the ability to have a type search on the table. Whenever the user types something and pressed enter, the table will become smaller, allowing it to be easier to see the desired members. Another feature that would be good to add is to have the map be movable. If SBN expands, it is possible to translate the map, but it is not easily done. The user also does not have the ability to do so on the front end.
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.
- Aditya and Prof. Cashman's demos on brushing and linking a map in D3
- Easy D3 table implementation by jfreels on GitHub