Skip to content

Bubble bounds

Cee Nell requested to merge bubble-bounds into main

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:

image.png

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
Edited by Cee Nell

Merge request reports

Loading