Limiting width of text to width of pv.Dot in bubble chart.

4 views
Skip to first unread message

Theo

unread,
Aug 13, 2010, 4:21:40 PM8/13/10
to protovis, th...@apple.com
I've a bubble chart. Like the example (http://vis.stanford.edu/
protovis/ex/bubble.html), my bubbles need to contain text, and the
text is often wider than the bubble (pv.Dot).

I'd like to truncate the text to the size of the bubble. The example
does this by showing fewer characters based on the square root of the
bubble's size. This doesn't seem very flexible and often shows less
text that could fit in the bubble.

Is there some other way to limit the text to the bubble's width?

The following post had some ideas regarding overflow and panels, but I
didn't know how to implement them:

http://groups.google.com/group/protovis/browse_thread/thread/d79a921eed1d8e44/4309bd98736ef238?lnk=gst&q=labels#4309bd98736ef238

Thanks for your help!
=theo

Jan van Gemert

unread,
Aug 14, 2010, 1:09:37 PM8/14/10
to protovis
Hi,

The post you refer to, talks about clipping the elements outside the
panel.
So, you could start your text further to the left in the bubble and
just put all text, which will automatically be cut off if it goes
outside the bubble.
This would show more text then the bubble example you refer to.

You could also use a bit of trigonometry to try to use some of the
free vertical space in the bubble.

For example, to put a line of text close to the top, inside the
bubble, let
TH = the height of the text
R = the radius
TW = width of the text

then they are related by:
(R - TH)^2 + (TW/2)^2 = R^2

so, if you want to put some text at the top, at position (R-TH) then
the text width will be:

TW = 2 * sqrt( R^2 - (R-TH)^2 )

And TW you have to divide by the size of a characters (for a fixed
width font) to get the number of letters.

In such a manner i guess you can fill up a bit of vertical space as
well.
(but maybe other people can think of a more elegant solution?)

Jan

On Aug 13, 10:21 pm, Theo <theoj...@gmail.com> wrote:
> I've a bubble chart. Like the example (http://vis.stanford.edu/
> protovis/ex/bubble.html), my bubbles need to contain text, and the
> text is often wider than the bubble (pv.Dot).
>
> I'd like to truncate the text to the size of the bubble. The example
> does this by showing fewer characters based on the square root of the
> bubble's size. This doesn't seem very flexible and often shows less
> text that could fit in the bubble.
>
> Is there some other way to limit the text to the bubble's width?
>
> The following post had some ideas regarding overflow and panels, but I
> didn't know how to implement them:
>
> http://groups.google.com/group/protovis/browse_thread/thread/d79a921e...
Reply all
Reply to author
Forward
0 new messages