Tutorial Gas Driving
This tutorial will demonstrate, step by step, how to recreate the Driving Shifts Into Reverse metric, published in the New York Times on May 2, 2010, using Lyra. The chart visually documents trends for the miles driven each year with respect to the current price of a gallon of gasoline.
The first step is to import the appropriate data values into our Lyra environment. On the Data Pipelines sidebar, we go to the From Source drop down menu and select the ‘gas’ dataset.
Figure 1 - Importing Data
We’ll start the visualization by setting the line mark. From the Marks Toolbar, we drag and drop the Line mark onto the canvas (this will display a black diagonal line). To get the line to match up with our data, we will need to bind the miles and gas rows to the x and y axes respectively. Starting off with the gas data, drag and drop the row labeled gas from the data pipelines sidebar onto the Line mark on the canvas. Light blue drop zones should then appear over the Line mark, so we will drop the gas dataset onto the y drop zone. Repeat for the miles dataset on the x drop zone.
Figure 2 - Binding 'gas' to y
At this point, the points on the line will be set and automatically continuously connected. Adjust the Width property to 3.75 to thicken the line. To keep things clear, we will also relabel the main visualization axes as X axis and Y axis, and the line as Miles/Gas Line
Figure 3 - 'Miles/Gas Line' set
We will use a similar process to make the unique points using the Symbol mark. Drag a Symbol mark from the Mark toolbar onto the canvas then bind the gas and miles datasets onto the same axes as we did for the Miles/Gas Line. In properties, we will also change the shape of the Symbol mark to a circle, change the color to white, and rename the mark to Miles/Gas Points.
Figure 4 - Miles/Gas Points applied
Now, while the data on the visualization is correct, the default axis scaling doesn’t provide a very clean presentation, as the line and points are very condensed. To expand the line and points, we must change the interval values of the axes and apply new scaling.
Select the X-axis (it might be named X2 axis) from the Axes portion of the Visualization pane. We will start by modifying the orientation of the X-axis. Change the Orient property to top by selecting it from the drop down menu. This will bring our axis labels to the top of the screen instead of the bottom. Next, we will change the axis Width property to 0 by bringing the slider all the way to the left. This will make the x-axis line disappear. To clean up the visualization we will set the title Color property to white, which will blend it into the background (this is optional). Lastly, we will set tick marks to more appropriate values. Rather than allowing Lyra to default the values, check the Explicitly set visible tick marks box to allow user inputted tick values. In the Values box, we will enter 4000, 6000, 8000, and 10,000 respectively. At this point, the visualization should look like Figure 5.
Figure 5 - Modifying the X-Axis properties
Next we will focus on the settings for the visualization labels and grid lines. Underneath the tick values, change the Color to white erase the tick marks. For our labels, we will change the Weight to bold and Format to ‘0,4d’ (An integer value that zero fills up to four digits). For further reference, the Format convention can be found at https://github.com/mbostock/d3/wiki/Formatting. Finally, click the Show box under the grid lines section to enable grid lines. The default values for the grid line settings will be good enough for this particular visualization.
Figure 6 - Label and Grid Line settings
Perform the same actions for the Y-axis as you did for the X-axis. The only major changes are the tick values and the formatting for the tick labels. We will enter 1.50, 2.00, 2.50, and 3.00 as our Y-axis tick values and set the Format as
Figure 7 -Visualization with axes' properties set
To bring our visualization into proportion, we must modify the scales bound to the axes. Hover over the Scale property and click the pencil shaped icon that appears to edit the scale. The only major change we will need to make is to deselect Zero. Our scales will now automatically adjust to fill out the screen rather than center around zero. Do this for both the X and Y axes.
Figure 8 - Visualization after axis formatting and scaling
The labels are unique to our other marks in that we will need to create a separate data pipeline for them. We will start by creating a new data pipeline (button at the bottom of the Data Pipelines Sidebar) and renaming it Left Labels. Import the gas dataset that we’ve been using (however for this part we will then need to filter the data to those that need left labels). Click the ‘New Transform’ button below the data table and select Filter. Our data table has a row called side, which we will now drag into the query bar for filtering. We want to only have data where side is equal to "left" so we use a statement like the one shown below.
Figure 9 - Filter statement
Now that our data is filtered down to the points appropriate for a label placed on the left side of the point, we can create a new Text mark by dragging it onto our canvas. Set the fields of text, x, and y using the data from years, miles, and gas respectively by dragging them from the data pipeline and dropping them onto the appropriate drop zones. It will appear at this moment that the Text marks are completely incorrectly placed, but that is because we have not applied the appropriate scaling yet. To synchronize the scaling of our visualization thus far with the scaling of our Left Labels, we will need to drag the scales of our original Gas dataset (note, NOT the left labels data pipeline) to the Position section of the Text mark’s properties (See Figure 10).
Figure 10 - Scaling Labels
To finish with this set of Labels, change the text Color to black and modify the X and Y _Offset _to appropriate values (that place the labels in natural positions). For example, our Left Labels use an X offset of -24 and Y offset of 0.
We will repeat this process with some slight modifications for the other three types of labels. Create a new data pipeline for each and filter for each type of label respectively. Create text marks as described in the previous section and ensure the scaling is consistent with the original ‘Gas’ data set. Finally change the offset values to properly position the labels (For reference, ours use: right [x: 25, y: 0], top [x: 0 y: -15], bottom [x: 0, y: 14]).
Here is the finished product:
