examples/csv.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4   <meta charset="utf-8">
   5   <title>Tech Radar Example</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="chance.js"></script>
   8   <script src="d3.min.js"></script>
   9   <script src="d3-queue.js"></script>
  10   <script src="tech-radar.min.js"></script>
  11   <link href="base.css" rel="stylesheet" type="text/css" />
  12 </head>
  13 <body>
  14   <div id="radar">
  15   </div>
  16   <div id="ref-table"></div>
  17 </body>
  18 <script>
  19 //  var adopt = new tr.models.Cycle('Adopt', 0);
  20 //  var trial = new tr.models.Cycle('Trial', 1);
  21 //  var assess = new tr.models.Cycle('Assess', 2);
  22 //  var hold = new tr.models.Cycle('Hold', 3);
  23
  24
  25   function processRows(data) {
  26
  27       var adopt = new tr.models.Cycle('Adopt', 0);
  28       var trial = new tr.models.Cycle('Trial', 1);
  29       var assess = new tr.models.Cycle('Assess', 2);
  30       var hold = new tr.models.Cycle('Hold', 3);
  31       var cycles = [adopt, trial, assess, hold];
  32
  33       error = "";
  34       var blips = {};
  35       blips["tool"] = [];
  36       blips["technique"] = [];
  37       blips["platform"] = [];
  38       blips["language"] = [];
  39       for (var i=0; i < data.length; i++) {
  40           row = data[i];
  41
  42           idx_cycle = ["adapt", "trial", "assess", "hold"].indexOf(row.cycle)
  43
  44           if (idx_cycle === -1) {
  45               error += "Unexpected cycle: " + row.cycle + " in row " + i.toString() + "<br />";
  46           } else if (["tool", "technique", "platform", "language"].indexOf(row.quadrant) === -1) {
  47               error += "Unexpected quadrant: " + row.quadrant + " in row " + i.toString() + "<br />";
  48           } else if (["true","false"].indexOf(row.is_new) === -1) {
  49               error += "Unboolean is_new: " + row.is_new + " in row " + i.toString() + "<br />";
  50           } else {
  51               if (row.is_new === "true") {
  52                   b_IsNew = true
  53               } else {
  54                   b_IsNew = false
  55               }
  56               a_cycle = cycles[idx_cycle];
  57               a_blip = new tr.models.Blip(row.name, a_cycle, b_IsNew, row.description);
  58               blips[row.quadrant].push(a_blip);
  59           }
  60       }
  61       if (error !== "") {
  62         throw error
  63       }
  64       return blips;
  65   }
  66
  67   function showRadar(error,rows) {
  68
  69       var radar = new tr.models.Radar();
  70       var toolsQuadrant = new tr.models.Quadrant('Tools');
  71       var techniquesQuadrant = new tr.models.Quadrant('Techniques');
  72       var platformsQuadrant = new tr.models.Quadrant('Platforms');
  73       var languageFramework = new tr.models.Quadrant('Languages & Frameworks');
  74
  75       var radarGraph;
  76
  77       blips = processRows(rows);
  78       toolsQuadrant.add(blips.tool);
  79       techniquesQuadrant.add(blips.technique);
  80       platformsQuadrant.add(blips.platform);
  81       languageFramework.add(blips.language);
  82
  83       radar.setFirstQuadrant(toolsQuadrant);
  84       radar.setSecondQuadrant(techniquesQuadrant);
  85       radar.setThirdQuadrant(platformsQuadrant);
  86       radar.setFourthQuadrant(languageFramework);
  87
  88       radarGraph = new tr.graphing.Radar(1080, radar);
  89       radarGraph.init("#radar").plot();
  90       var refTable = new tr.graphing.RefTable(radar);
  91       refTable.init('#ref-table').render();
  92   }
  93
  94   // CSV file:
  95   // first line is a header:  it should be "quadrant,cycle,is_new,name,description"
  96   // quadrant values should be one of [tool,technique,platform,language]
  97   // cycle should be one of [asses,hold,adapt,trial]
  98   // is_new : true if new to the radar since the last version
  99   // name:
 100   d3.queue()
 101     .defer(d3.csv, "./tech-radar.csv")
 102     .await(showRadar); //only function name is needed
 103
 104 </script>
 105 </html>