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" />
16 <div id=
"ref-table"></div>
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);
25 function processRows(data) {
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];
36 blips[
"technique"] = [];
37 blips[
"platform"] = [];
38 blips[
"language"] = [];
39 for (var i=
0; i < data.length; i++) {
42 idx_cycle = [
"adapt",
"trial",
"assess",
"hold"].indexOf(row.cycle)
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 />";
51 if (row.is_new ===
"true") {
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);
67 function showRadar(error,rows) {
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');
77 blips = processRows(rows);
78 toolsQuadrant.add(blips.tool);
79 techniquesQuadrant.add(blips.technique);
80 platformsQuadrant.add(blips.platform);
81 languageFramework.add(blips.language);
83 radar.setFirstQuadrant(toolsQuadrant);
84 radar.setSecondQuadrant(techniquesQuadrant);
85 radar.setThirdQuadrant(platformsQuadrant);
86 radar.setFourthQuadrant(languageFramework);
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();
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
101 .defer(d3.csv,
"./tech-radar.csv")
102 .await(showRadar); //only function name is needed