Changes in Seattle Business Licenses (2010-2016)

Design Rationale

Colors:
With 21 different sectors to visualize, it was hard to come up with a sufficiently contrasting color palette to distinguish between them. We stumbled upon this palette, designed by Kenneth L. Kelly, deemed “Twenty-Two Colors for Maximum Contrast”. These, according to Kelly, are “maximally different for use in color coding, providing maximum contrast for those with deficient color vision.” Removing white (poor against a white background), we were left with the 21 colors we needed. To find the lighter colors used for the '‘new’ bars and circles, we used a color theme generator to grab lighter variants of these kelly colors.

BarGraph:
The idea of using a bar graph for the data we had seemed a given. We had seven different years to display counts over for each of 21 sectors. We decided that being able to navigate quickly between different sectors was important for ease of exploration, so we implemented the navigation bar on the left. Animations and the changing cursor were added to encourage interaction and exploration. So that the user can get more detail in the actual count of businesses, moving the mouse over a bar fades the others and presents a total count for the number of active businesses in that year.

The most difficult to make design decision was that for visualizing the entrance and exit of businesses throughout the years. In Halden’s assignment 2, he had the beginnings of an exploration into the dynamic of new businesses and closing businesses for each sector. Are new businesses closing at a rate higher than old businesses? Does this vary by sector? This was something we thought we be interesting to explore, but it wasn’t immediately clear how. We could have static bars representing the new and closed businesses, but then the movement of businesses, the separation between new and old businesses closing, wouldn’t be obvious.

We could segment the bars with different colors to show the proportion of businesses from each category (either active or not) that were either new or old businesses in the year previous, but this requires two separate graphs: one displaying active businesses and the other displaying the closed ones. We arrived at the idea of using animation to convey this movement over time. The light colored dots falling from above the bars represent new businesses entering the scene. Upon a click of the bar of the next year, some businesses ‘move’ into that year, shifting shade as they become ‘old businesses’, while others are left behind: they didn’t make it. Those that were left behind fall down to the bottom of the graph, gathering in a bar themselves that displays both a total of the number of these ‘left behind’ businesses, as well as the proportion that were new or old before they closed (light or dark grey). Clicking backwards in time resets the display up to that point (in case the user would like to see the transition again).

The decision to use dots was a hard one to make. Because the counts for each sector can vary from the tens to the tens of thousands, it was unclear to us how we could encode the exact quantity of businesses moving from year to year. As a result, each dot represents a proportion of businesses, not exactly one each. The addition of the key at the top of the graph has the goal of clearing up this easy to make misinterpretation, though we recognize this is not a perfect solution. For future iterations of this visualization we are interested in exploring ways to better encode this information: whether that be by scaling the dots based on the number of businesses they represent (to a degree, pixelpoint dots doesn’t seem to be the greatest idea), or picking a completely different encoding channel altogether.

Some small notes on minor design decision:
Because it’s not immediately clear where you can click for this animation, we decided to have a ‘skeleton’, a faint ebbing collection of dots in the year following the current one selected.

From the solid bar view, the user can click on any year and the visualization will automatically animate all transitions from 2010 until that year. The reason for this is that we figured clicking year by year just to be able to see the final aggregation of data at 2016 was cumbersome.

StreamGraph:
The stream graph is used as a top-level view of the data. We were originally envisioning the stream graph to be a high level view of the data so by using matching colors, we can connect it to the bar chart, which is a more granular view of each sector. We used position to encode time (the x-axis of the graph) and we used colors to encode each sector since it is nominal data. The colors in the stream graph match the colors in the bar graph so that there is a constant channel to connect the two. However, a design decision that we are still debating is whether we should show the stream graph and bar chart side by side or whether we should show the stream graph first, and then after clicking on a sector show the bar chart for that sector. Below follows our reasoning for the former.

Because each bar graph view of the different sectors adjusts the y axis to normalize the view, relational comparison between sectors is largely lost. The stream graph is meant to remedy this missing context. The stream graph shows the aggregate number of businesses and provides a comparison of each sector to the others. By highlighting the current sector displayed on the bar graph, we hope to allow the viewer to ground themselves within the larger context of the Seattle business landscape as a whole. The stream graph also allows for the relative size comparison of different sectors without needing to interpolate numerical differences between scales on the bar graph. It also allows users to gain an idea of the characteristics of a particular sector (via mousing over the stream graph) without needing to completely re-render the bar graph view.

Development Process

When we started the project, we all sat down to decide how to split up the work. We decided that the plan for the prototype was to try to do one or two visualizations well and limit the scope instead of trying to do too much and fall short. As a result, Halden and Shobhit took on the graphs that would be created for the prototype, and Gunnar and Lilian focused more on the final project going forward.

Splitting up the work in this way, it made it easier to work independently on the separate tasks and avoid conflicts. Halden and Shobhit could both work on the prototype and work on the two graphs separately and then merge them together at the end.

Halden did a ton of work (60-80 hours) developing the bar graph. Half of that time was spent creating the animation of the dots showing the movement of businesses through the years. It also took a long time to format and split up the dataset for the transitioning bar charts between categories. Shobhit helped create the stream graph part of the prototype (35-40 hours). Most of the time wsa spent figuring out how to stack the stream graph properly, fine tune the y-axis, and properly calibrate the highlighting animation. In addition, a good amount of development time was spent on trying to create tooltips, which were eventually dropped from the prototype.

As mentioned, we wanted to keep the prototype to 1-2 visualizations, so Lilian and Gunnar focused on features that will later be combined with the prototype graphs. For our final project, we want to incorporate Seattle housing data as another metric to explore how Seattle’s economy changed over time. Lilian wrangled Zillow housing data to incorporate into the final project . She was also responsible for trying to find an effective way to display extra context for the visualization. For example, we want to explain the legend in further detail to provide additional context to the labels. We also wanted to feature important trends in the data, such as the sudden spike in Transportation in 2016. We were originally thinking of making a scrolling article on the side that could accompany the bar chart, but then we decided that it was best to place the stream graph there instead to provide extra context to the bar chart. For now we just placed the extra context right below the visualization but we would like to find a more effective way of displaying it. Gunnar worked on the geographical visualization which will be a large part of the final product. We want to be able to visualize the location of businesses and houses and how which areas of Seattle changed over time. He created a proof-of-concept geo-map with hoverable points and slider date filtering. He was also responsible for the prototype write-up.

Overall, a large portion of the time spent was learning and familiarizing ourselves with D3. Now that the bar and stream graphs are mostly put together, we expect the work going forward to shift more towards Gunnar and Lilian, mainly focused on Gunnar’s geo map and incorporating the Zillow housing data. Another goal of ours is to find an effective way to navigate through the separate visualizations in a cohesive way, along with incorporating the extra context.