Day 5 Completion

[heatherdice]

Completion of Day 5 challenge

As of 6/23 that includes appropriately sized & responsive:

• [x] svg
• [x] graph lines
• [x] days of the week
• [ ] hover data points

[heatherdice]

As of 10/10:

Got correct size, shape, & color of popup bubbles, but initially were positioned bottom right of data point. Positioned data points over popup bubbles, though they are not appearing on the screen (can see very bottom but that's it) Would appear that the positioning of the foreignObject within the SVG needs to change

• but when this is done, it changes the position of the points themselves
• positioning of the tag also affects the positioning of the points Current solution: wrap points & popups in another div, use flex to position

Next problem: popup bubble being cut off by borders of containers

• solution: add overflow: visible to both foreignObject and points container

All now works as it should, BUT... minor nitpick... the blue popups are slightly to the left of their data points, whereas the red popups are directly above their data points as they should be.