--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Tech Radar Example</title>
+ <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
+ <script src="chance.js"></script>
+ <script src="d3.min.js"></script>
+ <script src="d3-queue.js"></script>
+ <script src="tech-radar.min.js"></script>
+ <link href="base.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+ <div id="radar">
+ </div>
+ <div id="ref-table"></div>
+</body>
+<script>
+// var adopt = new tr.models.Cycle('Adopt', 0);
+// var trial = new tr.models.Cycle('Trial', 1);
+// var assess = new tr.models.Cycle('Assess', 2);
+// var hold = new tr.models.Cycle('Hold', 3);
+
+
+ function processRows(data) {
+
+ var adopt = new tr.models.Cycle('Adopt', 0);
+ var trial = new tr.models.Cycle('Trial', 1);
+ var assess = new tr.models.Cycle('Assess', 2);
+ var hold = new tr.models.Cycle('Hold', 3);
+ var cycles = [adopt, trial, assess, hold];
+
+ error = "";
+ var blips = {};
+ blips["tool"] = [];
+ blips["technique"] = [];
+ blips["platform"] = [];
+ blips["language"] = [];
+ for (var i=0; i < data.length; i++) {
+ row = data[i];
+
+ idx_cycle = ["adapt", "trial", "assess", "hold"].indexOf(row.cycle)
+
+ if (idx_cycle === -1) {
+ error += "Unexpected cycle: " + row.cycle + " in row " + i.toString() + "<br />";
+ } else if (["tool", "technique", "platform", "language"].indexOf(row.quadrant) === -1) {
+ error += "Unexpected quadrant: " + row.quadrant + " in row " + i.toString() + "<br />";
+ } else if (["true","false"].indexOf(row.is_new) === -1) {
+ error += "Unboolean is_new: " + row.is_new + " in row " + i.toString() + "<br />";
+ } else {
+ if (row.is_new === "true") {
+ b_IsNew = true
+ } else {
+ b_IsNew = false
+ }
+ a_cycle = cycles[idx_cycle];
+ a_blip = new tr.models.Blip(row.name, a_cycle, b_IsNew, row.description);
+ blips[row.quadrant].push(a_blip);
+ }
+ }
+ if (error !== "") {
+ throw error
+ }
+ return blips;
+ }
+
+ function showRadar(error,rows) {
+
+ var radar = new tr.models.Radar();
+ var toolsQuadrant = new tr.models.Quadrant('Tools');
+ var techniquesQuadrant = new tr.models.Quadrant('Techniques');
+ var platformsQuadrant = new tr.models.Quadrant('Platforms');
+ var languageFramework = new tr.models.Quadrant('Languages & Frameworks');
+
+ var radarGraph;
+
+ blips = processRows(rows);
+ toolsQuadrant.add(blips.tool);
+ techniquesQuadrant.add(blips.technique);
+ platformsQuadrant.add(blips.platform);
+ languageFramework.add(blips.language);
+
+ radar.setFirstQuadrant(toolsQuadrant);
+ radar.setSecondQuadrant(techniquesQuadrant);
+ radar.setThirdQuadrant(platformsQuadrant);
+ radar.setFourthQuadrant(languageFramework);
+
+ radarGraph = new tr.graphing.Radar(1080, radar);
+ radarGraph.init("#radar").plot();
+ var refTable = new tr.graphing.RefTable(radar);
+ refTable.init('#ref-table').render();
+ }
+
+ // CSV file:
+ // first line is a header: it should be "quadrant,cycle,is_new,name,description"
+ // quadrant values should be one of [tool,technique,platform,language]
+ // cycle should be one of [asses,hold,adapt,trial]
+ // is_new : true if new to the radar since the last version
+ // name:
+ d3.queue()
+ .defer(d3.csv, "./tech-radar.csv")
+ .await(showRadar); //only function name is needed
+
+</script>
+</html>
projects / tech-radar.git / blobdiff