dexygen/temperatureScatterPlot.html

## temperatureScatterPlot.html
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dateTemperatures Scatter Plot</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
      var dateTemperatures = {
		  '[2016,8,29]': {low: 63, high: 94},
	      '[2016,9,2]': {low: 59, high: 81},
		  '[2016,9,1]': {low: 58, high: 85},
		  '[2016,9,5]': {low: 71, high: 88},
		  '[2016,9,3]': {low: 66, high: 91}
	  }

	  function orderTemperatureDates(dateTemperatures) {
	      var orderedDates = [];

		  for (var temperatureDate in dateTemperatures) {
		      var YMD = JSON.parse(temperatureDate);
		      orderedDates.push(new Date(YMD[0], YMD[1], YMD[2]));
		  }

		  return orderedDates.sort(function(a,b){return a.getTime() - b.getTime()});
	  }

	  function fillOrderedTemperatureDates(dates) {
	      var filledDates = [];
		  var nextDateTime;
		  var fillDateTime;

	      for (var i=0, n=dates.length; i<n; i++) {
		      filledDates.push(dates[i]);

			  if (i !== dates.length - 1) { //if not last
				  nextDateTime = dates[i+1].getTime();

				  for (var x=1;;x++) {
					  fillDateTime = new Date(dates[i]).setDate((dates[i].getDate()) + x);
					  if (nextDateTime === fillDateTime) {
						  break;
					  }
					  else {
						  filledDates.push(new Date(fillDateTime));
					  }
				  }
			  }
		  }

		  return filledDates;
	  }

	  function temperatureExtremes(dateTemperatures) {
		  var temperatures = [];

		  for (var temperatureDate in dateTemperatures) {
		      temperatures.push(dateTemperatures[temperatureDate].low);
			  temperatures.push(dateTemperatures[temperatureDate].high);
		  }

		  return {
		      min: Math.min.apply(null, temperatures),
			  max: Math.max.apply(null, temperatures)
		  }
	  }

	  function yExtremes(temperatureExtremes) {
	      return {
		      min: temperatureExtremes.min - 5,
			  max: temperatureExtremes.max + 5
		  }
	  }

	  $( document ).ready(function() {
		  var temperatureDates = fillOrderedTemperatureDates(orderTemperatureDates(dateTemperatures));
		  var scatterplotPanel = $('#scatterplot-panel');
		  var xAxisPanel = $('#x-axis-panel');
		  var axisExtremes = yExtremes(temperatureExtremes(dateTemperatures));
		  var monthDateSuffix;
		  var monthDatePanel;

		  for (var i=0, n=temperatureDates.length; i<n; i++) {
			  monthDateSuffix = temperatureDates[i].toString().split(' ').slice(1,3).join('-');

			  monthDatePanel = $('<div>', {
				id: 'x-axis-panel-' + monthDateSuffix,
				css: {
				    'float': 'left',
					'margin': '0px 10px 10px 10px'
				  }
				}
			  );

			  monthDatePanel.html(monthDateSuffix);
			  xAxisPanel.append(monthDatePanel);

			  scatterplotDatePanel = $('<div>', {
				id: 'scatterplot-panel-' + monthDateSuffix,
				css: {
				    'float': 'left',
					'height': '280px',
					'margin': '10px',
					'position': 'relative',
					'width': monthDatePanel.width() + "px"
				  }
				}
			  );
			  scatterplotPanel.append(scatterplotDatePanel);

			  var YMD = (function() {
			      var YMD = [];
			      var temperatureDate = temperatureDates[i];

				  YMD.push(temperatureDate.getFullYear());
				  YMD.push(temperatureDate.getMonth());
				  YMD.push(temperatureDate.getDate());

				  return JSON.stringify(YMD);
			  })();

			  if (dateTemperatures[YMD]) {
			      var low = dateTemperatures[YMD].low;
				  var high = dateTemperatures[YMD].high;

				  var highDiv = $('<div>', {
				      css: {
					      color: 'red',
					      position: 'absolute',
						  left: 15,
						  top: 280 - Math.round(high/axisExtremes.max * 280)
					  }
				  });

				  highDiv.html(high);
				  scatterplotDatePanel.append(highDiv);

				 var lowDiv = $('<div>', {
					  css: {
						  color: 'blue',
						  position: 'absolute',
						  left: 15,
						  top: Math.round(axisExtremes.min/low * 280)
					  }
				  });

				  lowDiv.html(low);
				  scatterplotDatePanel.append(lowDiv);
			  }
		  }
	  });
  </script>
</head>

<body>
    <div id='scatterplot-panel' style="float: left; padding: 10px; height:300px"></div>
	<div id='x-axis-panel' style='clear: left; float: left; padding: 10px;'></div>
</body>
</html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>dateTemperatures Scatter Plot</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script>
	var dateTemperatures = {
	'[2016,8,29]': {low: 63, high: 94},
	'[2016,9,2]': {low: 59, high: 81},
	'[2016,9,1]': {low: 58, high: 85},
	'[2016,9,5]': {low: 71, high: 88},
	'[2016,9,3]': {low: 66, high: 91}
	}

	function orderTemperatureDates(dateTemperatures) {
	var orderedDates = [];

	for (var temperatureDate in dateTemperatures) {
	var YMD = JSON.parse(temperatureDate);
	orderedDates.push(new Date(YMD[0], YMD[1], YMD[2]));
	}

	return orderedDates.sort(function(a,b){return a.getTime() - b.getTime()});
	}

	function fillOrderedTemperatureDates(dates) {
	var filledDates = [];
	var nextDateTime;
	var fillDateTime;

	for (var i=0, n=dates.length; i<n; i++) {
	filledDates.push(dates[i]);

	if (i !== dates.length - 1) { //if not last
	nextDateTime = dates[i+1].getTime();

	for (var x=1;;x++) {
	fillDateTime = new Date(dates[i]).setDate((dates[i].getDate()) + x);
	if (nextDateTime === fillDateTime) {
	break;
	}
	else {
	filledDates.push(new Date(fillDateTime));
	}
	}
	}
	}

	return filledDates;
	}

	function temperatureExtremes(dateTemperatures) {
	var temperatures = [];

	for (var temperatureDate in dateTemperatures) {
	temperatures.push(dateTemperatures[temperatureDate].low);
	temperatures.push(dateTemperatures[temperatureDate].high);
	}

	return {
	min: Math.min.apply(null, temperatures),
	max: Math.max.apply(null, temperatures)
	}
	}

	function yExtremes(temperatureExtremes) {
	return {
	min: temperatureExtremes.min - 5,
	max: temperatureExtremes.max + 5
	}
	}

	$( document ).ready(function() {
	var temperatureDates = fillOrderedTemperatureDates(orderTemperatureDates(dateTemperatures));
	var scatterplotPanel = $('#scatterplot-panel');
	var xAxisPanel = $('#x-axis-panel');
	var axisExtremes = yExtremes(temperatureExtremes(dateTemperatures));
	var monthDateSuffix;
	var monthDatePanel;

	for (var i=0, n=temperatureDates.length; i<n; i++) {
	monthDateSuffix = temperatureDates[i].toString().split(' ').slice(1,3).join('-');

	monthDatePanel = $('<div>', {
	id: 'x-axis-panel-' + monthDateSuffix,
	css: {
	'float': 'left',
	'margin': '0px 10px 10px 10px'
	}
	}
	);

	monthDatePanel.html(monthDateSuffix);
	xAxisPanel.append(monthDatePanel);

	scatterplotDatePanel = $('<div>', {
	id: 'scatterplot-panel-' + monthDateSuffix,
	css: {
	'float': 'left',
	'height': '280px',
	'margin': '10px',
	'position': 'relative',
	'width': monthDatePanel.width() + "px"
	}
	}
	);
	scatterplotPanel.append(scatterplotDatePanel);

	var YMD = (function() {
	var YMD = [];
	var temperatureDate = temperatureDates[i];

	YMD.push(temperatureDate.getFullYear());
	YMD.push(temperatureDate.getMonth());
	YMD.push(temperatureDate.getDate());

	return JSON.stringify(YMD);
	})();

	if (dateTemperatures[YMD]) {
	var low = dateTemperatures[YMD].low;
	var high = dateTemperatures[YMD].high;

	var highDiv = $('<div>', {
	css: {
	color: 'red',
	position: 'absolute',
	left: 15,
	top: 280 - Math.round(high/axisExtremes.max * 280)
	}
	});

	highDiv.html(high);
	scatterplotDatePanel.append(highDiv);

	var lowDiv = $('<div>', {
	css: {
	color: 'blue',
	position: 'absolute',
	left: 15,
	top: Math.round(axisExtremes.min/low * 280)
	}
	});

	lowDiv.html(low);
	scatterplotDatePanel.append(lowDiv);
	}
	}
	});
	</script>
	</head>

	<body>
	<div id='scatterplot-panel' style="float: left; padding: 10px; height:300px"></div>
	<div id='x-axis-panel' style='clear: left; float: left; padding: 10px;'></div>
	</body>
	</html>