Old school D3 from simpler times

All examples By author By category About

iblind

Full window Github gist

heatmap_resize

<!DOCTYPE html>
<html lange = "en">
<head>
	<meta charset="UTF-8">
	<title>Heatmap of U.S. Missed Connections</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

<style type ="text/css">  
	
	    
		rect.bordered {
        stroke: #E7EFEF;
        stroke-width:2px;   
      }

text.mono {
        font-size: 10pt;
        font-family: Arial, sans-serif;
        fill: #aaa;
      }

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

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

</head>

<body>
	<div id= "dataset-picker"></div>
	<div id="chartHM"></div>

<script type="text/javascript">
	
	
	var marginHM = {top:35, right:0, bottom:50, left:30},
		divWidthHM = parseInt(d3.select("#chartHM").style("width")),
		widthHM = divWidthHM-marginHM.left-marginHM.right,
		gridSize = Math.floor(widthHM/24),
		legendElementWidth = gridSize*2.665,
		heightHM = (9*gridSize)-marginHM.top-marginHM.bottom,
		buckets = 10,
		colorsHM = ["#3288bd","#66c2a5","#abdda4","#e6f598","#ffffbf","#fee08b","#fdae61","#f46d43","#d53e4f"],
		daysHM = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
		timesHM = ["12am", "1am", "2am", "3am", "4am", "5am", "6am", "7am", "8am", "9am", "10am", "11am", "12am", "1pm", "2pm", "3pm", "4pm", "5pm", "6pm", "7pm", 					"8pm", "9pm", "10pm", "11pm"],
		datasetsHM=["https://s3.amazonaws.com/blinderman-lede/missed_connections/cities_posts_day_hr/USA_posts_day_hr_normalized_w_int_days.csv",
				"https://s3.amazonaws.com/blinderman-lede/missed_connections/cities_posts_day_hr/NEW YORK_posts_day_hr_normalized_w_int_days.csv", 
				"https://s3.amazonaws.com/blinderman-lede/missed_connections/cities_posts_day_hr/LOS ANGELES_posts_day_hr_normalized_w_int_days.csv",
				"https://s3.amazonaws.com/blinderman-lede/missed_connections/cities_posts_day_hr/CHICAGO_posts_day_hr_normalized_w_int_days.csv",
				"https://s3.amazonaws.com/blinderman-lede/missed_connections/cities_posts_day_hr/PHILADELPHIA_posts_day_hr_normalized_w_int_days.csv",
				"https://s3.amazonaws.com/blinderman-lede/missed_connections/cities_posts_day_hr/HOUSTON_posts_day_hr_normalized_w_int_days.csv",
				"https://s3.amazonaws.com/blinderman-lede/missed_connections/cities_posts_day_hr/SAN ANTONIO_posts_day_hr_normalized_w_int_days.csv",
				"https://s3.amazonaws.com/blinderman-lede/missed_connections/cities_posts_day_hr/PHOENIX_posts_day_hr_normalized_w_int_days.csv",
				"https://s3.amazonaws.com/blinderman-lede/missed_connections/cities_posts_day_hr/SAN DIEGO_posts_day_hr_normalized_w_int_days.csv",
				"https://s3.amazonaws.com/blinderman-lede/missed_connections/cities_posts_day_hr/DALLAS_posts_day_hr_normalized_w_int_days.csv"];

var svgWidthHM = widthHM + marginHM.left+marginHM.right,
		svgHeightHM = heightHM+marginHM.top+marginHM.bottom;

var svgHM = d3.select("#chartHM").append("svg")
		    .style("width", (svgWidthHM+20) + "px")
			.style("height", (svgHeightHM+30) + "px")
				.append("g")
				.attr("transform", "translate("+ marginHM.left+","+marginHM.top+")");
	
	var dayLabels = svgHM.selectAll(".dayLabel")
		.data(daysHM)
		.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 = svgHM.selectAll(".timeLabel")
		.data(timesHM)
		.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 heatmapChart = function(csvFile) {
			d3.csv(csvFile,
			function(d){
				return {
					day:+d.day2,
					hour:+d.hour,
					value:+d.post_per_day_per_hour
				};
			},
		function(error, data){			
			var colorScaleHM = d3.scale.quantile()
				.domain([0, (d3.max(data, function(d){return d.value;})/2), d3.max(data, function(d){return d.value;})])
				.range(colorsHM);

var cards = svgHM.selectAll(".hour")
				.data(data, function(d){ return d.day+":"+d.hour;});
				
			cards.append("title");
			
			cards.enter().append("rect")
				.attr("x", function(d) {return d.hour *gridSize; })
				.attr("y", function(d) {return d.day * gridSize; })
				.attr("class", "HM")
				.attr("class", "hour bordered")
				.attr("width", gridSize)
				.attr("height", gridSize)
				.style("fill", colorsHM[0]);
				
			cards.transition().duration(1000)
				.style("fill", function(d){ return colorScaleHM(d.value);});
				
			cards.select("title").text(function(d) {return d.value;});
			
			cards.exit().remove();
			
			var legend = svgHM.selectAll(".legend")
				.data([0].concat(colorScaleHM.quantiles()), function(d) {return d;})
				
			legend.enter().append("g")
				.attr("class", "legend");
			
			legend.append("rect")
				.attr("class", "HMLegend")
				.attr("x", function(d, i){ return legendElementWidth * i;})
				.attr("y", 7.2*gridSize)
				.attr("width", legendElementWidth)
				.attr("height", gridSize/2)
				.style("fill", function(d, i) {return colorsHM[i]; });
			
			legend.append("text")
				.attr("class", "HMLegendText")
				.attr("class", "mono")
				.text(function(d) {return "≥ "+d.toString().substr(0,4);})
				.attr("x", function(d, i){ return legendElementWidth *i;})
				.attr("y", 8*gridSize);
				
				legend.exit().remove();
				
				
				
				d3.select(window).on("resize", resize);
				
				function resize(){
					
					marginHM = {top:35, right:0, bottom:50, left:30};
					divWidthHM = parseInt(d3.select("#chartHM").style("width"));
					widthHM = divWidthHM-marginHM.left-marginHM.right;
					gridSize = Math.floor(widthHM/24);
					legendElementWidth = gridSize*2.665;
					heightHM = (9*gridSize)-marginHM.top-marginHM.bottom;
					
					
					svgWidthHM = widthHM + marginHM.left+marginHM.right;
					svgHeightHM = heightHM+marginHM.top+marginHM.bottom;
		
					svgHM.select("svg").style("width", (svgWidthHM+20) + "px")
						 .style("height", (svgHeightHM+30) + "px");
						 
						 
						 
				 	dayLabels.attr("y", function (d, i){ return i*gridSize;})
						 .attr("transform", "translate(-6," + gridSize/1.5+")");
		
				 	timeLabels.attr("x", function(d,i) {return i * gridSize;})
				 		.attr("transform", "translate(" + gridSize/2+", -6)");
						
						
					cards.attr("x", function(d) {return d.hour *gridSize; })
						.attr("y", function(d) {return d.day * gridSize; })
						.attr("width", gridSize)
						.attr("height", gridSize);
					
					
					
					d3.selectAll("rect.HMLegend")
						.attr("x", function(d, i){ return legendElementWidth * i;})
						.attr("y", 7.2*gridSize)
						.attr("width", legendElementWidth)
						.attr("height", gridSize/2);
			
					d3.selectAll("text.HMLegendText")
						.attr("x", function(d, i){ return legendElementWidth *i;})
						.attr("y", 8*gridSize);
					
				}
				
				
			});
		};
		
		heatmapChart(datasetsHM[0]);
		
		var datasetpicker = d3.select("#dataset-picker").selectAll(".dataset-button")
			.data(datasetsHM);
		
		datasetpicker.enter()
			.append("input")
			.attr("value", function(d){return d.toString().match(/[A-Z\s]+/);})
			.attr("type", "button")
			.attr("class", "dataset-button ")
			.on("click", function(d){
				heatmapChart(d);
			});
							
</script>

</body>
</html>

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