---
description: "Boston Weather in a Year"
image: "/images/tutorials/tutorial5.png"
order: 5
tutorial:
  videoSource:
    mp4: "../videos/tutorials/tutorial5.mp4"

  duration: 104.99

  captions:
    - section: |
        # Dataset & Chart

        Boston weather data collected from the National Centers for Environmental Information.

        In this tutorial, we create a radial chart showing the temperature and precipitation in Boston over the course of a year.

    - section: |
        # Create a Data-Driven Guide

    - timeBegin: 0.00
      timeEnd: 3.00
      text: |
        Add a data-driven guide to the glyph editor

    - timeBegin: 3.00
      timeEnd: 8.09
      text: |
        Add `Avg. Temperature`, `Min. Temperature`, and `Max. Temperature` to the data-driven guide

    - section: |
        # Create the Glyph

    - timeBegin: 8.09
      timeEnd: 12.31
      text: |
        Add a line mark, anchored between the maximum tempearture and the minimum temperature

    - section: |
        # Arrange the Glyphs in a Radial Layout

    - timeBegin: 12.31
      timeEnd: 14.99
      text: |
        Apply a circular scaffold to the chart canvas
    
    - timeBegin: 14.99
      timeEnd: 17.90
      text: |
        Arrange the glyphs along the angular axis

    - section: |
        # Style the Glyphs

    - timeBegin: 17.90
      timeEnd: 28.83
      text: |
        Map `Avg. Temperature` to the line stroke color and select a Spectral gradient

    - timeBegin: 28.83
      timeEnd: 35.07
      text: |
        Adjust the inner radius and outer radius

    - section: |
        # Add a Circle Mark to the Glyph

        The circle mark will represent precipitation.

    - timeBegin: 35.07
      timeEnd: 45.90
      text: |
        Add a circle mark to the glyph anchored to the average temperature

    - timeBegin: 45.90
      timeEnd: 55.20
      text: |
        Map `Precipitation` to the circle size and set the end of the size range to 3000

    - timeBegin: 55.20
      timeEnd: 67.70
      text: |
        Set the color of circles to light blue and set the opacity to 0.2

    - section: |
        # Style the Chart

    - timeBegin: 67.70
      timeEnd: 76.70
      text: |
        Set the colors of Axis to Gray

    - timeBegin: 76.70
      timeEnd: 84.27
      text: |
        Anchor the top of the Title text to the center of the chart

    - timeBegin: 84.27
      timeEnd: 94.10
      text: |
        Change the font family and font color of the Title text

    - section: |
        # Finalize the Chart

    - timeBegin: 94.10
      timeEnd: 101.27
      text: |
        Change the chart size

    - timeBegin: 101.27
      timeEnd: 104.99
      text: |
        Adjust the top margin of the chart

---