- Daniel Epstein depstein@cs
- Dominik Moritz domoritz@cs
Or more accurately, July 5, 2013 in Daniel Epstein's life!
This visualization shows the heart rate over the course of a day. In addition to that, you can see the steps walked and the number of floors that were moved up. Brush a certain region or click on the locations in the chart or the map to limit the view to part of the day. You can interact with either the chart or the map.
The data contained 24 hours (at 1-minute intervals) of:
- Steps walked
- Flights of stairs climbed
- Heart rate
- Current named location (e.g. "Home", "CSE") or transport type (e.g. "Walking", "Running", "Transport")
Access our visualization at cse512-14w.github.io/a3-depstein-domoritz/ or download this repository and run python -m SimpleHTTPServer 9000 and access this from http://localhost:9000/.
The chart changes width according to the available width depending on the screen size. However, we did not optimize for small screen sizes so please view it on a large screen.
The basic overview of the interface is here:
We have two main views, a chart and a map. The chart displays the step, flight, and heart rate data, while the locations appear on the map. The x-axis of the chart is time, while the times of each event appear in tooltips on the map. We used a focus+context view for the chart, with the context view beneath the chart colored according to the places visited. To the right of the chart are a legend and some summary information about the current region selected.
We really wanted the interaction techniques to promote exploration of patterns in this data. As such, we intended for the visualization to be responsive to what the user was interested in learning more about by making nearly everything hoverable or selectable.
By hovering on one of the bars at the top of the chart (representing a current location or transport type), the corresponding tooltip appears on the map.
Hovering on a specific bar changes the summary to show statistics of the current bar.
The user can select a specific day to look at. We do not anticipate implementing this functionality, as doing so would require more data than we currently have available (but we anticipate the implementation of this feature would be fairly trivial).
The user can also click on features on the map itself, like selecting home.
Doing so will update the chart, alpha-ing down the unselected regions.
As described before, we implemented focus+context. This means that the user can select a span
And that span will then be focused on in the above chart, as well as highlighted in the map.
Instead of hovering over the bars in the chart and having the information update the summary pane, we implemented a hover line that shows the detailed information.
Instead of implementing focus+context from the map by alpha-ing out unselected regions, we require the user to select a specific time span from the tooltip.
Hovering on a region in the chart is not reflected in the map. Instead, users have to click on on a region to change the span that is focused on. Furthermore, there is no differentiation between highlighted time spans and a time span that is focused on any more because they have been unified into one.
We decided to move the location indicators to the bottom of the chart in order to support easier cross-interaction between the map and the chart and easier comparison of the focus and context area by moving them closer together.
- Daniel initially focused on the graph, Dominik focused on the map
- Daniel created a function to set the brush programatically, Dominik implemented the interaction between the map and the chart
- We spent about
- 2 hours collecting and understanding the data
- 4 hours on the initial design of the story board
- several hours on a failed attempt to use a D3 layer with leaflet (eventually we switched to pure Leaflet)
- 7 hours on the map and the interaction between the map and the chart
- 2 hour on the summary pane and legend
- 8 hours on chart
- 8 hours on the map
- 7 hours on the interaction between the map and the chart and refinements
- Adding interaction between the map and the chart and within the chart and the map took the most time.