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       fill: transparent;
  18       stroke: #cacaca;
  19     }
  20     svg text {
  21       font: 14px 'Open Sans';
  22       fill: #7a7a7a;
  23     }
  24     svg line {
  25       stroke: #cacaca;
  26     }
  27
  28   </style>
  29 </head>
  30 <body>
  31 </body>
  32   <script>
  33     var radar = new tr.models.Radar();
  34     var toolsQuadrant = new tr.models.Quadrant('Tools');
  35     toolsQuadrant.add([
  36         new tr.models.Blip('A', new tr.models.Cycle('Adopt')),
  37         new tr.models.Blip('B', new tr.models.Cycle('Trial')),
  38         new tr.models.Blip('C', new tr.models.Cycle('Asses')),
  39         new tr.models.Blip('D', new tr.models.Cycle('Hold')),
  40     ]);
  41     radar.setFirstQuadrant(toolsQuadrant);
  42
  43     var radarGraph = new tr.graphing.Radar(d3.select("body").append("svg"), 800, radar);
  44     radarGraph.plot();
  45   </script>
  46 </html>