mongo3 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.bnignore +3 -0
- data/.bnsignore +16 -0
- data/.gitignore +1 -0
- data/HISTORY +2 -0
- data/README.rdoc +78 -0
- data/Rakefile +31 -0
- data/bin/mongo3 +29 -0
- data/config/mongo3.yml +33 -0
- data/lib/controllers/collections.rb +7 -0
- data/lib/controllers/databases.rb +7 -0
- data/lib/controllers/explore.rb +46 -0
- data/lib/helpers/crumb_helper.rb +46 -0
- data/lib/helpers/main_helper.rb +43 -0
- data/lib/main.rb +41 -0
- data/lib/mongo3/connection.rb +191 -0
- data/lib/mongo3/node.rb +80 -0
- data/lib/mongo3.rb +57 -0
- data/lib/public/images/c292199_a.jpg +0 -0
- data/lib/public/images/close.png +0 -0
- data/lib/public/images/close.psd +0 -0
- data/lib/public/images/cluster.png +0 -0
- data/lib/public/images/cluster.psd +0 -0
- data/lib/public/images/db.jpg +0 -0
- data/lib/public/images/db.png +0 -0
- data/lib/public/images/db.psd +0 -0
- data/lib/public/images/delete.png +0 -0
- data/lib/public/images/header.png +0 -0
- data/lib/public/images/header.psd +0 -0
- data/lib/public/images/li_select.png +0 -0
- data/lib/public/images/li_select.psd +0 -0
- data/lib/public/images/lock.png +0 -0
- data/lib/public/images/lock.psd +0 -0
- data/lib/public/images/mongo.png +0 -0
- data/lib/public/images/mongo.psd +0 -0
- data/lib/public/images/mongo3.png +0 -0
- data/lib/public/images/mongo3.psd +0 -0
- data/lib/public/images/mongo3_db.png +0 -0
- data/lib/public/images/mongo3_db.psd +0 -0
- data/lib/public/images/mongo_10.psd +0 -0
- data/lib/public/images/mongo_db.jpg +0 -0
- data/lib/public/images/mongo_db.png +0 -0
- data/lib/public/images/mongo_db.psd +0 -0
- data/lib/public/images/mongo_db_1.jpg +0 -0
- data/lib/public/images/mongo_db_2 +0 -0
- data/lib/public/images/mongo_db_4 +0 -0
- data/lib/public/images/monkey.jpg +0 -0
- data/lib/public/images/monkey.png +0 -0
- data/lib/public/images/monkey.psd +0 -0
- data/lib/public/images/monkey_1.jpg +8 -0
- data/lib/public/images/monkey_10.jpg +8 -0
- data/lib/public/javascripts/Jit/Examples/Hypertree/example1.html +57 -0
- data/lib/public/javascripts/Jit/Examples/Hypertree/example1.js +427 -0
- data/lib/public/javascripts/Jit/Examples/Hypertree/example2.html +58 -0
- data/lib/public/javascripts/Jit/Examples/Hypertree/example2.js +310 -0
- data/lib/public/javascripts/Jit/Examples/Hypertree/example3.html +199 -0
- data/lib/public/javascripts/Jit/Examples/Hypertree/example3.js +615 -0
- data/lib/public/javascripts/Jit/Examples/Other/example1.html +58 -0
- data/lib/public/javascripts/Jit/Examples/Other/example1.js +566 -0
- data/lib/public/javascripts/Jit/Examples/Other/example2.html +58 -0
- data/lib/public/javascripts/Jit/Examples/Other/example2.js +304 -0
- data/lib/public/javascripts/Jit/Examples/Other/example3.html +58 -0
- data/lib/public/javascripts/Jit/Examples/Other/example3.js +304 -0
- data/lib/public/javascripts/Jit/Examples/RGraph/example1.html +57 -0
- data/lib/public/javascripts/Jit/Examples/RGraph/example1.js +475 -0
- data/lib/public/javascripts/Jit/Examples/RGraph/example2.html +58 -0
- data/lib/public/javascripts/Jit/Examples/RGraph/example2.js +356 -0
- data/lib/public/javascripts/Jit/Examples/RGraph/example3.html +199 -0
- data/lib/public/javascripts/Jit/Examples/RGraph/example3.js +622 -0
- data/lib/public/javascripts/Jit/Examples/Spacetree/example1.html +91 -0
- data/lib/public/javascripts/Jit/Examples/Spacetree/example1.js +890 -0
- data/lib/public/javascripts/Jit/Examples/Spacetree/example2.html +90 -0
- data/lib/public/javascripts/Jit/Examples/Spacetree/example2.js +213 -0
- data/lib/public/javascripts/Jit/Examples/Spacetree/example3.html +75 -0
- data/lib/public/javascripts/Jit/Examples/Spacetree/example3.js +863 -0
- data/lib/public/javascripts/Jit/Examples/Treemap/example1.html +56 -0
- data/lib/public/javascripts/Jit/Examples/Treemap/example1.js +95 -0
- data/lib/public/javascripts/Jit/Examples/Treemap/example2.html +61 -0
- data/lib/public/javascripts/Jit/Examples/Treemap/example2.js +750 -0
- data/lib/public/javascripts/Jit/Examples/Treemap/example3.html +62 -0
- data/lib/public/javascripts/Jit/Examples/Treemap/example3.js +775 -0
- data/lib/public/javascripts/Jit/Examples/css/Hypertree.css +0 -0
- data/lib/public/javascripts/Jit/Examples/css/Other.css +8 -0
- data/lib/public/javascripts/Jit/Examples/css/RGraph.css +0 -0
- data/lib/public/javascripts/Jit/Examples/css/Spacetree.css +0 -0
- data/lib/public/javascripts/Jit/Examples/css/Treemap.css +78 -0
- data/lib/public/javascripts/Jit/Examples/css/base.css +106 -0
- data/lib/public/javascripts/Jit/Examples/css/col1.png +0 -0
- data/lib/public/javascripts/Jit/Examples/css/col2.png +0 -0
- data/lib/public/javascripts/Jit/Examples/css/gradient.png +0 -0
- data/lib/public/javascripts/Jit/Extras/excanvas.js +35 -0
- data/lib/public/javascripts/Jit/jit-yc.js +1 -0
- data/lib/public/javascripts/Jit/jit.js +9052 -0
- data/lib/public/javascripts/Jit-1.1.3.zip +0 -0
- data/lib/public/javascripts/application.js +28 -0
- data/lib/public/javascripts/jit.min.js +1 -0
- data/lib/public/javascripts/jquery.tools.min.js +38 -0
- data/lib/public/javascripts/jquery_min.js +19 -0
- data/lib/public/javascripts/jquery_ui_min.js +298 -0
- data/lib/public/stylesheets/mongo3.css +275 -0
- data/lib/utils.rb +3 -0
- data/lib/views/_cltn_info.erb +95 -0
- data/lib/views/_collection.erb +5 -0
- data/lib/views/_crumbs.erb +13 -0
- data/lib/views/_dump_array.erb +5 -0
- data/lib/views/_dump_hash.erb +14 -0
- data/lib/views/_info.erb +15 -0
- data/lib/views/center_js.erb +3 -0
- data/lib/views/cltn_show.erb +1 -0
- data/lib/views/collection.erb +44 -0
- data/lib/views/database.erb +37 -0
- data/lib/views/db_show.erb +1 -0
- data/lib/views/explore.erb +250 -0
- data/lib/views/landscape.erb +45 -0
- data/lib/views/layout.erb +28 -0
- data/lib/views/more_data_js.erb +3 -0
- data/lib/views/show_cltn.erb +1 -0
- data/lib/views/update_crumb_js.erb +1 -0
- data/spec/mongo3/node_spec.rb +84 -0
- data/spec/spec_helper.rb +8 -0
- data/tasks/bones.rake +20 -0
- data/tasks/gem.rake +201 -0
- data/tasks/git.rake +40 -0
- data/tasks/notes.rake +27 -0
- data/tasks/post_load.rake +32 -0
- data/tasks/rdoc.rake +56 -0
- data/tasks/rubyforge.rake +55 -0
- data/tasks/setup.rb +292 -0
- data/tasks/spec.rake +54 -0
- data/tasks/svn.rake +47 -0
- data/tasks/test.rake +40 -0
- data/tasks/zentest.rake +36 -0
- metadata +213 -0
@@ -0,0 +1,56 @@
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2
|
+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
3
|
+
<head>
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
5
|
+
<title>Treemap - Squarified Treemap with on-demand nodes</title>
|
6
|
+
|
7
|
+
<!-- CSS Files -->
|
8
|
+
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
9
|
+
<link type="text/css" href="../css/Treemap.css" rel="stylesheet" />
|
10
|
+
|
11
|
+
|
12
|
+
<!-- JIT Library File -->
|
13
|
+
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
14
|
+
|
15
|
+
<!-- Example File -->
|
16
|
+
<script language="javascript" type="text/javascript" src="example1.js"></script>
|
17
|
+
</head>
|
18
|
+
|
19
|
+
<body onload="init();">
|
20
|
+
<div id="container">
|
21
|
+
|
22
|
+
<div id="left-container">
|
23
|
+
|
24
|
+
|
25
|
+
|
26
|
+
<div class="text">
|
27
|
+
<h4>
|
28
|
+
Squarified Treemap with on-demand nodes
|
29
|
+
</h4>
|
30
|
+
|
31
|
+
This example shows how you can use the <b>request</b> controller method to create a Treemap with <em>on demand</em> nodes<br /><br />
|
32
|
+
There should be only one level shown at a time. <br /><br />
|
33
|
+
Clicking on a band should show a new treemap with its most listened albums.
|
34
|
+
|
35
|
+
</div>
|
36
|
+
|
37
|
+
<div id="id-list"></div>
|
38
|
+
|
39
|
+
|
40
|
+
<div style="text-align:center;"><a href="example1.js">See the Example Code</a></div>
|
41
|
+
</div>
|
42
|
+
|
43
|
+
<div id="center-container">
|
44
|
+
<div id="infovis"></div>
|
45
|
+
</div>
|
46
|
+
|
47
|
+
<div id="right-container">
|
48
|
+
|
49
|
+
<div id="inner-details"></div>
|
50
|
+
|
51
|
+
</div>
|
52
|
+
|
53
|
+
<div id="log"></div>
|
54
|
+
</div>
|
55
|
+
</body>
|
56
|
+
</html>
|
@@ -0,0 +1,95 @@
|
|
1
|
+
var Log = {
|
2
|
+
elem: false,
|
3
|
+
write: function(text){
|
4
|
+
if (!this.elem)
|
5
|
+
this.elem = document.getElementById('log');
|
6
|
+
this.elem.innerHTML = text;
|
7
|
+
this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
|
8
|
+
}
|
9
|
+
};
|
10
|
+
|
11
|
+
function addEvent(obj, type, fn) {
|
12
|
+
if (obj.addEventListener) obj.addEventListener(type, fn, false);
|
13
|
+
else obj.attachEvent('on' + type, fn);
|
14
|
+
};
|
15
|
+
|
16
|
+
|
17
|
+
function init(){
|
18
|
+
|
19
|
+
//init data
|
20
|
+
var json = "{children:[{children:[{children:[], data:{$area:\"80\", $color:\"30\", image:\"http://images.amazon.com/images/P/B0007DAZW8.01.MZZZZZZZ.jpg\"}, id:\"056e4f3e-d505-4dad-8ec1-d04f521cbb56Human After All\", name:\"Human After All\"}], data:{$area:80}, id:\"056e4f3e-d505-4dad-8ec1-d04f521cbb56a\", name:\"Daft Punk\"}, {children:[{children:[], data:{$area:\"94\", $color:\"23\", image:\"http://cdn.last.fm/coverart/130x130/2393956.jpg\"}, id:\"f2fa5cf6-e0b0-4559-8641-e033f1a9e6fcClearing the Channel\", name:\"Clearing the Channel\"}], data:{$area:94}, id:\"f2fa5cf6-e0b0-4559-8641-e033f1a9e6fca\", name:\"Sinch\"}, {children:[{children:[], data:{$area:\"211\", $color:\"2\", image:\"http://cdn.last.fm/coverart/130x130/2564320-1193176651.jpg\"}, id:\"4bd95eea-b9f6-4d70-a36c-cfea77431553Music Bank\", name:\"Music Bank\"}], data:{$area:211}, id:\"4bd95eea-b9f6-4d70-a36c-cfea77431553a\", name:\"Alice in Chains\"}, {children:[{children:[], data:{$area:\"153\", $color:\"6\", image:\"http://userserve-ak.last.fm/serve/174s/8590493.jpg\"}, id:\"8bfac288-ccc5-448d-9573-c33ea2aa5c30One Hot Minute\", name:\"One Hot Minute\"}, {children:[], data:{$area:\"69\", $color:\"35\", image:\"http://userserve-ak.last.fm/serve/174s/8593509.jpg\"}, id:\"8bfac288-ccc5-448d-9573-c33ea2aa5c30Californication\", name:\"Californication\"}, {children:[], data:{$area:\"69\", $color:\"35\", image:\"http://userserve-ak.last.fm/serve/174s/8672727.jpg\"}, id:\"8bfac288-ccc5-448d-9573-c33ea2aa5c30Greatest Hits\", name:\"Greatest Hits\"}], data:{$area:291}, id:\"8bfac288-ccc5-448d-9573-c33ea2aa5c30a\", name:\"Red Hot Chili Peppers\"}, {children:[{children:[], data:{$area:\"114\", $color:\"15\", image:\"http://images.amazon.com/images/P/B0000UX5IY.01._SCMZZZZZZZ_.jpg\"}, id:\"ff6e677f-91dd-4986-a174-8db0474b1799Thicker Than Water\", name:\"Thicker Than Water\"}, {children:[], data:{$area:\"83\", $color:\"28\", image:\"http://userserve-ak.last.fm/serve/174s/8599099.jpg\"}, id:\"ff6e677f-91dd-4986-a174-8db0474b1799On and On\", name:\"On and On\"}, {children:[], data:{$area:\"62\", $color:\"41\", image:\"http://userserve-ak.last.fm/serve/174s/8664981.jpg\"}, id:\"ff6e677f-91dd-4986-a174-8db0474b1799Brushfire Fairytales\", name:\"Brushfire Fairytales\"}], data:{$area:259}, id:\"ff6e677f-91dd-4986-a174-8db0474b1799a\", name:\"Jack Johnson\"}, {children:[{children:[], data:{$area:\"65\", $color:\"38\", image:\"http://userserve-ak.last.fm/serve/174s/23727633.jpg\"}, id:\"83b9cbe7-9857-49e2-ab8e-b57b01038103Vs.\", name:\"Vs.\"}, {children:[], data:{$area:\"61\", $color:\"44\", image:\"http://userserve-ak.last.fm/serve/174s/19611679.jpg\"}, id:\"83b9cbe7-9857-49e2-ab8e-b57b01038103Riot Act\", name:\"Riot Act\"}, {children:[], data:{$area:\"61\", $color:\"44\", image:\"http://userserve-ak.last.fm/serve/174s/17492447.jpg\"}, id:\"83b9cbe7-9857-49e2-ab8e-b57b01038103Yield\", name:\"Yield\"}], data:{$area:187}, id:\"83b9cbe7-9857-49e2-ab8e-b57b01038103a\", name:\"Pearl Jam\"}, {children:[{children:[], data:{$area:\"115\", $color:\"14\", image:\"http://userserve-ak.last.fm/serve/174s/17484209.jpg\"}, id:\"bfd085b8-0bbf-46b3-8ab9-193bca5c85e7Above\", name:\"Above\"}], data:{$area:115}, id:\"bfd085b8-0bbf-46b3-8ab9-193bca5c85e7a\", name:\"Mad Season\"}, {children:[{children:[], data:{$area:\"108\", $color:\"17\", image:\"http://images.amazon.com/images/P/B000002J8M.01._SCMZZZZZZZ_.jpg\"}, id:\"8c32bb01-58a3-453b-8050-8c0620edb0e5Tiny Music... Songs From the Vatican Gift Shop\", name:\"Tiny Music... Songs From the Vatican Gift Shop\"}, {children:[], data:{$area:\"60\", $color:\"46\", image:\"http://images.amazon.com/images/P/B000002IU3.01.MZZZZZZZ.jpg\"}, id:\"8c32bb01-58a3-453b-8050-8c0620edb0e5Core\", name:\"Core\"}], data:{$area:168}, id:\"8c32bb01-58a3-453b-8050-8c0620edb0e5a\", name:\"Stone Temple Pilots\"}, {children:[{children:[], data:{$area:\"63\", $color:\"40\", image:\"http://images.amazon.com/images/P/B00005NWLC.01.MZZZZZZZ.jpg\"}, id:\"7b2f87f6-db90-464e-a27a-deb4f7219e90Leitmotif\", name:\"Leitmotif\"}], data:{$area:63}, id:\"7b2f87f6-db90-464e-a27a-deb4f7219e90a\", name:\"dredg\"}, {children:[{children:[], data:{$area:\"188\", $color:\"3\", image:\"http://images.amazon.com/images/P/B000EULJLU.01._SCMZZZZZZZ_.jpg\"}, id:\"66fc5bf8-daa4-4241-b378-9bc9077939d210,000 Days\", name:\"10,000 Days\"}], data:{$area:188}, id:\"66fc5bf8-daa4-4241-b378-9bc9077939d2a\", name:\"Tool\"}, {children:[{children:[], data:{$area:\"62\", $color:\"41\", image:\"http://images.amazon.com/images/P/B00001P4TH.01._SCMZZZZZZZ_.jpg\"}, id:\"b7ffd2af-418f-4be2-bdd1-22f8b48613daThe Fragile (Left)\", name:\"The Fragile (Left)\"}], data:{$area:62}, id:\"b7ffd2af-418f-4be2-bdd1-22f8b48613daa\", name:\"Nine Inch Nails\"}, {children:[{children:[], data:{$area:\"240\", $color:\"1\", image:\"http://userserve-ak.last.fm/serve/174s/21881921.jpg\"}, id:\"a5585acd-9b65-49a7-a63b-3cc4ee18846eMother Love Bone\", name:\"Mother Love Bone\"}], data:{$area:240}, id:\"a5585acd-9b65-49a7-a63b-3cc4ee18846ea\", name:\"Mother Love Bone\"}, {children:[{children:[], data:{$area:\"67\", $color:\"37\", image:\"http://userserve-ak.last.fm/serve/174s/8634595.jpg\"}, id:\"7527f6c2-d762-4b88-b5e2-9244f1e34c46Around the Fur\", name:\"Around the Fur\"}], data:{$area:67}, id:\"7527f6c2-d762-4b88-b5e2-9244f1e34c46a\", name:\"Deftones\"}, {children:[{children:[], data:{$area:\"62\", $color:\"41\", image:\"http://images.amazon.com/images/P/B0000A5BYD.03.MZZZZZZZ.jpg\"}, id:\"7bdb6921-8380-422c-8514-87cf30d5d8ccIt All Makes Sense Now\", name:\"It All Makes Sense Now\"}], data:{$area:62}, id:\"7bdb6921-8380-422c-8514-87cf30d5d8cca\", name:\"Kr\xF3m\"}, {children:[{children:[], data:{$area:\"57\", $color:\"48\", image:\"http://images-eu.amazon.com/images/P/B00005IABM.02.MZZZZZZZ.jpg\"}, id:\"cb67438a-7f50-4f2b-a6f1-2bb2729fd53810,000 Hz Legend\", name:\"10,000 Hz Legend\"}], data:{$area:57}, id:\"cb67438a-7f50-4f2b-a6f1-2bb2729fd538a\", name:\"Air\"}, {children:[{children:[], data:{$area:\"168\", $color:\"5\", image:\"http://userserve-ak.last.fm/serve/174s/23091681.jpg\"}, id:\"c5998351-be49-49d8-8593-3e96f129c1fcMamagubida\", name:\"Mamagubida\"}, {children:[], data:{$area:\"141\", $color:\"7\", image:\"http://cdn.last.fm/flatness/catalogue/noimage/2/default_album_mega.png\"}, id:\"c5998351-be49-49d8-8593-3e96f129c1fcReggae \xE0 Coup de Cirque\", name:\"Reggae \xE0 Coup de Cirque\"}, {children:[], data:{$area:\"135\", $color:\"8\", image:\"http://userserve-ak.last.fm/serve/174s/16799743.jpg\"}, id:\"c5998351-be49-49d8-8593-3e96f129c1fcGrain de sable\", name:\"Grain de sable\"}, {children:[], data:{$area:\"80\", $color:\"30\", image:\"http://userserve-ak.last.fm/serve/174s/8635653.jpg\"}, id:\"c5998351-be49-49d8-8593-3e96f129c1fcFaut qu'ils s'activent...\", name:\"Faut qu'ils s'activent...\"}], data:{$area:524}, id:\"c5998351-be49-49d8-8593-3e96f129c1fca\", name:\"Tryo\"}, {children:[{children:[], data:{$area:\"57\", $color:\"48\", image:\"http://userserve-ak.last.fm/serve/174s/8634627.jpg\"}, id:\"4bb4e4e4-5f66-4509-98af-62dbb90c45c5The Sickness\", name:\"The Sickness\"}], data:{$area:57}, id:\"4bb4e4e4-5f66-4509-98af-62dbb90c45c5a\", name:\"Disturbed\"}, {children:[{children:[], data:{$area:\"72\", $color:\"34\", image:\"http://userserve-ak.last.fm/serve/174s/8673813.jpg\"}, id:\"95f5b748-d370-47fe-85bd-0af2dc450bc0Second-Hand Smoke\", name:\"Second-Hand Smoke\"}], data:{$area:72}, id:\"95f5b748-d370-47fe-85bd-0af2dc450bc0a\", name:\"Sublime\"}, {children:[{children:[], data:{$area:\"73\", $color:\"33\", image:\"http://userserve-ak.last.fm/serve/174s/7737695.jpg\"}, id:\"020bfbb4-05c3-4c86-b372-17825c262094Audioslave\", name:\"Audioslave\"}], data:{$area:73}, id:\"020bfbb4-05c3-4c86-b372-17825c262094a\", name:\"Audioslave\"}, {children:[{children:[], data:{$area:\"124\", $color:\"10\", image:\"http://userserve-ak.last.fm/serve/174s/8605651.jpg\"}, id:\"e9571c17-817f-4d34-ae3f-0c7a96f822c1Temple of the Dog\", name:\"Temple of the Dog\"}], data:{$area:124}, id:\"e9571c17-817f-4d34-ae3f-0c7a96f822c1a\", name:\"Temple of the Dog\"}, {children:[{children:[], data:{$area:\"82\", $color:\"29\", image:\"http://images.amazon.com/images/P/B0002ZEUKO.01._SCMZZZZZZZ_.jpg\"}, id:\"06fb1c8b-566e-4cb2-985b-b467c90781d4Are You Experienced?\", name:\"Are You Experienced?\"}, {children:[], data:{$area:\"64\", $color:\"39\", image:\"http://userserve-ak.last.fm/serve/174s/8729219.jpg\"}, id:\"06fb1c8b-566e-4cb2-985b-b467c90781d4First Rays of the New Rising Sun\", name:\"First Rays of the New Rising Sun\"}], data:{$area:146}, id:\"06fb1c8b-566e-4cb2-985b-b467c90781d4a\", name:\"Jimi Hendrix\"}, {children:[{children:[], data:{$area:\"56\", $color:\"50\", image:\"http://images.amazon.com/images/P/B0000DZDYN.01.MZZZZZZZ.jpg\"}, id:\"fbd2a255-1d57-4d31-ac11-65b671c19958The Singles 1992-2003\", name:\"The Singles 1992-2003\"}], data:{$area:56}, id:\"fbd2a255-1d57-4d31-ac11-65b671c19958a\", name:\"No Doubt\"}, {children:[{children:[], data:{$area:\"123\", $color:\"11\", image:\"http://userserve-ak.last.fm/serve/174s/11393921.jpg\"}, id:\"078a9376-3c04-4280-b7d7-b20e158f345dMer de Noms\", name:\"Mer de Noms\"}, {children:[], data:{$area:\"93\", $color:\"24\", image:\"http://userserve-ak.last.fm/serve/174s/11403219.jpg\"}, id:\"078a9376-3c04-4280-b7d7-b20e158f345dThirteenth Step\", name:\"Thirteenth Step\"}], data:{$area:216}, id:\"078a9376-3c04-4280-b7d7-b20e158f345da\", name:\"A Perfect Circle\"}, {children:[{children:[], data:{$area:\"109\", $color:\"16\", image:\"http://images.amazon.com/images/P/B00005LNP5.01._SCMZZZZZZZ_.jpg\"}, id:\"1fc56cff-f0a0-4ce2-ab1f-ac49cf3b073fElija y Gane\", name:\"Elija y Gane\"}, {children:[], data:{$area:\"85\", $color:\"26\", image:\"http://images.amazon.com/images/P/B0000B193V.01._SCMZZZZZZZ_.jpg\"}, id:\"1fc56cff-f0a0-4ce2-ab1f-ac49cf3b073fPara los Arboles\", name:\"Para los Arboles\"}], data:{$area:194}, id:\"1fc56cff-f0a0-4ce2-ab1f-ac49cf3b073fa\", name:\"Luis Alberto Spinetta\"}, {children:[{children:[], data:{$area:\"87\", $color:\"25\", image:\"http://userserve-ak.last.fm/serve/174s/8772827.jpg\"}, id:\"e795e03d-b5d5-4a5f-834d-162cfb308a2c4-Track Demos\", name:\"4-Track Demos\"}, {children:[], data:{$area:\"77\", $color:\"32\", image:\"http://userserve-ak.last.fm/serve/174s/9929071.jpg\"}, id:\"e795e03d-b5d5-4a5f-834d-162cfb308a2cRid of Me\", name:\"Rid of Me\"}], data:{$area:164}, id:\"e795e03d-b5d5-4a5f-834d-162cfb308a2ca\", name:\"PJ Harvey\"}, {children:[{children:[], data:{$area:\"102\", $color:\"19\", image:\"http://userserve-ak.last.fm/serve/174s/7410551.jpg\"}, id:\"e3e0abcd-7671-4482-a9d8-462f5acc9be5Make Yourself\", name:\"Make Yourself\"}, {children:[], data:{$area:\"84\", $color:\"27\", image:\"http://images.amazon.com/images/P/B00018D5CQ.01._SCMZZZZZZZ_.jpg\"}, id:\"e3e0abcd-7671-4482-a9d8-462f5acc9be5A Crow Left of the Murder\", name:\"A Crow Left of the Murder\"}, {children:[], data:{$area:\"60\", $color:\"46\", image:\"http://userserve-ak.last.fm/serve/174s/19681051.jpg\"}, id:\"e3e0abcd-7671-4482-a9d8-462f5acc9be5Morning View\", name:\"Morning View\"}], data:{$area:246}, id:\"e3e0abcd-7671-4482-a9d8-462f5acc9be5a\", name:\"Incubus\"}, {children:[{children:[], data:{$area:\"130\", $color:\"9\", image:\"http://userserve-ak.last.fm/serve/174s/15113951.jpg\"}, id:\"38c5cdab-5d6d-43d1-85b0-dac41bde186eNico\", name:\"Nico\"}, {children:[], data:{$area:\"120\", $color:\"12\", image:\"http://images.amazon.com/images/P/B00005V5PW.01.MZZZZZZZ.jpg\"}, id:\"38c5cdab-5d6d-43d1-85b0-dac41bde186eClassic Masters\", name:\"Classic Masters\"}, {children:[], data:{$area:\"103\", $color:\"18\", image:\"http://images.amazon.com/images/P/B000002TPF.01.MZZZZZZZ.jpg\"}, id:\"38c5cdab-5d6d-43d1-85b0-dac41bde186eSoup\", name:\"Soup\"}, {children:[], data:{$area:\"99\", $color:\"20\", image:\"http://userserve-ak.last.fm/serve/174s/15157989.jpg\"}, id:\"38c5cdab-5d6d-43d1-85b0-dac41bde186eBlind Melon\", name:\"Blind Melon\"}], data:{$area:452}, id:\"38c5cdab-5d6d-43d1-85b0-dac41bde186ea\", name:\"Blind Melon\"}, {children:[{children:[], data:{$area:\"173\", $color:\"4\", image:\"http://userserve-ak.last.fm/serve/174s/8590515.jpg\"}, id:\"153c9281-268f-4cf3-8938-f5a4593e5df4Superunknown\", name:\"Superunknown\"}, {children:[], data:{$area:\"117\", $color:\"13\", image:\"http://userserve-ak.last.fm/serve/174s/5269310.jpg\"}, id:\"153c9281-268f-4cf3-8938-f5a4593e5df4Louder Than Love\", name:\"Louder Than Love\"}, {children:[], data:{$area:\"96\", $color:\"21\", image:\"http://userserve-ak.last.fm/serve/174s/8600371.jpg\"}, id:\"153c9281-268f-4cf3-8938-f5a4593e5df4Down on the Upside\", name:\"Down on the Upside\"}, {children:[], data:{$area:\"95\", $color:\"22\", image:\"http://images.amazon.com/images/P/B000000M4A.01.MZZZZZZZ.jpg\"}, id:\"153c9281-268f-4cf3-8938-f5a4593e5df4Ultramega OK\", name:\"Ultramega OK\"}], data:{$area:481}, id:\"153c9281-268f-4cf3-8938-f5a4593e5df4a\", name:\"Soundgarden\"}], data:{$area:4949}, id:\"topAlbums\", name:\"top albums\"}";
|
21
|
+
//end
|
22
|
+
var get = function(id){
|
23
|
+
return document.getElementById(id);
|
24
|
+
};
|
25
|
+
var infovis = get('infovis');
|
26
|
+
var w = infovis.offsetWidth, h = infovis.offsetHeight;
|
27
|
+
infovis.style.width = w + 'px';
|
28
|
+
infovis.style.height = h + 'px';
|
29
|
+
|
30
|
+
//init tm
|
31
|
+
var tm = new TM.Squarified({
|
32
|
+
//The id of the treemap container
|
33
|
+
rootId: 'infovis',
|
34
|
+
//Set the max. depth to be shown for a subtree
|
35
|
+
levelsToShow: 1,
|
36
|
+
|
37
|
+
//Add click handlers for
|
38
|
+
//zooming the Treemap in and out
|
39
|
+
addLeftClickHandler: true,
|
40
|
+
addRightClickHandler: true,
|
41
|
+
|
42
|
+
//When hovering a node highlight the nodes
|
43
|
+
//between the root node and the hovered node. This
|
44
|
+
//is done by adding the 'in-path' CSS class to each node.
|
45
|
+
selectPathOnHover: true,
|
46
|
+
|
47
|
+
//Allow tips
|
48
|
+
Tips: {
|
49
|
+
allow: true,
|
50
|
+
//add positioning offsets
|
51
|
+
offsetX: 20,
|
52
|
+
offsetY: 20,
|
53
|
+
//implement the onShow method to
|
54
|
+
//add content to the tooltip when a node
|
55
|
+
//is hovered
|
56
|
+
onShow: function(tip, node, isLeaf, domElement) {
|
57
|
+
tip.innerHTML = "<div class=\"tip-title\">" + node.name + "</div>" +
|
58
|
+
"<div class=\"tip-text\">" + this.makeHTMLFromData(node.data) + "</div>";
|
59
|
+
},
|
60
|
+
|
61
|
+
//Aux method: Build the tooltip inner html by using the data property
|
62
|
+
makeHTMLFromData: function(data){
|
63
|
+
var html = '';
|
64
|
+
html += "playcount" + ': ' + data.$area + '<br />';
|
65
|
+
if ("$color" in data)
|
66
|
+
html += "rank" + ': ' + data.$color + '<br />';
|
67
|
+
if ("image" in data)
|
68
|
+
html += "<img class=\"album\" src=\"" + data.image + "\" />";
|
69
|
+
return html;
|
70
|
+
}
|
71
|
+
},
|
72
|
+
|
73
|
+
//Implement this method for retrieving a requested
|
74
|
+
//subtree that has as root a node with id = nodeId,
|
75
|
+
//and level as depth. This method could also make a server-side
|
76
|
+
//call for the requested subtree. When completed, the onComplete
|
77
|
+
//callback method should be called.
|
78
|
+
request: function(nodeId, level, onComplete){
|
79
|
+
var tree = eval('(' + json + ')');
|
80
|
+
var subtree = TreeUtil.getSubtree(tree, nodeId);
|
81
|
+
TreeUtil.prune(subtree, 1);
|
82
|
+
onComplete.onComplete(nodeId, subtree);
|
83
|
+
},
|
84
|
+
|
85
|
+
//Remove all events for the element before destroying it.
|
86
|
+
onDestroyElement: function(content, tree, isLeaf, leaf){
|
87
|
+
if(leaf.clearAttributes) leaf.clearAttributes();
|
88
|
+
}
|
89
|
+
});
|
90
|
+
|
91
|
+
var pjson = eval('(' + json + ')');
|
92
|
+
TreeUtil.prune(pjson, 1);
|
93
|
+
tm.loadJSON(pjson);
|
94
|
+
//end
|
95
|
+
}
|
@@ -0,0 +1,61 @@
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2
|
+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
3
|
+
<head>
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
5
|
+
<title>Treemap - Squarified Treemap</title>
|
6
|
+
|
7
|
+
<!-- CSS Files -->
|
8
|
+
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
9
|
+
<link type="text/css" href="../css/Treemap.css" rel="stylesheet" />
|
10
|
+
|
11
|
+
|
12
|
+
<!-- JIT Library File -->
|
13
|
+
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
14
|
+
|
15
|
+
<!-- Example File -->
|
16
|
+
<script language="javascript" type="text/javascript" src="example2.js"></script>
|
17
|
+
</head>
|
18
|
+
|
19
|
+
<body onload="init();">
|
20
|
+
<div id="container">
|
21
|
+
|
22
|
+
<div id="left-container">
|
23
|
+
|
24
|
+
|
25
|
+
|
26
|
+
<div class="text">
|
27
|
+
<h4>
|
28
|
+
Squarified Treemap
|
29
|
+
</h4>
|
30
|
+
|
31
|
+
In this example a static JSON tree is loaded into a Squarified Treemap.<br /><br />
|
32
|
+
Tooltips are manually added for each Treemap DOM node.<br /><br />
|
33
|
+
<b>Left click</b> to set a node as root for the visualization.<br /><br />
|
34
|
+
<b>Right click</b> to set the parent node as root for the visualization.
|
35
|
+
|
36
|
+
</div>
|
37
|
+
|
38
|
+
<div id="id-list"></div>
|
39
|
+
|
40
|
+
|
41
|
+
<div style="text-align:center;"><a href="example2.js">See the Example Code</a></div>
|
42
|
+
</div>
|
43
|
+
|
44
|
+
<div id="center-container">
|
45
|
+
<div id="infovis"></div>
|
46
|
+
</div>
|
47
|
+
|
48
|
+
<div id="right-container">
|
49
|
+
|
50
|
+
<h4>Click to go to parent node</h4>
|
51
|
+
<div style="text-align:center">
|
52
|
+
<input type="button" id="out_button" value="out" />
|
53
|
+
</div>
|
54
|
+
<div id="inner-details"></div>
|
55
|
+
|
56
|
+
</div>
|
57
|
+
|
58
|
+
<div id="log"></div>
|
59
|
+
</div>
|
60
|
+
</body>
|
61
|
+
</html>
|