better organizing the cycle names

[tech-radar.git] / examples / default.html
diff --git a/examples/default.html b/examples/default.html

index abe29ca..87fa986 100644 (file)
--- a/examples/default.html
+++ b/examples/default.html
@@ -4,23 +4,27 @@
    <meta charset="utf-8">
    <script src="../bower_components/d3/d3.min.js"></script>
    <script src="../src/namespaces.js"></script>
+  <script src="../src/models/cycle.js"></script>
+  <script src="../src/models/blip.js"></script>
+  <script src="../src/models/quadrant.js"></script>
+  <script src="../src/models/radar.js"></script>
    <script src="../src/graphing/radar.js"></script>
-
-  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
    <style>
      svg {
        padding: 20px;
      }
      svg circle {
-      fill: transparent;
-      stroke: #cacaca;
+      stroke: #fff;
+      fill: #cacaca;
      }
      svg text {
-      font: 14px 'Open Sans';
-      fill: #7a7a7a;
+      font: 11px 'Open Sans';
+      font-variant: small-caps;
+      text-transform:uppercase;
+      fill: #000;
      }
      svg line {
-      stroke: #cacaca;
+      stroke: #fff;
      }
  
    </style>
@@ -28,7 +32,22 @@
  <body>
  </body>
    <script>
-    var radarGraph = new tr.graphing.Radar(d3.select("body").append("svg"), 500);
+    var adopt = new tr.models.Cycle('Adopt', 0);
+    var assess = new tr.models.Cycle('Assess', 1);
+    var trial = new tr.models.Cycle('Trial', 2);
+    var hold = new tr.models.Cycle('Hold', 3);
+
+    var radar = new tr.models.Radar();
+    var toolsQuadrant = new tr.models.Quadrant('Tools');
+    toolsQuadrant.add([
+        new tr.models.Blip('A', adopt),
+        new tr.models.Blip('B', trial),
+        new tr.models.Blip('C', assess),
+        new tr.models.Blip('D', hold),
+    ]);
+    radar.setFirstQuadrant(toolsQuadrant);
+
+    var radarGraph = new tr.graphing.Radar(d3.select("body").append("svg"), 800, radar);
      radarGraph.plot();
    </script>
  </html>