examples/default.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4   <meta charset="utf-8">
   5   <title>Thoughtworks Radar 2014</title>
   6   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
   7   <script src="../bower_components/chance/chance.js"></script>
   8   <script src="../bower_components/d3/d3.min.js"></script>
   9   <script src="../src/namespaces.js"></script>
  10   <script src="../src/util/fib.js"></script>
  11   <script src="../src/models/cycle.js"></script>
  12   <script src="../src/models/blip.js"></script>
  13   <script src="../src/models/quadrant.js"></script>
  14   <script src="../src/models/radar.js"></script>
  15   <script src="../src/graphing/radar.js"></script>
  16   <style>
  17     body {
  18       font: 11px 'Open Sans';
  19     }
  20     svg {
  21       padding: 20px;
  22     }
  23     svg circle:nth-child(1) {
  24       fill: #eaeaea;
  25     }
  26     svg circle:nth-child(2) {
  27       fill: #dadada;
  28     }
  29     svg circle:nth-child(3) {
  30       fill: #cacaca;
  31     }
  32     svg circle:nth-child(4) {
  33       fill: #bababa;
  34     }
  35     svg text.blip-text {
  36       font-size: 9px;
  37       font-style: italic;
  38       fill: #fff;
  39     }
  40     svg text.line-text {
  41       font-weight: bold;
  42       text-transform: uppercase;
  43       fill: #000;
  44     }
  45
  46     svg text.tools,
  47     svg text.techniques,
  48     svg text.platforms,
  49     svg text.languages-frameworks {
  50       font-weight: bold;
  51       text-transform:uppercase;
  52       font-size: 16px;
  53     }
  54     svg line {
  55       stroke: rgba(255, 255, 255, 0.3);
  56     }
  57     svg circle.tools,
  58     svg circle.techniques,
  59     svg circle.platforms,
  60     svg circle.languages-frameworks,
  61     svg path.tools,
  62     svg path.techniques,
  63     svg path.platforms,
  64     svg path.languages-frameworks {
  65       stroke: #fff;
  66     }
  67     svg .tools { fill: #83AD78 }
  68     svg .techniques { fill: #3DB5BE }
  69     svg .platforms { fill: #E88744 }
  70     svg .languages-frameworks { fill: #8D2145 }
  71   </style>
  72 </head>
  73 <body>
  74 </body>
  75   <script>
  76     var adopt = new tr.models.Cycle('Adopt', 0);
  77     var assess = new tr.models.Cycle('Assess', 1);
  78     var trial = new tr.models.Cycle('Trial', 2);
  79     var hold = new tr.models.Cycle('Hold', 3);
  80
  81     var radar = new tr.models.Radar();
  82     var toolsQuadrant = new tr.models.Quadrant('Tools');
  83     var techniquesQuadrant = new tr.models.Quadrant('Techniques');
  84     var platformsQuadrant = new tr.models.Quadrant('Platforms');
  85     var languageFramework = new tr.models.Quadrant('Languages & Frameworks');
  86
  87     toolsQuadrant.add([
  88         new tr.models.Blip('D3', adopt),
  89         new tr.models.Blip('Dependency Management for JavaScript', adopt, true),
  90         new tr.models.Blip('Ansible', trial, true),
  91         new tr.models.Blip('Calabash', trial, true),
  92         new tr.models.Blip('Chaos Monkey', trial, true),
  93         new tr.models.Blip('Gatling', trial),
  94         new tr.models.Blip('Grunt.js', trial, true),
  95         new tr.models.Blip('Hystrix', trial),
  96         new tr.models.Blip('Icon fonts', trial),
  97         new tr.models.Blip('Librarian-puppet and Librarian-Chef', trial),
  98         new tr.models.Blip('Logstash & Graylog2', trial),
  99         new tr.models.Blip('Moco', trial, true),
 100         new tr.models.Blip('PhantomJS', trial),
 101         new tr.models.Blip('Prototype On Paper', trial, true),
 102         new tr.models.Blip('SnapCI', trial, true),
 103         new tr.models.Blip('Snowplow Analytics & Piwik', trial),
 104         new tr.models.Blip('Cloud-init', assess, true),
 105         new tr.models.Blip('Docker', assess, true),
 106         new tr.models.Blip('Octopus', assess),
 107         new tr.models.Blip('Sensu', assess, true),
 108         new tr.models.Blip('Travis for OSX/iOS', assess, true),
 109         new tr.models.Blip('Visual regression testing tools', assess, true),
 110         new tr.models.Blip('Xamarin', assess, true),
 111         new tr.models.Blip('Ant', hold, true),
 112         new tr.models.Blip('Heavyweight test tools', hold),
 113         new tr.models.Blip('TFS', hold)
 114     ]);
 115     techniquesQuadrant.add([
 116         new tr.models.Blip('Capturing client-side JavaScript errors', adopt),
 117         new tr.models.Blip('Continuous delivery for mobile devices', adopt),
 118         new tr.models.Blip('Mobile testing on mobile networks', adopt),
 119         new tr.models.Blip('Segregated DOM plus node for JS Testing', adopt, true),
 120         new tr.models.Blip('Windows infrastructure automation', adopt),
 121         new tr.models.Blip('Capture domain events explicitily', trial, true),
 122         new tr.models.Blip('Client and server rendering with same code', trial, true),
 123         new tr.models.Blip('HTML5 storage instead of cookies', trial),
 124         new tr.models.Blip('Instrument all the things', trial, true),
 125         new tr.models.Blip('Masterless Chef/Puppet', trial, true),
 126         new tr.models.Blip('Micro-services', trial),
 127         new tr.models.Blip('Perimeterless enterprise', trial),
 128         new tr.models.Blip('Provisioning testing', trial, true),
 129         new tr.models.Blip('Structured logging', trial, true),
 130         new tr.models.Blip('Bridging physical and digital worlds with simple hardware', assess, true),
 131         new tr.models.Blip('Collaborative analytics and data science', assess),
 132         new tr.models.Blip('Datensparsamkeit', assess, true),
 133         new tr.models.Blip('Development environments in the cloud', assess),
 134         new tr.models.Blip('Focus on mean time to recovery', assess),
 135         new tr.models.Blip('Machine image as a build artifact', assess),
 136         new tr.models.Blip('Tangible interaction', assess, true),
 137         new tr.models.Blip('Cloud lift and shift', hold, true),
 138         new tr.models.Blip('Ignoring OWASP Top 10', hold, true),
 139         new tr.models.Blip('Siloed metrics', hold, true),
 140         new tr.models.Blip('Velocity as productivity', hold, true)
 141     ]);
 142     platformsQuadrant.add([
 143         new tr.models.Blip('Elastic Search', adopt),
 144         new tr.models.Blip('MongoDB', adopt),
 145         new tr.models.Blip('Neo4J', adopt),
 146         new tr.models.Blip('Node.js', adopt),
 147         new tr.models.Blip('Redis', adopt),
 148         new tr.models.Blip('SMS and USSD as UI', adopt),
 149         new tr.models.Blip('Hadoop 2.0', trial),
 150         new tr.models.Blip('Hadoop as a service', trial, true),
 151         new tr.models.Blip('Open Stack', trial),
 152         new tr.models.Blip('PostgreSQL for NoSql', trial),
 153         new tr.models.Blip('Vumi', trial),
 154         new tr.models.Blip('Akka', assess, true),
 155         new tr.models.Blip('Backend as a service', assess, true),
 156         new tr.models.Blip('Low-cost robotics', assess, true),
 157         new tr.models.Blip('PhoneGap/Apache Cordova', assess),
 158         new tr.models.Blip('Private Clouds', assess),
 159         new tr.models.Blip('SPDY', assess, true),
 160         new tr.models.Blip('Storm', assess, true),
 161         new tr.models.Blip('Web Components standard', assess, true),
 162         new tr.models.Blip('Big enterprise solutions', hold),
 163         new tr.models.Blip('CMS as a platform', hold, true),
 164         new tr.models.Blip('Enterprise Data Warehouse', hold, true)
 165     ]);
 166     languageFramework.add([
 167         new tr.models.Blip('Clojure', adopt, true),
 168         new tr.models.Blip('Dropwizard', adopt),
 169         new tr.models.Blip('Scala, the good parts', adopt),
 170         new tr.models.Blip('Sinatra', adopt),
 171         new tr.models.Blip('CoffeeScript', trial),
 172         new tr.models.Blip('Go language', trial, true),
 173         new tr.models.Blip('Hive', trial, true),
 174         new tr.models.Blip('Play Framework 2', trial),
 175         new tr.models.Blip('Reactive Extensions across languages', trial, true),
 176         new tr.models.Blip('Web API', trial, true),
 177         new tr.models.Blip('Elixir', assess, true),
 178         new tr.models.Blip('Julia', assess, true),
 179         new tr.models.Blip('Nancy', assess),
 180         new tr.models.Blip('OWIN', assess),
 181         new tr.models.Blip('Pester', assess, true),
 182         new tr.models.Blip('Pointer Events', assess, true),
 183         new tr.models.Blip('Python 3', assess, true),
 184         new tr.models.Blip('TypeScript', assess, true),
 185         new tr.models.Blip('Yeoman', assess, true),
 186         new tr.models.Blip('Handwritten CSS', hold),
 187         new tr.models.Blip('JSF', hold, true)
 188     ]);
 189
 190     radar.setFirstQuadrant(toolsQuadrant);
 191     radar.setSecondQuadrant(techniquesQuadrant);
 192     radar.setThirdQuadrant(platformsQuadrant);
 193     radar.setFourthQuadrant(languageFramework);
 194
 195     var radarGraph = new tr.graphing.Radar(800, radar);
 196     radarGraph.plot();
 197   </script>
 198 </html>