Skip to content

Updating glacial xray viz

Kwang, Jeffrey S requested to merge jkwang/climate-charts-fire-in-ice:main into main

Description

Incorporated feedback from design studio that improves the readability of the viz.

Changes Made

Before: Screenshot_2024-08-20_at_5.39.32_PM After: Screenshot_2024-08-20_at_5.39.46_PM

  1. 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.
  2. 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?
  3. Added 6 ice core locations from https://data.usgs.gov/datacatalog/data/USGS:5e472c3ee4b0ff554f6837bc
  4. 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.
  5. I added an annotation arrow to help the reader understand how to interact with the viz.
  6. 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

  1. 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.
  2. Check that colors provide enough contrast. Are the cores easy to see on both the map and the cross-section?
  3. 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

Merge request reports

Loading