Old school D3 from simpler times

All examples By author By category About

juanprq

Full window Github gist

heatmap update example

forked from iblind's block: heatmap update example

<!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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js