Skip to content

Refine beaufort timeline

Hayley Corson-Dosch requested to merge hcorson-dosch/earth-in-flux:refine_beaufort_timeline into main

Description

This MR partially addresses #28 (closed) by removing the timeline png. Per a discussion with Althea, I've implemented an interactive timeline and stacked bar chart to serve in place of the buttons. Interacting with the bar chart updates the d3 force bubble plot. I refined the bubble chart behavior a bit, though I'll need to do a bit more work on it later.

Changes Made

image

How to Test

Pull changes locally and run npm run dev. Navigate to the beaufort-sea-timeline page to view the updated viz.

Related Issues

#28 (closed), #31 (closed)

Additional Notes

Note that I've not yet attempted to set up a mobile layout. I added an issue: #31 (closed).

It still needs text providing context for the charts and colors, per #28 (closed)

Also note that the update behavior gets buggy if you really rapidly mouse over the chart. Will need to address with edits to beeswarm layout per #28 (closed)

Merge Request Checklists

  • Ensure that code changes adhere to best practices documented in README.md
  • 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