D3Demo/07_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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample 06: 將兩種數值與三組資料，畫出圓點散佈圖</title>
<script type="text/javascript" src="js/analytics.js"> </script>
<script type="text/javascript" src="js/d3.js" ></script>
<link rel="stylesheet" href="css/RyanStyle.css">

<style type="text/css">
	.axis path,
	.axis line{
		fill: none;
		stroke: black;
		shape-rendering: crispEdges;
	}

	.axis text{
		font-family: sans-serif;
		font-size: 11px;
	}

</style>

</head>
<body>
<p>X軸為前測分數、Y軸為後測分數。綠色為實驗組、藍色為控制組(I)、黃色為控制組(II)。滑鼠移到圓點上顯示前後測分數</p>
<div id="htmltooltips" class="hidden">
	<p><span id="valueName">Name</span></p>
</div>

	<script type="text/javascript">

		var w=1000, h=500, padding=30;
		var dataset = [];


		d3.csv("data/experimental.csv",function(error,data){
			if(error){
				console.log(error);
			}else{

				for(var i=0 ; i<data.length; i++ ){
					var oneData = [ parseInt(data[i].mid_term), parseInt(data[i].CIE_grade_abcde),data[i].exp_group ];
					dataset.push(oneData);
				}
				//dataset = data;
				console.log(dataset);

				showChart();
			}
		});

		//showChart();  console.log(dataset);

		function showChart(){
			var xScale = d3.scale.linear()
						//.domain([0, d3.max(dataset, function(d){return d[0];})])  //domain的參數是矩陣
						.domain([0, 100])
						.range([padding,w-padding*2]);  //range的參數是矩陣
			var yScale = d3.scale.linear()
						.domain([0, d3.max(dataset, function(d){return d[1];})])
						.range([h-padding, padding]);  //讓y值數值高的在上面
			var rScale = d3.scale.linear()
						.domain([0, d3.max(dataset, function(d){return d[1];})])
						.range([2,5]) ;

			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 xScale(d[0]); },
					cy: function(d){return yScale(d[1]); },
					/*r: function(d){
						return rScale(d[1]);  //書上說：使用面積大小來對應呈現資料量的大小要比使用半徑來得正確與合理，所以必須先從面積反推出半徑。h-d[1]即為面積資料
					}//
					*/
					r: 5
				})
				.attr("fill",function(d){
					if (d[2] == "1"){
						return "blue";
					}else if(d[2] == "2") {
						return "green";
					}else{
						return "yellow";
					}
				})
				.on("mouseover",function(d){

						var xPosition = parseFloat(d3.select("svg").property("offsetLeft")) + d3.mouse(this)[0];
						var yPosition = parseFloat(d3.select("svg").property("offsetTop")) + d3.mouse(this)[1]; //  找出這個svg的y座標，再加上滑鼠在svg裡面的相對y座標

						d3.select("#htmltooltips")
							.style("left", xPosition + "px")
							.style("top", yPosition + "px" )
							.select("#valueName")
							.text(d[0]+", "+d[1]);

						console.log(d);

						d3.select("#htmltooltips").classed("hidden",false);
					})
					.on("mouseout",function(){
						d3.select("#htmltooltips").classed("hidden",true);
					});

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

			var xAxis = d3.svg.axis()
						.scale(xScale)
						.orient("buttom")
						.ticks(5);  //d3會自動生出他認為理想的刻度，也可以用這個指定，但是d3還是會依照你指定的數值在給一個他認為理想的刻度

			var yAxis = d3.svg.axis()
						.scale(yScale)
						.orient("left")
						.ticks(5);

			svg.append("g")  //svg裡面的群組group元素
				.call(xAxis)
				.attr("class", "axis")
				.attr("transform","translate(0,"+(h-(padding))+")")  //把x軸移到下方並與底部邊界有一些距離
				.append("text")
				.text("前測分數")
				.attr("class", "caption")
				.attr("x", w - (padding*3))
				.attr("y", 25)
				//.attr("font-size","31px")
				;


			svg.append("g")
				.attr("class","axis")
				.attr("transform","translate("+padding+",0)")
				.call(yAxis)
				.append("text")
				.text("後測分數")
				.attr("x", -padding)
				.attr("y", padding - 5)
				.attr("font-size","31px")
				;

		}


	</script>

</body>
</html>