techradar/test.html at master · simonellistonball/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
<!doctype>
<html>
<head>
<title>Test</title>
<script src="d3.js"  charset="utf-8"></script>
<script src="radar.js"></script>

<style>
svg, ul {
	float: left;
}

svg text.name { font-family: Arial, Sans-serif; font-size: 12px; opacity: 0.1 }
svg line.quadrant { stroke-width: 2px;}
svg circle.horizon { stroke: #999; stroke-width: 2px; stroke-opacity: 0; fill: none;}

svg line.direction { stroke: black; stroke-width: 5px; marker-end: url(#arrow); opacity: 0.2;}
svg #arrow { fill: black; }

svg path.quadrant { fill-opacity: 0.5;}
svg text.quadrant {
	font-family: Arial, Sans-serif;
	font-weight: bold;
	color: white;
	opacity: 0.3;
	font-size: 40px;
	text-align: right;
}
</style>

</head>
<body>
<div id="radar" style="width: 1024px; height: 800px"></div>
<script>

function entry(start, end, quadrant, position, position_angle, direction, direction_angle) {
	return {
		// start date that this entry applies for
		start: start,
		// end date for the entry
		end: end,
		// the quadrant label
		quadrant: quadrant,
		// position is within the total of horizons.
		position: position,
		// angles are fractions of pi/2 (ie of a quadrant)
		position_angle: position_angle,
		// the learning end point with the total of horizons.
		direction: direction,
		// angles are fractions of pi/2 (ie of a quadrant)
		direction_angle: direction_angle
	};
}
radar('#radar',
	// radar data
	{
		horizons: [ 'discover', 'assess', 'learn', 'use'],
		quadrants: [ 'languages', 'frameworks', 'tools', 'big data', 'statistics'],
		width: 850,
		height: 850,
		data: [
			{
				name: 'd3',
				description: 'The d3 library for producing visualisation and data driven documents',
				links: ['http://d3js.org'],
				history: [
					entry(new Date(2013,1,29),new Date(2013,9,29),'frameworks', 0.8, 0.5, 0.6, 0.5),
					entry(new Date(2013,9,29),null,'frameworks', 0.6, 0.5, 0.2, 0.5)
				]
			}
		]
	});
</script>
</body>