Bubble bounds
Description
Refining bubble chart so that circles stay within the svg bounds and are properly sized
Changes Made
Created boundaryForceX
and boundaryForceY
functions to set custom forces that constrain the positioning of the circles to the svg. Also added a window listener to update the chart dimensions as the window size changes.
Screen Recording 2024-10-08 at 17.08.30.mov
Known issue:
Chart does not look incredible on mobile, stacked bar needs more room
How to Test
Pull down and build locally, text on different screen sizes
Review Needs
Does this MR include data processing, modeling, or visualization code that will require domain review prior to release?
-
Yes, and I have opened an issue to document the need for review, using the DomainReview
issue template -
Yes, and a domain review issue already exists -
No
Related Issues
Provide links to any related issues, including open draft domain review issues.
Additional Notes
Include any extra information or considerations for reviewers.
Merge Request Checklists
-
Code changes adhere to best practices documented in README.md
-
Code has been cleaned the way Vue likes it - run npm run lint --fix
-
If applicable, the need for future domain review has been documented in an issue -
Below section documents which browsers the site has been tested on: - Desktop/laptop
-
Chrome -
Safari -
Edge -
Firefox
-
- Mobile device
-
Chrome -
Safari -
Edge -
Firefox
-
- Desktop/laptop
Edited by Cee Nell