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