Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.