by Declan Fallon
For this month’s post, we are going to work with week 18 #MakeoverMonday challenge data from data.world[1] to demonstrate the Playback component. The data covered the 216 Russian and American spacewalks at the International Space Station since December 1998.
Setup
We start with a few header Text components; one to show the data.world logo, a second for the descriptive text and a third to represent a view state parameter which stores the selected date from the data.
Data World Logo
The Text component can be used to display images in addition to text. In the Text editor, import an image.
The height of the image can be adjusted using the HTML editor of the Text component.
Display a View State Parameter in a Text Component
This can simply be achieved by assigning the Date, view state parameter to Formatted Text of the Text component. Then setting Font Size to 30.
Configure Playback component
Playback allows us to view the story in our data over time by defining the time (or numeric/event series) information column from our data source to a mapped view state parameter, in this case Date, and then storing the updated view state parameter value over the course of the playback. The updating Date view state can then be used by other queries and components in the dashboard.
At the query level, we pull the distinct values of Date from our data.
Adding the Visuals
Next we will add three Canvas Chart components and use playback to populate the charts with data as the years roll by.
Starting with the large bubble chart (“Canvas Chart 1”) on the left, we will have a set of bubbles; each bubble will be numbered by sequence of spacewalk order, and color coded red for a Russian and blue for an American spacewalk.
The duration of the spacewalk can be used to define the bubble size (as well as its use along the y-axis)
At the query level, we want to return all data before the Date view state value set by the Playback component.
We can then use two Highlight rules to color code the bubbles (the base color of the bubble won’t matter in this regard and can be left unchanged); using a text search of the column we can differentiate between Russian and American spacewalks. A white border provides stronger contrast and offers better definition of the bubbles.
One of the newer features in our Canvas Chart component is Labels. Here we can assign a text label to appear inside the bubble. We assign the data source column name to the Handlebar.js template. In this case the sequenced Mission Number when each spacewalk occurred.
We can run the playback to check how the canvas chart populates with data
Extra detail can be provided with a custom tooltip. Rolling over an individual bubble will offer additional details on the spacewalk.
The second Canvas Chart is a straightforward comparison of time spent spacewalking between Russian and US missioned astronauts using the pivot query to sum the time spent.
The third Canvas Chart also uses a pivot query, but with the breakdown categorized by spacewalker rather than country.
The three charts will update as the data is played through by date, as illustrated below:
What does the data say?
- American spacewalk missions lasted considerably longer and were more frequent than Russian spacewalks, although more recent spacewalks by Russian cosmonauts have matched those of their American counterparts.
- Michael Lopez-Alegria clocked the most spacewalk time at 4,060 minutes, closely followed by Peggy Whitson’s 3,621 minutes.
- Yury Usachev recorded the shortest spacewalk of just 19 minutes, but was his seventh spacewalk overall, the prior six occurring on the Mir space station.
