Boeing Visualization

[aleesteele]

Development Schedule

Pre-work

• [x] Final graphic: map w/ points
• [x] Final graphic: plane w/ labels
• [x] Layout draft: mobile
• [x] Layout draft: desktop
• [x] Create Jekyll draft page
• [x] Import waypoints.js, custom CSS + js files

Basic functions

• [x] Add static graphics to page (1/2)
• [ ] Begin scrolling functions for mobile version: scroll points
• [ ] Scrolling function on desktop
• [ ] Scroll point that viz will begin with each place location (24 in total - without the mention of Everett, Washington and Nagoya, Japan at the beginning of the piece.)
• [ ] Two incrementing counters
• [ ] Highlighted location and name of part on text

Other

• [ ] Microinteractions, Animations
• [ ] Accessibility (arrow at beginning of text?)
• [ ] Optimize for mobile
• [ ] Bug testing
• [ ] Bonus features
  • [ ] On mobile, hovering over piece triggers label to appear above plane
  • [ ] On mobile, hovering over piece triggers animation of emphasized piece (like a shake)
  • [ ] On desktop, hovering over piece triggers animated lines to where the piece is on the plane

Resources

• Waypoint documentation
• Webpack documentation - used! helpful.
• Use Zeplin if there is time*

[aleesteele]

Hey @jnschrag -- as mentioned, I'm having some trouble importing my sass file for the viz. In the first iteration of the branch, I'd been able to import the files directly when they were standalone sass files. I'm getting the error "Refused to apply style from 'http://localhost:4000/assets/css/custom-viz/boeing/XXXXX.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. for both files. After reading up on StackOverflow, it seems like it could be a problem with how I reference it in the file tree?

The branch I'm using is: https://github.com/CSIS-iLab/trade_guys/tree/boeing-viz/starting-waypoints

[jnschrag]

@aleesteele can you link me to the line of code where you're importing the SASS file?

[aleesteele]

@jnschrag Everything's being imported through an include, similar to the Ocean project: https://github.com/CSIS-iLab/trade_guys/blob/boeing-viz/starting-waypoints/_includes/head-custom-viz.html (Line 6 specifically is where custom styles are being imported)

The file is imported in the Markdown file of the post: https://github.com/CSIS-iLab/trade_guys/blob/boeing-viz/starting-waypoints/_posts/2019-01-22-around-the-world-in-47-parts.md

edit: will delete header-custom-viz.html as it's no longer relevant.

[jnschrag]

@aleesteele You can debug this by looking in the generated _site folder. If you dig into the compiled assets, you'll see that it's being compiled to assets/css/custom-viz/boeing.css not assets/css/custom-viz/boeing/boeing.css like you're including in the header.

Also, the map & boeing styles need to be bundled together. There should only be boeing.css generated, not boeing.css & map.css. You can do that by importing _map.scss in boeing.scss.

[aleesteele]

Thank you, @jnschrag! Got it :)