Updating glacial xray viz
Description
Incorporated feedback from design studio that improves the readability of the viz.
Changes Made
- Changed the color palette to be more cohesive with existing viz in the climate chart. Some of the colors were confusing between the map view and the cross-section view. I made them more consistent. Last, color-wise, I have removed the background and made it transparent.
- Removed distracting monospace text and replaced with Universe Condenses, USGS's standard font. I see the default font in src/assets/css/base.css is Source Sans Pro, should I change to that?
- Added 6 ice core locations from https://data.usgs.gov/datacatalog/data/USGS:5e472c3ee4b0ff554f6837bc
- Rotated the viz slightly so the cross-sections are perfectly horizontal. North is now about 10 degrees off. The path of the cross-sections is determined by a least-squared-residual line that goes through the 6 ice cores.
- I added an annotation arrow to help the reader understand how to interact with the viz.
- Users can now highlight the cores to see where they are in the cross-section. I probably need to add another annotation, so they know about this functionality.
How to Test
To run:
npm run dev
- Please check that the viz resets to its default case when moving the mouse away from the figure. The default case should disappear when the mouse moves over the figure.
- Check that colors provide enough contrast. Are the cores easy to see on both the map and the cross-section?
- Is the interactivity obvious from the annotation?
Related Issues
None.
Additional Notes
None.
Merge Request Checklists
-
Ensure that code changes adhere to best practices documented in README.md
- NOTE: Should I be handling colors differently? Maybe I shouldn't specify the color in matplotlib, and have the colors chosen in src/assets/css/base.css? -
Clean the code the way Vue likes it - run npm run lint --fix
-
Document which browsers the site has been tested on: - Desktop/laptop
-
Chrome -
Safari -
Edge -
Firefox
-
- Mobile device
-
Chrome -
Safari -
Edge -
Firefox
-
- Desktop/laptop