D3Demo/06_scatterplot.html at master · pintse/D3Demo · 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample 05: 依照X、Y值畫出圓點</title>
<script type="text/javascript" src="js/analytics.js"> </script>
<script type="text/javascript" src="js/d3.js" ></script>
</head>
<body>
<p>依照資料提供的X、Y值畫出位置上的圓，並且圓的大小反映出Y值大小</p>
	<script type="text/javascript">
		var dataset = [
		               [5,20],  //x,y
		               [480,90],
		               [250,50],
		               [100,33],
		               [330,95],
		               [410,12],
		               [475,44],
		               [25,67],
		               [85,21],
		               [220,88]
		              ];

		var w=500, h=100;

		var svg = d3.select("body")
					.append("svg")
					.attr("width",w)
					.attr("height",h);

		svg.selectAll("circle")
			.data(dataset)
			.enter()
			.append("circle")
			.attr({
				cx: function(d){return d[0]; },
				cy: function(d){return d[1]; },
				r: function(d){
					return Math.sqrt(h-d[1]);  //書上說：使用面積大小來對應呈現資料量的大小要比使用半徑來得正確與合理，所以必須先從面積反推出半徑。h-d[1]即為面積資料
				}
			})

		svg.selectAll("text")
			.data(dataset)
			.enter()
			.append("text")
			.text(function(d){
				return d[0]+","+d[1];
			})
			.attr("x",function(d){return d[0];})
			.attr("y",function(d){return d[1];})
			.attr("font-family","sans-serif")
			.attr("font-size","11px")
			.attr("fill","red");
	</script>

</body>
</html>