charticulator.com/_tutorials/tutorial9.md

2.0 KiB

description image order tutorial
Bar Chart with Error Bars /images/tutorials/tutorial9.png 9
videoSource duration captions
mp4
../videos/tutorials/tutorial9.mp4
68.00
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
section
# Adjust the Gap
timeBegin timeEnd text
61.20 68.00 Adjust the gap between bars