Question

I’m looking at some Google charts to get a feel for how to write SVG code. There’s something curious about the dots on the scatter plots (these are just coloured dots superimposed on a grid).

Every dot is drawn twice, once as a large (r=12) zero-stroke white circle, and once again as a small (r=3.5) circle in the required colour:

<circle cx="304.73" cy="61.50050223557585" r="12" stroke="none" stroke-width="0" fill-opacity="0" stroke-opacity="0" stroke-dasharray="0" fill="#ffffff"></circle>
...
<circle cx="304.73" cy="61.50050223557585" r="3.5" stroke="#dc3912" stroke-width="2" fill-opacity="1" stroke-opacity="1" stroke-dasharray="0" fill="#dc3912"></circle>

Any idea what the point of this? Removing the blank circles makes absolutely no (obvious) difference to the output. I’ve played around with moving a (combined) dot until it’s on top of a grid line, or overlapping another dot, and changing the size of the blank circle, but I can’t see that it does anything at all.

Thanks –

Al

Answer 1

I think it’s there to trigger events for the tool-tip. You only need to move your mouse near to (within 12 pixels) a point on the scatter plot for it to display that point’s information.