CSIS-iLab / ocean

Stephenson Ocean Security Project
MIT License
0 stars 2 forks source link

Arctic Scrollytelling Piece #234

Closed jnschrag closed 5 years ago

jnschrag commented 5 years ago

The scrollytelling piece toggles the opacity of different layers on an SVG depicting the ice in the Arctic. These are the steps & accompanying actions:

  1. January 2018 ice is visible
  2. Loop through all months in 2018 (Jan - Dec) & show ice for each month. Legend label is updated for each month.
  3. Show ice for March 2018 & Median line for March 2018. Legend label is updated.
  4. Loop through March 2017, March 2016, March 2015 and show their ice areas on top of the March 2018 ice. I'm waiting on Tucker's feedback before adding manipulations to this step's legend label
  5. Show September 2018 ice & median line. Legend label is updated.

Layers are grouped according to which step they correspond with, but because some months are shown multiple times, it was necessary to control opacity on the individual month layers as well. Month layers have an ID that follows this format: sc_monthYear. The median lines follow this naming convention: sc_monthYear-av.

To account for what happened when the user scrolls backwards, the start of each step reverts any other steps' changes. This was a bit of a messy process because of how ScrollMagick handles this, so feedback on cleaning that up would be great.

I also added the accent color for the whole piece.

jnschrag commented 5 years ago

This PR has been updated with two additional pieces of functionality & adjustments on the mobile styles.