New layout: Cloud

[Nick R]

Hello all -

I made a new layout that I thought might be useful to others:
http://www.nickrabinowitz.com/projects/protovis_cloud/cloud.html

As you can see from the example, it comes in three flavors:
pv.Layout.Cloud.Circle, pv.Layout.Cloud.Box, and pv.Layout.Cloud.Text.
The Circle option in particular might be useful to anyone not thrilled
with the existing pv.Layout.Pack implementation for bubble charts.
Please note that the Text class currently has a dependency on jQuery
to determine the pixel size of rendered text - it wouldn't be too hard
to rewrite this in core javascript, but this was easier and quicker.

In case anyone's interested, the inspiration here was the algorithm
for Wordle, described here: http://stackoverflow.com/questions/342687/algorithm-to-implement-something-like-wordle
. My layout does essentially the same thing, though I use a somewhat
simpler collision-detection approach. My implementation seems pretty
efficient (in FF and Chrome, at least) up to 500 or so data points.
Unfortunately it can't match Wordle for text layout, because I'm just
using the bounding box, not the vector shape of the letters - I doubt
this is possible in Protovis at the moment.

Anyway - enjoy, and let me know if you have comments or questions. If
any Protovis maintainers are interested in putting this into the core
library, let me know, and I'd be happy to fully comment/document it.
There are also a couple of technical issues that I lacked the time (or
skill) to address: Sizing the full cloud to the containing panel
(might be difficult and/or undesirable, or it might be as simple as
applying a transform to everything at the end of buildImplied); coming
up with optimal values for my collision detection grid and spiral (I
basically came to my defaults through trial and error, but it might be
quite different with other kinds of data). If anyone has any thoughts
on these, I'd love to hear them.

Yours,
-Nick

[Lars Grammel]

Hi Nick,

the layout looks great!

Under what license is it available?

Cheers,

Lars

> --
> You received this message because you are subscribed to the Google Groups "protovis" group.
> To post to this group, send email to prot...@googlegroups.com.
> To unsubscribe from this group, send email to protovis+u...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/protovis?hl=en.
>
>

--
Lars Grammel
PhD Candidate, University of Victoria
http://larsgrammel.de
http://lgrammel.blogspot.com/
http://twitter.com/lgrammel

[Nick Rabinowitz]

Good point. I just put an MIT license on the layout code: http://www.nickrabinowitz.com/projects/protovis_cloud/Layout.Cloud.js

I think that should be fine for the moment.

-Nick

[Jean Véronis]

Hi Nick,

This is indeed very nice. I've been been working on various types of word cloud representations, and I have looking for something like that for quite a while. I haven't looked at your code yet (and I my expertise level with protovis is very low for the time being), but I assume it wouldn't be took hard to make the words clickable, along the lines of Tagul (http://tagul.com/) which is a really nice variant of Wordle.

--j

2011/3/16 Nick R <nick.ra...@gmail.com>

[Nick Rabinowitz]

Hi Jean -

Thanks, glad you like it. Yes, you can make the words clickable - the Text layout exposes both layout.node and layout.label, similarly to some of the network layouts. If you add a pv.Bar or a pv.Panel to layout.node, it can support any kind of standard Protovis interactions (clicking, mouseover, etc). So you could use the Text layout like a standard tag cloud, clicking to access items tagged with that word. Note that you can set the "alternate" property on the text cloud to "true" in order to rotate every other word 90 degrees, if you prefer - though in my tests so far, this tends to give a looser cloud.

-Nick

[Jean Véronis]

I'll definitely give it a try -- a good exercice for a begginer like me, I guess !
Many thanks
--j

2011/3/16 Nick Rabinowitz <nick.ra...@gmail.com>

[Pedro Alves]

Hey there, I'm definetly interesting on putting this into CCC. We
maintain our own protovis version at:
https://github.com/pmalves/protovis , transition branch, so if you want
tell me where you have your code and I'll pull it

Great work!

-pedro

[JanWillem Tulp]

That looks nice... would be great if this layout would be ported to D3
as well!

Great job!

On Mar 16, 11:32 pm, Pedro Alves <pmgal...@gmail.com> wrote:
> Hey there, I'm definetly interesting on putting this into CCC. We

> maintain our own protovis version at:https://github.com/pmalves/protovis, transition branch, so if you want

> tell me where you have your code and I'll pull it
>
> Great work!
>
> -pedro
>
> On 11/03/16 20:40, Nick R wrote:
>
>
>
>
>
>
>
> > Hello all -
>
> > I made a new layout that I thought might be useful to others:
> >http://www.nickrabinowitz.com/projects/protovis_cloud/cloud.html
>
> > As you can see from the example, it comes in three flavors:
> > pv.Layout.Cloud.Circle, pv.Layout.Cloud.Box, and pv.Layout.Cloud.Text.
> > The Circle option in particular might be useful to anyone not thrilled
> > with the existing pv.Layout.Pack implementation for bubble charts.
> > Please note that the Text class currently has a dependency on jQuery
> > to determine the pixel size of rendered text - it wouldn't be too hard
> > to rewrite this in core javascript, but this was easier and quicker.
>
> > In case anyone's interested, the inspiration here was the algorithm

> > for Wordle, described here:http://stackoverflow.com/questions/342687/algorithm-to-implement-some...