Boeing Scrollytelling

[jnschrag]

Goal

As the user scrolls down the page, highlight the corresponding parts of the plane SVG & increment the counters for # of parts & # of locations. The entire plane should be visible, but the parts faded out (opacity: 0.5). As the user scrolls through the text, the parts mentioned in the visible paragraph should fade into full opacity (opacity: 1) & their labels should become visible. After the user scrolls to the next paragraph, the labels should fade out & the plane parts should go down in opacity (opacity: 0.7).

How to Work on this Issue

• Work should be done on the boeing-viz/initial-waypoints-setup branch.
• PRs should merge into the boeing-viz-master branch.
• HTML for the visual can be located in _posts/2019-01-22-around-the-world-in-47-parts.md & in _posts/custom-viz/boeing
• SCSS for the visual can be located in assets/_sass/custom-viz/boeing/
• JS for the visual can be located in assets/_js/custom-viz/boeing

Functional Tasks

• [x] Update SVG HTML (see Slack) to remove all the extra white space.
• [x] Update visibility of parts & labels as the user scrolls
• [x] Update counter to keep track of the total # of parts
• [x] Update counter to keep track fo the total # of locations
• [x] If the user hovers over a section of parts, those parts should fade in to full opacity & all of the labels are visible (desktop only; there should be no interaction on mobile)

Design Notes

• [x] Add opaque white background to the scrolly text so it's easier to read as it scrolls on top of the plane
• [x] The counters should be listed side by side & in the upper right corner
• [x] The counters' labels text can read "# of parts" & "# of locations"
• [x] The counters' label typography should be the same as the "Filter by trade partner" text on the 50 States interactive
• [x] The counters' values should be bold
• [x] On desktop, the full width container overflows the container which creates a horizontal scroll bar. This is caused because the parent .post-body div is not centered on the page (intentionally). You can fix the overflow by changing margin-left: -50vw to margin-left: calc(-50vw - 4rem) on desktop only.
• [x] On mobile, there should be at most 1rem of padding around the plane
• [x] The plane currently overflows the container because of the height: 100% being set on the svg.

For reference, see the original issue #65. However, the tasks in this issue are the ones that should be completed. The latest PR is #72 but a new PR should be opened once additional functionality has been added.

[jnschrag]

Note that this Visual is completed, but the post is currently unpublished while we wait for Boeing's sign off.