TechRadar/index.html at master · neeteshp/TechRadar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<html>

<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Tech Radar</title>
	<!-- Uncomment this in you want your favicon -->
	<!-- <link rel="shortcut icon" href="https://www.yourdomain.com/favicon.ico"> -->

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
	<script src="radar.js"></script>

	<link rel="stylesheet" href="radar.css">
</head>

<body>

	<svg id="radar"></svg>

	<script>
		function toEntry(row) {
			return {
				label: row.name,
				quadrant: ['Languages', 'Infrastructure', 'Datastores', 'Data Management'].indexOf(row.quadrant),
				ring: ['ADOPT', 'TRIAL', 'ASSESS', 'HOLD'].indexOf(row.ring),
				link: row.link,
				moved: ['down', 'none', 'up'].indexOf(row.moved) - 1,
				active: true
			}
		}

		function draw_radar(my_entries) {
			radar_visualization({
				svg_id: "radar",
				width: 1450,
				height: 1000,
				colors: {
					background: "#fff",
					grid: "#bbb",
					inactive: "#ddd"
				},
				title: "Tech Radar",
				quadrants: [
					{ name: "Languages" },
					{ name: "Infrastructure" },
					{ name: "Datastores" },
					{ name: "Data Management" },
				],
				rings: [
					{ name: "ADOPT", color: "#93c47d" },
					{ name: "TRIAL", color: "#93d2c2" },
					{ name: "ASSESS", color: "#fbdb84" },
					{ name: "HOLD", color: "#efafa9" }
				],
				print_layout: true,
				// zoomed_quadrant: 0,
				//ENTRIES
				entries: my_entries
			});
		}
		fetch('./data.csv')
			.then(function (resp) {
				return resp.text();
			})
			.then(function (csv) {
				var entries = d3.csvParse(csv, function (row) {
					return toEntry(row);
				});
				draw_radar(entries);
			});
	</script>
</body>

</html>