CODEWITHSUNDEEP
javascriptjqueryhtmlweb
Cristobal Wetzig
Cristobal Wetzig

Reputation: 381

What is this chart called? How do I reproduce it in a web browser?

I'm perfectly aware this is a google away. Unfortunately I don't know the name of the chart I'm looking for. So I'm unable to make a reasonable search for plugins or API's. Please be kind.

What is this type of charts called?

What i want to do: Draw a chart similar to below in a webbrowser, given input as a list of "sizes". Preferably with a jquery plugin or javascript API.

In the image below the sizes happens to be Disk-sizes.

Upvotes: 6

Views: 227

Answers (4)

abcde123483
abcde123483

Reputation: 3905

It is a Treemap chart. You can use Google's API to recreate it on the web:

http://code.google.com/apis/chart/interactive/docs/gallery/treemap.html

Upvotes: 7

dMb
dMb

Reputation: 9367

This is called a Tree Map. You can reproduce using a number of JavaScript libraries. Here are a couple:

  1. Protovis
  2. D3.js

Note: D3 is actually a rewrite of Protovis.

Upvotes: 4

Matt Ball
Matt Ball

Reputation: 360016

Well, the screenshot is straight from http://www.derlien.com, where they call it a "treemap."

Upvotes: 3

Sir Crispalot
Sir Crispalot

Reputation: 4854

It is called a Treemap.

See http://en.wikipedia.org/wiki/Treemapping.

Upvotes: 5

Related Questions