Add D3 bubble chart

Here I'm adding a new component named BubbleChart.vue that creates an svg with a D3 chart inside. Should look like this when built:

I'm using onMounted and ref from vue to read in the data and make it reactive. I'm not sure the reactivity part is actually needed, but this worked for me.

In the createBubbleChart function I draw the svg, define scales and positioning, map to the data, and define the movements and interactions. Movement and positioning is defined by the force simulation. Part of the challenge here is to define and set the forces to do what you want. For this single view with the different bubble clusters it seems to be working well. In the future we may need to adapt this to incorporate transitions between different forces, to move the bubbles around to communicate different points.

I also added a drag effect to the bubbles to make them fun to play with. I started to write a mouseover function that would include a label for determinant on hover, but the tooltip is not working in current form.

When you review it, make sure you can recreate the expected output and the drag and drop interaction works. Let me know if you have any feedback, comments, or questions on how I've set up the code. Then you could either try to incorporate other elements on the page, like the layout and text placeholders, or work on the mouseover effect, or just experiment with other additions and ways we could use the bubble chart setup.