kjneaville / data-exploration-tool Goto Github PK

Link: http://students.washington.edu/neaville/info474/Data-Exploration-Tool/

The dataset I used is very new (in fact it was released after the deadline for this assignment) because I wanted to create something modern that no one had created a visualization of before. My dataset was counts of cyclist volumes within Seattle on different streets and different intervals.

I originally planned on creating two other visualizaitons and spent hours trying to get started with datasets, one for the drugs involved in American drug overdoses and the other employment statistics within Bolivia. I realized both were too massive to visualize, and I would have to simplify them greatly in order to be understood.

I found this dataset and was intrigued because it was from the city I live in and I immediately realized how I could visualize it: a multi-line connected scatterplot. Since the dataset was not enormous (~1600 quantitative observations) an observer would be to see each individual point without being too overwhelmed.

The x-axis was easy; Since the observations occured over a maximum of 30 days, each interval would be one day. The y-axis was a little more difficult because of the spread of the data. I considered using a log scale, but this would make less busy streets appear closer in activity to more popular streets. Proportions are an important visual cue.

I decided to begin the data on Day 1 instead of Day 0, not only because this was how it was encoded in the spreadsheet, but also because the y-axis looked far too cluttered with the points across it. I kept each street the same color so that it would be easy to track.

The connected scatterplot layout I chose allows viewers to see variation over time and relative to other streets. One of my complaints with the dataset is that all intervals were different dates in 2014, so I had to make a way for viewers to know the dates so that they did not believe all data was from the same 30 day period. The biggest takeway I wanted a viewer to see was how much variation occured for streets. This may be helpful for city planners who need to know how much bike traffic varies or city residents who want to know how crowded bike traffic will fluctuate in case they are planning on buying a bike.

I used two controlling elements, a search box and a geographic location for that street. Although both are not actually within my svg, they both rely on user-selected data and provide information that users will most likely be interested in. I originally planned on using filters within a legend, but unfortunately this dataset didn't provide enough information to make a useful one. A possible one would have been North/South bike traffic, but less than 20% of the data actually supplied this information. Another could have been season, but since we are not looking at the same street this may be misleading.

The search box is useful because residents looking at this visualization will most commonly ask "Where is the street I live on?". I made it lenient on user input (any case, trimmed) so it is easy to find the street you are looking for. If you type in "Mercer" for example you can see only Mercer Street. I considered using AJAX to eliminate a search button, but this could potentially slow the user down and distract them from typing the word they are typing since it would be lines disappearing.

The second control element may not be considered a D3 control element, but is definitely a visual control element. Upon hovering over a data point, a Google Maps iframe reveals where this point is within Seattle, providing a visual description of the street rather than just the name. It was a little tough to figure out (how to register the API key, how to provide the best query for Google Maps) but I think this is a great way to visualize the street we are talking about since viewers won't know every single street in Seattle. This is especially useful for realizing that busier streets are within the actual city, and users can ask the question "Where is this street at?"

These two visual control elements were creative alternative to traditional filters. Filtering by part of Seattle would be too difficult since no address was provided in the dataset. I know it is not a great example of visual control within a D3 visualization, but I used the D3 visualization to be the centerpiece of a page that allowed the user to see the real world meaning of the file.