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

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

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

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.

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

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

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!

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.

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:

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 ]]> http://blog.rollstudio.it/2009/10/the-jflip-plugin/feed/ 2 http://blog.rollstudio.it/2009/08/playing-the-building-%e2%80%93-an-installation-by-david-byrne/ http://blog.rollstudio.it/2009/08/playing-the-building-%e2%80%93-an-installation-by-david-byrne/#comments Wed, 12 Aug 2009 16:35:38 +0000 Francesco http://blog.rollstudio.it/?p=38

Today I’d like to talk about a topic that is not inherent to our work, but Roll blog is also a window on the outside for Roll’s People.

I’ve decided to talk about Playing the Building -an installation of David Byrne – that is placed in the RoundHouse Cafè in London, maybe because i’m a crazy fan of Talking Heads.

David’s idea is pretty strange and mad, but certainly fascinating : a building become a music instrument.. and i think that Byrne did it!

He attached to an old organ, set at the center of the Roundhouse, a series of cables and wires attached to the building’s pillars and beams. Then he puts metallic elements that vibrate and resonate in response to the organ keys. And now the building is ready to compose melodies!

There’ll be also jam sessions with Orphy Robinson, Leon Mitchner and Dj Walde on 13, 20 and 27 August. Evrybody can bring his instrument (only acoustic) and take part in an improvised session.

If someone have the possibility to go in London in these days i think that is not a bad idea to visit the RoundHouse.

For more info visit davidbyrne.com/playingthebuilding

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.