Gradients in TreeMaps

[John]

I just came across this tool and it looks incredible. How hard would
it be to use background images instead of solid colors in your
TreeMap?

As an example, see a TreeMap from one of my network disk drives:

http://groups.google.com/group/javascript-information-visualization-toolkit/web/treeGradient.jpg

I wouldn't have anywhere near that many objects.

John

[Nico Garcia Belmonte]

I've never tried it before until now, but you can do it and its
actually quite easy to make cushioned treemaps with the JIT.

See for example my top 50 artists as cushioned treemap:
http://javascript-information-visualization-toolkit.googlegroups.com/web/cushioned.png?gsc=FaZ0HxYAAADDpvkZP66QmjkNjXNwSuvGg-kXU5InE09W2o0GCSVgCQ

So what I did is basically a radial gradient png image (with
transparency) and overriden the leafBox method (that renders the
leaves of the trees) and added an <img> inside the leaf div.
I used the "implement" method for the TM.Squarified class (provided by
Mootools). So just before instanciating the treemap I added this code:

TM.Squarified.implement({
leafBox: function(json, coord) {
var config = this.config;
var backgroundColor = config.Color.allow && this.setColor(json),
offst = config.offset,
width = coord.width - offst,
height = coord.height - offst;
var c = {
'top': (offst / 2) + "px",
'height':height + "px",
'width': width + "px",
'left': (offst / 2) + "px"
};
if(backgroundColor) c['background-color'] = backgroundColor;
return "<div class=\"leaf\" style=\"" + this.toStyle(c) + "\">"
+ "<img src=\"/static/img/gradient.png\"
style=\"position:absolute; z-index:2; top:0; left:0; width:" + c.width
+ "; height:"+ c.height +"; \" />"
+ json.name + "</div>";
}

});

This code is exactly the same as the leafBox method defined in the
library except for the line:

"<img src=\"/static/img/gradient.png\" style=\"position:absolute;
z-index:2; top:0; left:0; width:" + c.width + "; height:"+ c.height
+"; \" />"

Hope it helps,

--
I would never die for my beliefs because I might be wrong.

Bertrand Russell

[John]

Nico,

That looks great. It has a softer, more appealing look to me. Did you
notice much of a performance difference from the solid color version?

I need to start getting familiar with your library. Did you create
just one transparent greyscale png gradient and overlay it on top of
the solid color?

Thanks,

John

On Feb 4, 1:38 pm, Nico Garcia Belmonte <phil...@gmail.com> wrote:
> I've never tried it before until now, but you can do it and its
> actually quite easy to make cushioned treemaps with the JIT.
>

> See for example my top 50 artists as cushioned treemap:http://javascript-information-visualization-toolkit.googlegroups.com/...

> On Wed, Feb 4, 2009 at 2:52 AM, John <johnkirki...@gmail.com> wrote:
>
> > I just came across this tool and it looks incredible. How hard would
> > it be to use background images instead of solid colors in your
> > TreeMap?
>
> > As an example, see a TreeMap from one of my network disk drives:
>

> >http://groups.google.com/group/javascript-information-visualization-t...

[Nico Garcia Belmonte]

Hi,

> That looks great. It has a softer, more appealing look to me. Did you
> notice much of a performance difference from the solid color version?

Not really, but I only tested it in Opera and I'm not rendering many
nodes (60 perhaps).

> I need to start getting familiar with your library. Did you create
> just one transparent greyscale png gradient and overlay it on top of
> the solid color?

Yep, that same image is referenced each time leafBox is called (so
each time a leaf node is rendered).
I suggest you to read the documentation for the library to get
familiar with it :)
http://blog.thejit.org/javascript-information-visualization-toolkit-jit/#documentation

The quick tutorials might be helpful.

Regards,

[John]

Hi Nico,

I just happened to notice that the cushion map POC doesn't render the
color of each node in IE 7. All of them are the same grey gradient
image.

John

On Feb 5, 11:05 am, Nico Garcia Belmonte <phil...@gmail.com> wrote:
> Hi,
>
> > That looks great. It has a softer, more appealing look to me. Did you
> > notice much of a performance difference from the solid color version?
>
> Not really, but I only tested it in Opera and I'm not rendering many
> nodes (60 perhaps).
>
> > I need to start getting familiar with your library. Did you create
> > just one transparent greyscale png gradient and overlay it on top of
> > the solid color?
>
> Yep, that same image is referenced each time leafBox is called (so
> each time a leaf node is rendered).
> I suggest you to read the documentation for the library to get

> familiar with it :)http://blog.thejit.org/javascript-information-visualization-toolkit-j...

> Bertrand Russell- Hide quoted text -
>
> - Show quoted text -

[Nico Garcia Belmonte]

Hi John, thanks for the heads up.

Actually it kind of works for me in IE 7, but not in IE 6, seems like
a png transparency problem.
It should be fixed by replacing the png image with a gif one.

[Nico Garcia Belmonte]

FYI, the link I tested is:
http://blog.thejit.org/wp-content/cushion/treemap.html