md`

## Design Process Our original static visualization encoded departure delay magnitude for the 20 busiest airports with the size of squares on a map. Feedback from class suggested that the encoding was confusing because the size of the square appeared to relate to airport traffic rather than departure delay, and the map appeared sparse. Below is our first static visualization:

We incorporated this feedback by encoding the size of circles with the number of departures and color of circle with magnitude of average delay. However, we found that the delays were usually so close to zero that the circles were either very light orange or very light blue, indistinguishable from each other. Text labels for average delay proved to be too busy, and darkening the color scheme for the blue circles created the false appearance of very high magnitude earliness. The following in-process image shows how crowded the map got when adding text annotations to airports with negative delays (early departures).

text-labels-for-negative-delays-too-crowded

Even when just displaying airport codes, though less cluttered, it was difficult to absorb the information through both text and bubbles. We learned here that consistency of representation was important.

Our final solution was to make the circles “glow” -- every circle that represented positive delay was given a thin orange border, one of zero delay would have a white border, and one with negative delay would have blue. We also did some data preprocessing to eliminate airports that fell outside our geographic range (50 states). We also changed the size range of our bubbles to make smaller airports visible. In the top left of the following image, you can see hints of airports that are out of bounds. We eliminated this data for our visualization.

We abandoned the idea of using a horizon graph because although they are useful for diverging data, the frequency and magnitude of early departures would require a very high level of granularity to perceive. Moreover, the map allowed us to see the spatial clusters (such as in the Northwest) of early airports. Finally, the original tooltip we chose appeared to look like a general Google Chrome hover tooltip and was slow to respond to mouse movement. We reduced the lag time and reformatted the tooltip to reflect the airport code, name, and average departure delay in separate lines. Below is the original tooltip:

In addition to the annotation on hover, we added an interactive slider to illustrate trends, particularly around departure delays increasing in winter months. We met several times throughout the last three weeks to collaborate in-person on the Observable notebook and our writeup. `