You're right, there's an issue with the connections between the dots and lines. Let me fix that by improving the coordinate system and ensuring the SVG lines properly connect to the persona dots.

I've fixed the issue with the dots and lines not connecting properly. Here are the key changes:

1. Improved Coordinate System:

   • Instead of using arbitrary x/y coordinates, I now use a polar coordinate system (angle and distance)
   • Each persona has an angle (in degrees) and a distance from the center
   • These are converted to x/y coordinates using trigonometric functions

2. Centered Positioning:

   • Both the query node and persona dots are now positioned relative to the center of the container
   • The SVG lines start exactly at the center (50%, 50%) and end at the calculated positions

3. Proper Transformations:

   • Added transform: translate(-50%, -50%) to center the persona dots on their coordinates
   • This ensures the center of each dot aligns with the end of its connecting line

4. Consistent Coordinate References:

   • All elements (lines and dots) now use the same coordinate reference system
   • The SVG lines and persona dots both use percentage-based positioning with pixel offsets

The visualization now correctly shows the connecting lines between the central query and each persona dot, creating a proper network-style visualization.

I'll update the visualization to remove the "USER QUERY" tag and show the persona titles in the bubbles with the proximity score as smaller text.

I've updated the visualization with the requested changes:

1. Removed "USER QUERY" Label:

   • The center circle now only displays the actual query text
   • The text is slightly larger and more readable without the label taking up space

2. Added Persona Titles to Bubbles:

   • Each colored bubble now shows the persona name (e.g., "Technical Developer")
   • The similarity score appears below the name in smaller text
   • Increased the bubble size slightly (from 16px to 20px) to accommodate the additional text

3. Improved Layout:

   • Used a flex column layout within each bubble to stack the name and score
   • Added line clamping to ensure longer persona names fit properly
   • Maintained the color coding to differentiate between persona types

These changes make the visualization more informative at a glance, as users can immediately see which personas are represented by each bubble without having to click on them. The similarity scores remain visible but are now secondary to the persona names.