iblind · September 23, 2015 07:16
diff --git a/1.csv b/1.csv
diff --git a/1_1.csv b/1_1.csv
diff --git a/1_2.csv b/1_2.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lange = "en">
 <head>
 	<meta charset="UTF-8">
 	<title>Heatmap</title>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
 	<script type ="text/javascript" src="updateHeatmap.js"> </script>
 	<style type ="text/css">  
 	
 	.btn { 
 		display: inline; 
 	}
 	
 	    
 		rect.bordered {
        stroke: #E6E6E6;
        stroke-width:2px;   
      }

      text.mono {
        font-size: 9pt;
        font-family: Consolas, courier;
        fill: #aaa;
      }

      text.axis-workweek {
        fill: #000;
      }

      text.axis-worktime {
        fill: #000;
      }</style>
 </head>


 <body>
 	
 	<div id="n1" class="btn">
 	    <input name="updateButton" 
 	           type="button" 
 	           value="1" 
 	    />
 	</div>
 	<div id="n2" class="btn">
 	    <input name="updateButton" 
 	           type="button" 
 	           value="2" 
 	    />
 	</div>
 	
 	
 	
 	<div id="chart"></div>
 	<script type="text/javascript">
 	var margin = {top:50, right:0, bottom:100, left:30},
 		width=960-margin.left-margin.right,
 		height=430-margin.top-margin.bottom,
 		gridSize=Math.floor(width/24),
 		legendElementWidth=gridSize*2.665,
 		buckets = 10,
 		colors = ["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"],
 		days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
 	times = ["12am", "1am", "2am", "3am", "4am", "5am", "6am", "7am", "8am", "9am", "10am", "11am", "12am", "1pm", "2pm", "3pm", "4pm", "5pm", "6pm", "7pm", "8pm", "9pm", "10pm", "11pm"];
 	
 	var heatmap;
 	var legend;

 	var svg = d3.select("#chart").append("svg")
 		.attr("width",width + margin.left+margin.right)
 		.attr("height", height+margin.top+margin.bottom)
 		.append("g")
 		.attr("transform", "translate("+ margin.left+","+margin.top+")");
 	
 	d3.csv("1.csv", function(d){
 		return {
 			day:+d.day2,
 			hour:+d.hour,
 			value:+d.per_day_per_hour
 			};
 		},
 		function(error, data){
 			
 			console.log(data);
 			
 			var colorScale = d3.scale.quantile()
 				.domain([0, (d3.max(data, function(d){return d.value;})/2), d3.max(data, function(d){return d.value;})])
 				.range(colors);


 			var dayLabels = svg.selectAll(".dayLabel")
 				.data(days)
 				.enter().append("text")
 				.text(function (d) {return d; })
 				.attr("y", function (d, i){ return i*gridSize;})
 				.style("text-anchor", "end")
 				.attr("transform", "translate(-6," + gridSize/1.5+")")
 				.attr("class", function(d, i) { return ((i>=0 && i<=4) ? "dayLabel mono axis axis-workweek": "dayLabel mono axis"); });
 				
 			var timeLabels = svg.selectAll(".timeLabel")
 				.data(times)
 				.enter().append("text")
 				.text(function(d){return d;})
 				.attr("x", function(d,i) {return i * gridSize;})
 				.attr("y",0)
 				.style("text-anchor", "middle")
 				.attr("transform", "translate(" + gridSize/2+", -6)")
 				.attr("class", function(d, i) { return ((i>=9 && i<= 17) ? "timeLabel mono axis axis-worktime": "timeLabel mono axis"); });
 				
 			var heatMap = svg.selectAll(".hour")
 				.data(data)
 				.enter().append("rect")
 				.attr("x", function(d) {return (d.hour) * gridSize;})
 				.attr("y", function(d) {return (d.day) * gridSize;})
 				.attr("rx", 4)
 				.attr("ry", 4)
 				.attr("class", "hour bordered")
 				.attr("width", gridSize)
 				.attr("height", gridSize)
 				.style("fill", colors[0]);
 				
 			heatMap.transition().duration(1000)
 				.style("fill", function(d){ return colorScale(d.value);});
 				
 			heatMap.append("title").text(function(d) {return d.value;});
 			
 			var legend = svg.selectAll(".legend")
 				.data([0].concat(colorScale.quantiles()), function(d) {return d;})
 				.enter().append("g")
 				.attr("class", "legend");
 			
 			legend.append("rect")
 				.attr("x", function(d, i){ return legendElementWidth * i;})
 				.attr("y", height)
 				.attr("width", legendElementWidth)
 				.attr("height", gridSize/2)
 				.style("fill", function(d, i) {return colors[i]; });
 			
 			legend.append("text")
 				.attr("class", "mono")
 				.text(function(d) {return "≥ "+d.toString().substr(0,4);})
 				.attr("x", function(d, i){ return legendElementWidth *i;})
 				.attr("y", height+ gridSize);
 				
 				
 				
 			d3.select("#n1")
 				.on("click", function() {
 					updateHeatmap("1_1.csv");
 				});
 	
 	
 			d3.select("#n2")
 				.on("click", function() {
 					updateHeatmap("1_2.csv");
 				});		
 	
 		;		
 		}
 );
 </script>

 <script>

 </script>
 	
 </body>
 </html>







diff --git a/updateHeatmap.js b/updateHeatmap.js
 function updateHeatmap(x){
 	svg.selectAll(".legend").attr("opacity", 0);
 	d3.csv(x, function(d){
 		return {
 			day:+d.day2,
 			hour:+d.hour,
 			value:+d.per_day_per_hour
 			};
 		},
 		
 		function(error, data){
 		

 		colorScale = d3.scale.quantile()
 			.domain([0, (d3.max(data, function(d){return d.value;})/2), d3.max(data, function(d){return d.value;})])
 			.range(colors);
 			
 			
 		var heatMap = svg.selectAll(".hour")
 			.data(data)
 			.transition().duration(1000)
 			.style("fill", function(d){ return colorScale(d.value);});
 			
 		heatMap.selectAll("title").text(function(d) {return d.value;});
 		
 		var legend = svg.selectAll(".legend")
 			.data([0].concat(colorScale.quantiles()), function(d) {return d;})
 			.enter().append("g")
 			.attr("class", "legend");
 		
 		legend.append("rect")
 			.attr("x", function(d, i){ return legendElementWidth * i;})
 			.attr("y", height)
 			.attr("width", legendElementWidth)
 			.attr("height", gridSize/2)
 			.style("fill", function(d, i) {return colors[i]; });
 		
 		legend.append("text")
 			.attr("class", "mono")
 			.text(function(d) {return "≥ "+d.toString().substr(0,4);})
 			.attr("x", function(d, i){ return legendElementWidth *i;})
 			.attr("y", height+ gridSize);
 			
 			
 			
 		}
 	)
 }
	day	hour	N	occurrence	per_day_per_hour	day2
1	Monday	0	50	4	12.5	0
2	Monday	1	45	4	11.25	0
3	Monday	2	25	4	6.25	0
4	Monday	3	17	4	4.25	0
5	Monday	4	8	4	2	0
6	Monday	5	24	4	6	0
7	Monday	6	25	4	6.25	0
8	Monday	7	40	4	10	0
9	Monday	8	53	4	13.25	0
10	Monday	9	63	4	15.75	0
11	Monday	10	76	4	19	0
12	Monday	11	56	4	14	0
13	Monday	12	73	4	18.25	0
14	Monday	13	58	4	14.5	0
15	Monday	14	74	4	18.5	0
16	Monday	15	92	4	23	0
17	Monday	16	78	4	19.5	0
18	Monday	17	85	4	21.25	0
19	Monday	18	89	4	22.25	0
20	Monday	19	94	4	23.5	0
21	Monday	20	87	4	21.75	0
22	Monday	21	97	4	24.25	0
23	Monday	22	99	4	24.75	0
24	Monday	23	74	4	18.5	0
25	Tuesday	0	70	4	17.5	1
26	Tuesday	1	46	4	11.5	1
27	Tuesday	2	19	4	4.75	1
28	Tuesday	3	11	4	2.75	1
29	Tuesday	4	7	4	1.75	1
30	Tuesday	5	12	4	3	1
31	Tuesday	6	30	4	7.5	1
32	Tuesday	7	37	4	9.25	1
33	Tuesday	8	46	4	11.5	1
34	Tuesday	9	52	4	13	1
35	Tuesday	10	59	4	14.75	1
36	Tuesday	11	56	4	14	1
37	Tuesday	12	76	4	19	1
38	Tuesday	13	79	4	19.75	1
39	Tuesday	14	69	4	17.25	1
40	Tuesday	15	83	4	20.75	1
41	Tuesday	16	67	4	16.75	1
42	Tuesday	17	83	4	20.75	1
43	Tuesday	18	86	4	21.5	1
44	Tuesday	19	78	4	19.5	1
45	Tuesday	20	81	4	20.25	1
46	Tuesday	21	83	4	20.75	1
47	Tuesday	22	90	4	22.5	1
48	Tuesday	23	70	4	17.5	1
49	Wednesday	0	53	4	13.25	2
50	Wednesday	1	31	4	7.75	2
51	Wednesday	2	20	4	5	2
52	Wednesday	3	13	4	3.25	2
53	Wednesday	4	8	4	2	2
54	Wednesday	5	21	4	5.25	2
55	Wednesday	6	27	4	6.75	2
56	Wednesday	7	36	4	9	2
57	Wednesday	8	34	4	8.5	2
58	Wednesday	9	57	4	14.25	2
59	Wednesday	10	55	4	13.75	2
60	Wednesday	11	56	4	14	2
61	Wednesday	12	75	4	18.75	2
62	Wednesday	13	52	4	13	2
63	Wednesday	14	75	4	18.75	2
64	Wednesday	15	79	4	19.75	2
65	Wednesday	16	65	4	16.25	2
66	Wednesday	17	61	4	15.25	2
67	Wednesday	18	74	4	18.5	2
68	Wednesday	19	89	4	22.25	2
69	Wednesday	20	77	4	19.25	2
70	Wednesday	21	99	4	24.75	2
71	Wednesday	22	83	4	20.75	2
72	Wednesday	23	88	4	22	2
73	Thursday	0	59	5	11.8	3
74	Thursday	1	46	5	9.2	3
75	Thursday	2	37	5	7.4	3
76	Thursday	3	28	5	5.6	3
77	Thursday	4	18	5	3.6	3
78	Thursday	5	25	5	5	3
79	Thursday	6	22	5	4.4	3
80	Thursday	7	46	5	9.2	3
81	Thursday	8	60	5	12	3
82	Thursday	9	60	5	12	3
83	Thursday	10	69	5	13.8	3
84	Thursday	11	92	5	18.4	3
85	Thursday	12	78	5	15.6	3
86	Thursday	13	74	5	14.8	3
87	Thursday	14	97	5	19.4	3
88	Thursday	15	92	5	18.4	3
89	Thursday	16	92	5	18.4	3
90	Thursday	17	75	5	15	3
91	Thursday	18	85	5	17	3
92	Thursday	19	94	5	18.8	3
93	Thursday	20	96	5	19.2	3
94	Thursday	21	103	5	20.6	3
95	Thursday	22	94	5	18.8	3
96	Thursday	23	94	5	18.8	3
97	Friday	0	77	5	15.4	4
98	Friday	1	43	5	8.6	4
99	Friday	2	32	5	6.4	4
100	Friday	3	21	5	4.2	4
101	Friday	4	17	5	3.4	4
102	Friday	5	10	5	2	4
103	Friday	6	27	5	5.4	4
104	Friday	7	42	5	8.4	4
105	Friday	8	61	5	12.2	4
106	Friday	9	64	5	12.8	4
107	Friday	10	79	5	15.8	4
108	Friday	11	64	5	12.8	4
109	Friday	12	81	5	16.2	4
110	Friday	13	85	5	17	4
111	Friday	14	89	5	17.8	4
112	Friday	15	71	5	14.2	4
113	Friday	16	79	5	15.8	4
114	Friday	17	98	5	19.6	4
115	Friday	18	86	5	17.2	4
116	Friday	19	102	5	20.4	4
117	Friday	20	100	5	20	4
118	Friday	21	94	5	18.8	4
119	Friday	22	114	5	22.8	4
120	Friday	23	116	5	23.2	4
121	Saturday	0	92	5	18.4	5
122	Saturday	1	59	5	11.8	5
123	Saturday	2	40	5	8	5
124	Saturday	3	36	5	7.2	5
125	Saturday	4	22	5	4.4	5
126	Saturday	5	25	5	5	5
127	Saturday	6	24	5	4.8	5
128	Saturday	7	36	5	7.2	5
129	Saturday	8	41	5	8.2	5
130	Saturday	9	66	5	13.2	5
131	Saturday	10	65	5	13	5
132	Saturday	11	84	5	16.8	5
133	Saturday	12	83	5	16.6	5
134	Saturday	13	83	5	16.6	5
135	Saturday	14	92	5	18.4	5
136	Saturday	15	99	5	19.8	5
137	Saturday	16	101	5	20.2	5
138	Saturday	17	102	5	20.4	5
139	Saturday	18	89	5	17.8	5
140	Saturday	19	93	5	18.6	5
141	Saturday	20	83	5	16.6	5
142	Saturday	21	83	5	16.6	5
143	Saturday	22	96	5	19.2	5
144	Saturday	23	64	5	12.8	5
145	Sunday	0	74	4	18.5	6
146	Sunday	1	54	4	13.5	6
147	Sunday	2	34	4	8.5	6
148	Sunday	3	42	4	10.5	6
149	Sunday	4	24	4	6	6
150	Sunday	5	25	4	6.25	6
151	Sunday	6	14	4	3.5	6
152	Sunday	7	27	4	6.75	6
153	Sunday	8	46	4	11.5	6
154	Sunday	9	58	4	14.5	6
155	Sunday	10	73	4	18.25	6
156	Sunday	11	58	4	14.5	6
157	Sunday	12	66	4	16.5	6
158	Sunday	13	72	4	18	6
159	Sunday	14	82	4	20.5	6
160	Sunday	15	74	4	18.5	6
161	Sunday	16	82	4	20.5	6
162	Sunday	17	65	4	16.25	6
163	Sunday	18	89	4	22.25	6
164	Sunday	19	87	4	21.75	6
165	Sunday	20	96	4	24	6
166	Sunday	21	68	4	17	6
167	Sunday	22	74	4	18.5	6
168	Sunday	23	75	4	18.75	6
	<!DOCTYPE html>
	<html lange = "en">
	<head>
	<meta charset="UTF-8">
	<title>Heatmap</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script type ="text/javascript" src="updateHeatmap.js"> </script>
	<style type ="text/css">

	.btn {
	display: inline;
	}


	rect.bordered {
	stroke: #E6E6E6;
	stroke-width:2px;
	}

	text.mono {
	font-size: 9pt;
	font-family: Consolas, courier;
	fill: #aaa;
	}

	text.axis-workweek {
	fill: #000;
	}

	text.axis-worktime {
	fill: #000;
	}</style>
	</head>


	<body>

	<div id="n1" class="btn">
	<input name="updateButton"
	type="button"
	value="1"
	/>
	</div>
	<div id="n2" class="btn">
	<input name="updateButton"
	type="button"
	value="2"
	/>
	</div>



	<div id="chart"></div>
	<script type="text/javascript">
	var margin = {top:50, right:0, bottom:100, left:30},
	width=960-margin.left-margin.right,
	height=430-margin.top-margin.bottom,
	gridSize=Math.floor(width/24),
	legendElementWidth=gridSize*2.665,
	buckets = 10,
	colors = ["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"],
	days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
	times = ["12am", "1am", "2am", "3am", "4am", "5am", "6am", "7am", "8am", "9am", "10am", "11am", "12am", "1pm", "2pm", "3pm", "4pm", "5pm", "6pm", "7pm", "8pm", "9pm", "10pm", "11pm"];

	var heatmap;
	var legend;

	var svg = d3.select("#chart").append("svg")
	.attr("width",width + margin.left+margin.right)
	.attr("height", height+margin.top+margin.bottom)
	.append("g")
	.attr("transform", "translate("+ margin.left+","+margin.top+")");

	d3.csv("1.csv", function(d){
	return {
	day:+d.day2,
	hour:+d.hour,
	value:+d.per_day_per_hour
	};
	},
	function(error, data){

	console.log(data);

	var colorScale = d3.scale.quantile()
	.domain([0, (d3.max(data, function(d){return d.value;})/2), d3.max(data, function(d){return d.value;})])
	.range(colors);


	var dayLabels = svg.selectAll(".dayLabel")
	.data(days)
	.enter().append("text")
	.text(function (d) {return d; })
	.attr("y", function (d, i){ return i*gridSize;})
	.style("text-anchor", "end")
	.attr("transform", "translate(-6," + gridSize/1.5+")")
	.attr("class", function(d, i) { return ((i>=0 && i<=4) ? "dayLabel mono axis axis-workweek": "dayLabel mono axis"); });

	var timeLabels = svg.selectAll(".timeLabel")
	.data(times)
	.enter().append("text")
	.text(function(d){return d;})
	.attr("x", function(d,i) {return i * gridSize;})
	.attr("y",0)
	.style("text-anchor", "middle")
	.attr("transform", "translate(" + gridSize/2+", -6)")
	.attr("class", function(d, i) { return ((i>=9 && i<= 17) ? "timeLabel mono axis axis-worktime": "timeLabel mono axis"); });

	var heatMap = svg.selectAll(".hour")
	.data(data)
	.enter().append("rect")
	.attr("x", function(d) {return (d.hour) * gridSize;})
	.attr("y", function(d) {return (d.day) * gridSize;})
	.attr("rx", 4)
	.attr("ry", 4)
	.attr("class", "hour bordered")
	.attr("width", gridSize)
	.attr("height", gridSize)
	.style("fill", colors[0]);

	heatMap.transition().duration(1000)
	.style("fill", function(d){ return colorScale(d.value);});

	heatMap.append("title").text(function(d) {return d.value;});

	var legend = svg.selectAll(".legend")
	.data([0].concat(colorScale.quantiles()), function(d) {return d;})
	.enter().append("g")
	.attr("class", "legend");

	legend.append("rect")
	.attr("x", function(d, i){ return legendElementWidth * i;})
	.attr("y", height)
	.attr("width", legendElementWidth)
	.attr("height", gridSize/2)
	.style("fill", function(d, i) {return colors[i]; });

	legend.append("text")
	.attr("class", "mono")
	.text(function(d) {return "≥ "+d.toString().substr(0,4);})
	.attr("x", function(d, i){ return legendElementWidth *i;})
	.attr("y", height+ gridSize);



	d3.select("#n1")
	.on("click", function() {
	updateHeatmap("1_1.csv");
	});


	d3.select("#n2")
	.on("click", function() {
	updateHeatmap("1_2.csv");
	});

	;
	}
	);
	</script>

	<script>

	</script>

	</body>
	</html>
	function updateHeatmap(x){
	svg.selectAll(".legend").attr("opacity", 0);
	d3.csv(x, function(d){
	return {
	day:+d.day2,
	hour:+d.hour,
	value:+d.per_day_per_hour
	};
	},

	function(error, data){


	colorScale = d3.scale.quantile()
	.domain([0, (d3.max(data, function(d){return d.value;})/2), d3.max(data, function(d){return d.value;})])
	.range(colors);


	var heatMap = svg.selectAll(".hour")
	.data(data)
	.transition().duration(1000)
	.style("fill", function(d){ return colorScale(d.value);});

	heatMap.selectAll("title").text(function(d) {return d.value;});

	var legend = svg.selectAll(".legend")
	.data([0].concat(colorScale.quantiles()), function(d) {return d;})
	.enter().append("g")
	.attr("class", "legend");

	legend.append("rect")
	.attr("x", function(d, i){ return legendElementWidth * i;})
	.attr("y", height)
	.attr("width", legendElementWidth)
	.attr("height", gridSize/2)
	.style("fill", function(d, i) {return colors[i]; });

	legend.append("text")
	.attr("class", "mono")
	.text(function(d) {return "≥ "+d.toString().substr(0,4);})
	.attr("x", function(d, i){ return legendElementWidth *i;})
	.attr("y", height+ gridSize);



	}
	)
	}