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 polygon.tools,
  62     svg polygon.techniques,
  63     svg polygon.platforms,
  64     svg polygon.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   <div id="radar">
  75   </div>
  76 </body>
  77 <script>
  78   var adopt = new tr.models.Cycle('Adopt', 0);
  79   var assess = new tr.models.Cycle('Assess', 1);
  80   var trial = new tr.models.Cycle('Trial', 2);
  81   var hold = new tr.models.Cycle('Hold', 3);
  82
  83   var radar = new tr.models.Radar();
  84   var toolsQuadrant = new tr.models.Quadrant('Tools');
  85   var techniquesQuadrant = new tr.models.Quadrant('Techniques');
  86   var platformsQuadrant = new tr.models.Quadrant('Platforms');
  87   var languageFramework = new tr.models.Quadrant('Languages & Frameworks');
  88
  89   toolsQuadrant.add([
  90       new tr.models.Blip('D3', adopt),
  91       new tr.models.Blip('Dependency Management for JavaScript', adopt, true),
  92       new tr.models.Blip('Ansible', trial, true),
  93       new tr.models.Blip('Calabash', trial, true),
  94       new tr.models.Blip('Chaos Monkey', trial, true),
  95       new tr.models.Blip('Gatling', trial),
  96       new tr.models.Blip('Grunt.js', trial, true),
  97       new tr.models.Blip('Hystrix', trial),
  98       new tr.models.Blip('Icon fonts', trial),
  99       new tr.models.Blip('Librarian-puppet and Librarian-Chef', trial),
 100       new tr.models.Blip('Logstash & Graylog2', trial),
 101       new tr.models.Blip('Moco', trial, true),
 102       new tr.models.Blip('PhantomJS', trial),
 103       new tr.models.Blip('Prototype On Paper', trial, true),
 104       new tr.models.Blip('SnapCI', trial, true),
 105       new tr.models.Blip('Snowplow Analytics & Piwik', trial),
 106       new tr.models.Blip('Cloud-init', assess, true),
 107       new tr.models.Blip('Docker', assess, true),
 108       new tr.models.Blip('Octopus', assess),
 109       new tr.models.Blip('Sensu', assess, true),
 110       new tr.models.Blip('Travis for OSX/iOS', assess, true),
 111       new tr.models.Blip('Visual regression testing tools', assess, true),
 112       new tr.models.Blip('Xamarin', assess, true),
 113       new tr.models.Blip('Ant', hold, true),
 114       new tr.models.Blip('Heavyweight test tools', hold),
 115       new tr.models.Blip('TFS', hold)
 116   ]);
 117   techniquesQuadrant.add([
 118       new tr.models.Blip('Capturing client-side JavaScript errors', adopt),
 119       new tr.models.Blip('Continuous delivery for mobile devices', adopt),
 120       new tr.models.Blip('Mobile testing on mobile networks', adopt),
 121       new tr.models.Blip('Segregated DOM plus node for JS Testing', adopt, true),
 122       new tr.models.Blip('Windows infrastructure automation', adopt),
 123       new tr.models.Blip('Capture domain events explicitily', trial, true),
 124       new tr.models.Blip('Client and server rendering with same code', trial, true),
 125       new tr.models.Blip('HTML5 storage instead of cookies', trial),
 126       new tr.models.Blip('Instrument all the things', trial, true),
 127       new tr.models.Blip('Masterless Chef/Puppet', trial, true),
 128       new tr.models.Blip('Micro-services', trial),
 129       new tr.models.Blip('Perimeterless enterprise', trial),
 130       new tr.models.Blip('Provisioning testing', trial, true),
 131       new tr.models.Blip('Structured logging', trial, true),
 132       new tr.models.Blip('Bridging physical and digital worlds with simple hardware', assess, true),
 133       new tr.models.Blip('Collaborative analytics and data science', assess),
 134       new tr.models.Blip('Datensparsamkeit', assess, true),
 135       new tr.models.Blip('Development environments in the cloud', assess),
 136       new tr.models.Blip('Focus on mean time to recovery', assess),
 137       new tr.models.Blip('Machine image as a build artifact', assess),
 138       new tr.models.Blip('Tangible interaction', assess, true),
 139       new tr.models.Blip('Cloud lift and shift', hold, true),
 140       new tr.models.Blip('Ignoring OWASP Top 10', hold, true),
 141       new tr.models.Blip('Siloed metrics', hold, true),
 142       new tr.models.Blip('Velocity as productivity', hold, true)
 143   ]);
 144   platformsQuadrant.add([
 145       new tr.models.Blip('Elastic Search', adopt),
 146       new tr.models.Blip('MongoDB', adopt),
 147       new tr.models.Blip('Neo4J', adopt),
 148       new tr.models.Blip('Node.js', adopt),
 149       new tr.models.Blip('Redis', adopt),
 150       new tr.models.Blip('SMS and USSD as UI', adopt),
 151       new tr.models.Blip('Hadoop 2.0', trial),
 152       new tr.models.Blip('Hadoop as a service', trial, true),
 153       new tr.models.Blip('Open Stack', trial),
 154       new tr.models.Blip('PostgreSQL for NoSql', trial),
 155       new tr.models.Blip('Vumi', trial),
 156       new tr.models.Blip('Akka', assess, true),
 157       new tr.models.Blip('Backend as a service', assess, true),
 158       new tr.models.Blip('Low-cost robotics', assess, true),
 159       new tr.models.Blip('PhoneGap/Apache Cordova', assess),
 160       new tr.models.Blip('Private Clouds', assess),
 161       new tr.models.Blip('SPDY', assess, true),
 162       new tr.models.Blip('Storm', assess, true),
 163       new tr.models.Blip('Web Components standard', assess, true),
 164       new tr.models.Blip('Big enterprise solutions', hold),
 165       new tr.models.Blip('CMS as a platform', hold, true),
 166       new tr.models.Blip('Enterprise Data Warehouse', hold, true)
 167   ]);
 168   languageFramework.add([
 169       new tr.models.Blip('Clojure', adopt, true),
 170       new tr.models.Blip('Dropwizard', adopt),
 171       new tr.models.Blip('Scala, the good parts', adopt),
 172       new tr.models.Blip('Sinatra', adopt),
 173       new tr.models.Blip('CoffeeScript', trial),
 174       new tr.models.Blip('Go language', trial, true),
 175       new tr.models.Blip('Hive', trial, true),
 176       new tr.models.Blip('Play Framework 2', trial),
 177       new tr.models.Blip('Reactive Extensions across languages', trial, true),
 178       new tr.models.Blip('Web API', trial, true),
 179       new tr.models.Blip('Elixir', assess, true),
 180       new tr.models.Blip('Julia', assess, true),
 181       new tr.models.Blip('Nancy', assess),
 182       new tr.models.Blip('OWIN', assess),
 183       new tr.models.Blip('Pester', assess, true),
 184       new tr.models.Blip('Pointer Events', assess, true),
 185       new tr.models.Blip('Python 3', assess, true),
 186       new tr.models.Blip('TypeScript', assess, true),
 187       new tr.models.Blip('Yeoman', assess, true),
 188       new tr.models.Blip('Handwritten CSS', hold),
 189       new tr.models.Blip('JSF', hold, true)
 190   ]);
 191
 192   radar.setFirstQuadrant(toolsQuadrant);
 193   radar.setSecondQuadrant(techniquesQuadrant);
 194   radar.setThirdQuadrant(platformsQuadrant);
 195   radar.setFourthQuadrant(languageFramework);
 196
 197   var radarGraph = new tr.graphing.Radar(1080, radar);
 198   radarGraph.init('#radar').plot();
 199 </script>
 200 </html>