examples/default.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4   <meta charset="utf-8">
   5   <script src="../bower_components/d3/d3.min.js"></script>
   6   <script src="../src/namespaces.js"></script>
   7   <script src="../src/util/fib.js"></script>
   8   <script src="../src/models/cycle.js"></script>
   9   <script src="../src/models/blip.js"></script>
  10   <script src="../src/models/quadrant.js"></script>
  11   <script src="../src/models/radar.js"></script>
  12   <script src="../src/graphing/radar.js"></script>
  13   <style>
  14     svg {
  15       padding: 20px;
  16     }
  17     svg circle {
  18       stroke: #fff;
  19       fill: #cacaca;
  20     }
  21     svg text {
  22       font: 11px 'Open Sans';
  23       font-variant: small-caps;
  24       text-transform:uppercase;
  25       fill: #000;
  26     }
  27     svg line {
  28       stroke: #fff;
  29     }
  30
  31   </style>
  32 </head>
  33 <body>
  34 </body>
  35   <script>
  36     var adopt = new tr.models.Cycle('Adopt', 0);
  37     var assess = new tr.models.Cycle('Assess', 1);
  38     var trial = new tr.models.Cycle('Trial', 2);
  39     var hold = new tr.models.Cycle('Hold', 3);
  40
  41     var radar = new tr.models.Radar();
  42     var toolsQuadrant = new tr.models.Quadrant('Tools');
  43     toolsQuadrant.add([
  44         new tr.models.Blip('A', adopt),
  45         new tr.models.Blip('B', trial),
  46         new tr.models.Blip('C', assess),
  47         new tr.models.Blip('D', hold)
  48     ]);
  49     radar.setFirstQuadrant(toolsQuadrant);
  50
  51     var radarGraph = new tr.graphing.Radar(d3.select("body").append("svg"), 800, radar);
  52     radarGraph.plot();
  53   </script>
  54 </html>