Stripped: 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>

readme.md

Data comes from NOAA: https://gis.ncdc.noaa.gov/geoportal/catalog/search/resource/details.page?id=gov.noaa.ncdc:C00824

"The U.S. Hourly Climate Normals for 1981 to 2010 are 30-year averages of meteorological parameters for thousands of U.S. stations located across the 50 states, as well as U.S. territories, commonwealths, the Compact of Free Association nations, and one station in Canada.""

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", "xxxxxx")
      .attr("x", "xxxxxx")
      .attr("width", "xxxxx")
      .attr("height", "xxxxx")
      .attr("fill", "xxxxxx")
      .attr("stroke", "none")
}