section |
# Dataset & Chart
Results from a usability study comprised of four tasks.
In this tutorial, we display task completion time by creating a bar chart with error bars.
|
|
section |
# Set up the Chart
|
|
timeBegin |
timeEnd |
text |
0.00 |
2.60 |
Assign `Task` to the Y axis
|
|
timeBegin |
timeEnd |
text |
2.60 |
5.39 |
Adjust the height of the chart
|
|
section |
# Create a Data-Driven Guide
|
|
timeBegin |
timeEnd |
text |
5.39 |
15.60 |
After adding a data-driven guide to the glyph editor, add `Mean`, `LOWER`, and `UPPER` to the data-driven guide
|
|
timeBegin |
timeEnd |
text |
15.60 |
20.99 |
Adjust the range and position of the X axis
|
|
section |
# Create a Bar Glyph with an Error Bar
|
|
timeBegin |
timeEnd |
text |
20.99 |
24.80 |
Add a rectangle mark to the glyph
|
|
timeBegin |
timeEnd |
text |
24.80 |
27.40 |
Set the color of the mark to light blue
|
|
timeBegin |
timeEnd |
text |
27.40 |
30.49 |
Adjust the width of the chart
|
|
timeBegin |
timeEnd |
text |
30.49 |
42.70 |
Add three lines to draw an error bar
|
|
section |
# Add Labels to Show Task Time
|
|
timeBegin |
timeEnd |
text |
42.70 |
48.40 |
Add a text mark for the label and move it to the desired position
|
|
timeBegin |
timeEnd |
text |
48.40 |
55.00 |
Map `Mean` to the label's `Text` and adjust the text formatting
|
|
timeBegin |
timeEnd |
text |
55.00 |
61.20 |
Set the label's color to white and increase the font size
|
|
|
timeBegin |
timeEnd |
text |
61.20 |
68.00 |
Adjust the gap between bars
|
|