Roll dock » Inside roll

The “TreeMap” plugin

admin — Mon, 23 Nov 2009 12:37:05 +0000

Demo

In the wild

oursignal.com

A bit of history

How many times it happens to you to have few space on your hard disk and to want to know which are the folders that take most of the space? You would surely have liked a tool able to visualize these informations in a way easily understandable. Right for this task, in 1990, a professor from University of Maryland, Ben Shneiderman, created the TreeMaps. The TreeMaps show data with rectangles with areas proportional to their value and with background colors.

Here is a nickel new jQuery plugin that will allow you to show TreeMaps on your site starting from datas in a simple HTML table or from other sources too.

How it works

The plugin is made of only one function treemap that, applied to a jQuery object, replaces it with the TreeMap generated from the supplied datas.

If the jQuery object contains some HTML tables, the function treemap will extract automatically the data from the table [1] and will replace it with a Treemap

Here is an example:

To create a Treemap of dimensions 640×480 starting from the tables in the page:

jQuery("table").treemap(640,480);

If the table datas are not in the first and the second column (and eventually in the third one for the color) you can set which are the columns containing the data to use (options labelCell, dataCell and colorCell):

To create a Treemap of dimensions 640×480 starting from the tables in the page, retrieving the descriptions from the 3rd column and the data from the 5th:

jQuery("table").treemap(640,480,{labelCell:2,dataCell,4});

If I would preserve the table in the page, I’d only need to set the element inside which I want to create the Treemap (option target):

To create a Treemap of dimensions 640×480 starting from the table with id “data” inside the element with id “map”:

jQuery("table#data").treemap(640,480,{target:"#map"});

If the jQuery object contains elements other than tables, or if you want to pre-process the datas before the creation of the Treemap, you can provide a function that will have the responsibility to extract the datas (option getData):

To create a TreeMap from datas in an unordered list





Description

100



...


...

jQuery(“ul”).treemap(640,480,{getData:getDataFromUL});

function getDataFromUL(el) {
var data = [];
jQuery(“li”,el).each(function(){
var item = jQuery(this);
var row = [item.find("span.desc").html(),item.find("span.data").html()];
data.push(row);
});
return data;
}

The fuction getData takes as argument the element to which the plugin is applied and returns an array in which every element is in turn an array containing the description and the value of the data in the first and second item respectively (and eventually another data in the third item shown with a color code).

Here is an example of an array returned by getData:

[
  ['descr1',1],
  ['descr2',2],
  ['descr3',3]
]

To create hierarchical TreeMap, you only need to provide in the options a function getData that returns a slightly different array. Instead of the value, that was in the second item of every row of the previous array, you need to put a new array of datas, as you can see below:

[
  ['level1',[
    ['level1-data1,1],
    ['level1-data2,2],
    ['level1-data3,3]
    ]
  ],
  ['level2',[
    ['level2-data1,1],
    ['level2-data2,2],
    ['level2-data3,3]
    ]
  ],
  ['level3',[
    ['level3-data1,1],
    ['level3-data2,2],
    ['level3-data3,3]
    ]
  ]
]

The data visualization looks better if these last are sorted. The TreeMap plugin can automatically sort data setting the sort option

jQuery("ul").treemap(640,480,{getData:getDataFromUL,sort:true});

Another option (headHeight) can be used to set the height, in pixels, of the headings of the hierarchical groups. To disable the headings, you can set headHeight to 0

jQuery("ul").treemap(640,480,{getData:getDataFromUL,headHeight:0});

To set the width, in pixel, of the borders between cells, the option borderWidth is available.

When data contain the secondary value too to show the rectangle color, you can show a color legend with the legend option. The legend automatically detects if the secondary data is a numeric one or not, showing a color gradient in the first case or a discontinue list of colors in the second one.

jQuery("ul").treemap(640,480,{getData:getDataFromUL,legend:true});

By default, the legend value description is just the secondary data. However you can set a callback function descriptionCallback able to generate different descriptions starting from the secondary data

jQuery("ul").treemap(640,480,{getData:getDataFromUL,descriptionCallback:generateDescription});

function generateDescription(val) {return “Value: “+val;}

The styles

To attach styles to the TreeMaps here there are CSS classes to know:

.treemapView
The class of the element that “contains” the treemap. For hierarchical treemaps, the cells of the higher levels contain an element with the class .treemapView

.treemapSquare
The class of the element that contains a “row” od cells. The row can be horizontal or vertical

.treemapH,.treemapV
The class that sets the orientation of a row

.treemapCell
The class of a sigle cell.

.treemapHead
The class of the headings for hierarchical treemaps

.treemapLegend
The class of the legend bar

.treemapLegendDescr
The class of the legend descriptions

Download the plugin

Footnotes

[1] by default the label is supposed to be in the first column, the relative main data in the second one (area), the optional secondary data in the third one (color)

By Renato Formato

DONNAèWEB 2009, 7 nomination, 6 sites, 5 categories

admin — Thu, 19 Nov 2009 10:04:46 +0000

Roll Multimedia Design at Donna è Web!

Below the noinations:

EVENTI
Lara Belcastro http://comicsxafrica.org
Luisa Tatoli http://www.lasagradellacastagna.it

GIURIA GIOVANI
Lara Belcastro http://comicsxafrica.org
Luisa Tatoli http://www.silvianheachkids.it

IMPRESA/ECOMMERCE
Lara Belcastro http://www.zipdesign.co….uk

WEB AGENCY
Lara Belcastro http://www.rollstudio.it

WEB DESIGN
Lara Belcastro http://www.guiltypleasures.co.uk

The feminine side of the web:
DONNAéWEB is an award born in 2004 to promote female professionals in the web field. A prize to valorise women who works in IT in private companies, in the public and no-profit sector. Take part in the contest! DonnaèWeb is now an international award!

The jFlip plugin

admin — Fri, 30 Oct 2009 10:52:50 +0000

A flipping page gallery

This plugin builds an image gallery made as a book.

You can flip the book pages to view the next or previous image clicking or dragging the animated corners shown when hovering on the gallery area.

By the way, no flash needed!

Author: Renato Formato.

Documentation

The plugin needs jquery 1.2.3. Tested with all jquery compatible browsers.

IE needs a modified version of excanvas I wrote that supports patterns (with a special feature to scale patterns) and rotated linear gradient.

You need to add the following line to the head:

How to use the plugin

The plugin finds all the images inside the provided selector and build the flipping book gallery.

$(selector).jFlip(width,height,options)

Arguments

width (number – default 300) : width of the canvas in px
height (number – default 300) : height of the canvas in px
options (hash) :
- background (string – default “green”) : background color when images are smaller than canvas (“red”,”#FFF”,”rgba(255,255,255)”)
- cornersTop (boolean – default true) : true for top corners, false for bottom ones
- scale (string – default “noresize”) :
  - “noresize” images are not resized
  - “fit” big images are resized to be completely visible
  - “fill” all images are resized keeping aspect ratio to fill the canvas
- gradientColors (array of strings – default [’#4F2727’,’#FF8F8F’,’#F00’]) : the colors the corners (dark color, light color, plain color) since version 0.4
- curlSize (number – default 0.1) : the size of the corner as a fraction of height/width (ex: 0.1 sets corner width = jflip width*0.1 and corner height = jflip height*0.1) since version 0.4

Events – since version 0.4

The elements on which jFlip is applied can bind the flip.jflip event, triggered on page flip

The event handler has the following signature:

function(event,current_page,total_pages)

Download

Update v0.4 (28/2/2009): New options to change the corners color and size. New event flip.jflip triggered on page flip

jFlip v0.4 (14 kB – great to debug or to read the code)

jFlip v0.4 minified (6kB – for production use)

excanvasX updated with latest additions and bug fixes from google

Update v0.3 (15/6/2008): Fixed a bug with IE and mouse move management.

jFlip v0.3 (13 kB – great to debug or to read the code)

jFlip v0.3 minified (7kB – for production use)

excanvasX

Demo

view the examples

By Renato Formato

Vappensiero for Facebook

Francesco — Sun, 06 Sep 2009 05:46:51 +0000

Hello Folks!

We’re proud to present our first Facebook app, called “vappensiero!” ,that is born just for fun during our “creative summer vacations”.

With the cooperation of several persons , we have decided to test our abilities in this unknow (for us) experience.

We’ll postpone the development notes to a new post, which will describe the technical aspects concerning to our approach with the Facebook platform.

The hilarious topic of the app is inspirated by the politic facts that day by day we found on italian newspapers and tv news.

Obviously the proclaims that we listen evryday make us laugh, helping us to review the concepts in a satirical side. Sometimes the quotes are funny too and so we get them as they are.

The quotes are marked by a detectable source , by author and , when is possibile,by context.

If you want to inspect the sources , you can send an email at vappensiero@rollstudio.it

We’d like to collaborate with the readers that found this topic interesting,sending us quotes and periods at vappensiero@rollstudio.it, specifying source, date and author.

We express gratitude to our green volunteers that have worked to the development and the realization of this idea : further the die-hard Renato, Orlando, Lara and Luisa , we’d like to report the precious help of Andrea Gioseffi & Francesco Leone for texts and quotes , Marco Perugini for the caricatures and our fans for the support.

Silvian Heach Kids movie

admin — Thu, 20 Aug 2009 13:29:02 +0000

Web parade Silvian Heach Kids from ROLL on Vimeo.

Welcome aboard.

admin — Mon, 10 Aug 2009 16:24:13 +0000

Here’s the new Roll Blog : and there are too many reasons.. we’d like to focus our blog on some categories that will move this space.

Works – Sometimes we need to explain how a work is born , how it grows , what are the reasons that have get us to our work’s choises and how we overcomed our difficulties. A space where we can compare our know-how with the others professionals one.

Lab – Lab & workshops , our lab is a new division of research , where we estimate new experimentations of different kind, from hardware to software. We develop several apps (from Arduino to Facebook, going trough 3D and Flash) oriented to the interaction design.

Neighbors – In our professional path we have the luck to work with prestigious web and design agencies. We’d like to dedicate a space to them that , project by project , permit us to try on new challenges always more exciting.

Http – Impossible for us to not dedicate a space at the informations that daily influence our work and our lifes.