OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <meta charset="utf-8"> |
| 5 <title>Treemap Demo</title> |
| 6 <link rel="stylesheet" href="../charts/demo_charts.css"> |
| 7 <style> |
| 8 .chart { |
| 9 max-width: 2000px; |
| 10 float: left; |
| 11 } |
| 12 .title { |
| 13 padding: 20px 0; |
| 14 } |
| 15 .chart-wrapper { |
| 16 height: 500px; |
| 17 } |
| 18 .chart-wrapper h2 { |
| 19 border-bottom: 1px solid #333; |
| 20 } |
| 21 .demos-container { |
| 22 clear: both; |
| 23 } |
| 24 .node { |
| 25 border: solid 1px white; |
| 26 font: 12px sans-serif; |
| 27 color: white; |
| 28 line-height: 12px; |
| 29 overflow: hidden; |
| 30 position: absolute; |
| 31 text-indent: 2px; |
| 32 } |
| 33 .treemap { |
| 34 margin: 40px; |
| 35 } |
| 36 </style> |
| 37 </head> |
| 38 <body> |
| 39 <div class="demos-container"> |
| 40 |
| 41 <div class="chart treemap squarify"> |
| 42 <div class="title"><h1>Squarify</h1></div> |
| 43 </div> |
| 44 |
| 45 <div class="chart treemap slice"> |
| 46 <div class="title"><h1>Slice</h1></div> |
| 47 </div> |
| 48 |
| 49 <div class="chart treemap dice"> |
| 50 <div class="title"><h1>Dice</h1></div> |
| 51 </div> |
| 52 |
| 53 <div class="chart treemap slicedice"> |
| 54 <div class="title"><h1>Slice & Dice</h1></div> |
| 55 </div> |
| 56 </div> |
| 57 <script type="application/dart" src="treemap_demo.dart"></script> |
| 58 <script src="packages/browser/dart.js"></script> |
| 59 </body> |
| 60 </html> |
OLD | NEW |