Simple: Heatmap view of Weather Data by zanarmstrong

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="weatherHourly.css">
</head>
<body>
	<div id="instructions">
		<p><span id="info">Click and Drag on the visualization to recenter it.</span></p>
		<p><span id="info">Data from <a href="https://gis.ncdc.noaa.gov/geoportal/catalog/search/resource/details.page?id=gov.noaa.ncdc:C00824">NOAA</a></span></p>
	</div>
	<div id="tooltip" class="hidden">
		<p><span id="values">Values go here</span></p>
	</div>
	<section id="weatherHeatmap">
	</section>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
  <script src="weatherHourly.js"></script>
</body>

weatherHourly.css

body {
	background-color: #3F3F3F;
}

p {
	color: white;
	margin-left: 60px;
	font-size: 14px;
	font-style: italic;
}

.title {
  font: 20px;
  fill: white;
}

.x {
	fill: white;
	color: white;
}

.heatmapdailies {
	stroke-width: 0px;
	stroke: none;
	stroke-opacity: 0;
}


#tooltip {
		  position: absolute;
		  width: 200px;
		  height: auto;
		  padding: 5px 10px;
		  font-weight: 700;
		  background-color: rgba(255, 255, 255, 0.7);
		  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
		  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
		  box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
		  pointer-events: none;
}

#tooltip p {
		  margin: 0;
		  line-height: 20px;
		  color: black;
		  font-size: 14px;
}

#instructions {
		  position: absolute;
		  width: 400px;
		  height: auto;
		  padding: 5px 10px;
		  font-weight: 700;
		  background-color: rgba(255, 255, 255, 0.7);
		  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
		  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
		  box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
		  pointer-events: none;
}

#instructions p {
		  margin: 0;
		  line-height: 20px;
		  color: black;
		  font-size: 14px;
}

.hidden {
		  display: none;
}

weatherHourly.js

"use strict";

// variables to set
var title = "Normal Daily Temperature in San Francisco by hour of day, based on last 30 years of recorded data";

// STANDARD VARIABLES
var margin = {top:    100, 
              right:  200, 
              bottom: 100, 
              left:   100},
  width = 1400 - margin.left - margin.right,
  height = 600 - margin.top - margin.bottom;

// Variables for this viz
var selectedHours = [];
var rectDim = {width: 3, height: 19};
// setting up temp min/max in case it's useful
var temp = {min: 120, max: -40}
// give vShift in hours
var vShift = 0;
var hShift = 0;
var tooltipOn = true;

// SCALE FUNCTIONS
var scalesHeatmap = { // color: pallete @ http://paletton.com/#uid=3140j0koQHIemRWk2MxuhDg-Ysy
                     color: d3.scale.linear().domain([75,65,55,45,35]).range(
                            ['rgb(202,0,32)','rgb(244,165,130)','rgb(247,247,247)','rgb(146,197,222)','rgb(5,113,176)']),
                     xTime: d3.time.scale().domain([moment("2010-01-01"), moment("2010-12-31")]).range([0, 3 * 364]),
                     legendY: d3.scale.linear().domain([0,23]).range([height/2 + 10 * 12, height/2 - 10 * 12])
};

// STANDARD SVG SETUP
var svg = d3.select('#weatherHeatmap')
  .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 + ')');

// read in data file
d3.csv("normalWeatherSF.csv", function(error, data) {
  if (error) return console.error(error);

  // transform data to useable format
  var sf = transformData(data);

  // draw lines 
  drawGraph(sf, title);

});

// helper functions
function drawGraph(data, title){
  drawHeatmap(data);
}

// setup data
function transformData(inputData, location){
  var outputData = []
  inputData.forEach(function(d){
    // record min/max in case it's useful
    if(d.HLYTEMPNORMAL / 10 > temp.max){
      temp.max = d.HLYTEMPNORMAL / 10;
    }
    if(d.HLYTEMPNORMAL / 10 < temp.min){
      temp.min = d.HLYTEMPNORMAL / 10;
    }
    // setup data structure
    outputData.push({dayOfYear: (moment(d.day).dayOfYear() - 1),
                     date: d.day, 
                     hour: +d.hour,
                     normalTemp: d.HLYTEMPNORMAL / 10})
  });
  return outputData
}

// draw the lines & legend for the graph
function drawHeatmap(data){
   svg.selectAll('.heatmapdailies')
      .data(data)
      .enter()
      .append('rect')
      .attr("class", "heatmapdailies")
      .attr("y", function(d){return ((d.hour + vShift) % 24) * rectDim.height;})
      .attr("x", function(d){return d.dayOfYear * rectDim.width;})
      .attr("width", rectDim.width + 1)
      .attr("height", rectDim.height + 1)
      .attr("fill", function(d){return scalesHeatmap.color(d.normalTemp);})
      .attr("stroke", "none")
}