added styles and geometries

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

index c3f5843..398dafe 100644 (file)
--- a/examples/default.html
+++ b/examples/default.html
@@ -3,6 +3,8 @@
  <head>
    <meta charset="utf-8">
    <title>Thoughtworks Radar 2014</title>
+  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
+  <script src="../bower_components/chance/chance.js"></script>
    <script src="../bower_components/d3/d3.min.js"></script>
    <script src="../src/namespaces.js"></script>
    <script src="../src/util/fib.js"></script>
@@ -12,6 +14,9 @@
    <script src="../src/models/radar.js"></script>
    <script src="../src/graphing/radar.js"></script>
    <style>
+    body {
+      font: 11px 'Open Sans';
+    }
      svg {
        padding: 20px;
      }
@@ -27,16 +32,42 @@
      svg circle:nth-child(4) {
        fill: #bababa;
      }
-    svg text {
-      font: 11px 'Open Sans';
-      font-variant: small-caps;
-      text-transform:uppercase;
+    svg text.blip-text {
+      font-size: 9px;
+      font-style: italic;
+      fill: #fff;
+    }
+    svg text.line-text {
+      font-weight: bold;
+      text-transform: uppercase;
        fill: #000;
      }
+
+    svg text.tools,
+    svg text.techniques,
+    svg text.platforms,
+    svg text.languages-frameworks {
+      font-weight: bold;
+      text-transform:uppercase;
+      font-size: 16px;
+    }
      svg line {
        stroke: rgba(255, 255, 255, 0.3);
      }
-
+    svg circle.tools,
+    svg circle.techniques,
+    svg circle.platforms,
+    svg circle.languages-frameworks,
+    svg path.tools,
+    svg path.techniques,
+    svg path.platforms,
+    svg path.languages-frameworks {
+      stroke: #fff;
+    }
+    svg .tools { fill: #83AD78 }
+    svg .techniques { fill: #3DB5BE }
+    svg .platforms { fill: #E88744 }
+    svg .languages-frameworks { fill: #8D2145 }
    </style>
  </head>
  <body>