Skip to content

Instantly share code, notes, and snippets.

@cpopolo
Last active August 29, 2015 14:19
Show Gist options
  • Save cpopolo/7ce4239ec9a754587029 to your computer and use it in GitHub Desktop.
Save cpopolo/7ce4239ec9a754587029 to your computer and use it in GitHub Desktop.
D3 Module 4
AssetId DateTime 64651.Corey Building.RTU-3.Mixed AIr Temp 64601.Corey Building.RTU-3.Discharge Air Temp (°F) 64653.Corey Building.RTU-3.Return Air Temp (°F) 64656.Corey Building.RTU-3.ZN-Q (PPM) 64571.Corey Building.RTU-3.Outdoor Damper Output (%) 64570.Corey Building.RTU-3.Outdoor Air Temp (°F) 65506.Corey Building.RTU-3.Supply Fan CMD (1|0) Virtual.Per Cent OA () Virtual.ABS OAT-RAT () 64569.Corey Building.RTU-3.Heating Output (%) DoW Occupied Weather OAT (°F)
Corey.RTU-3 2014-01-01 00:00:00 63.08 82.45 65.83 400.5 0 25 0.75 0 0 0 We 0 19.9
Corey.RTU-3 2014-01-01 01:00:00 47.54 67.13 52.65 398.25 0 24.53 0.25 0 0 0 We 0 19.2
Corey.RTU-3 2014-01-01 02:00:00 60.6 75.1 59.81 401.25 0 24.01 1 0 0 0 We 0 17.1
Corey.RTU-3 2014-01-01 03:00:00 61.49 84.17 64.66 395.5 0 23 0.25 0 0 0 We 0 16.83
Corey.RTU-3 2014-01-01 04:00:00 53.06 69.19 55.42 396.75 0 23.12 0.75 0 0 0 We 0 16
Corey.RTU-3 2014-01-01 05:00:00 62.6 78.6 65.52 396 0 23.27 0.75 0 0 0 We 0 15.78
Corey.RTU-3 2014-01-01 06:00:00 55.76 71.8 57.13 399.5 0 23 0.5 0 0 0 We 0 14.33
Corey.RTU-3 2014-01-01 07:00:00 61.76 82.82 64.75 393.75 0 21.44 1 0 0 0 We 0 11.73
Corey.RTU-3 2014-01-01 08:00:00 54.05 73.45 59.28 397 0 21.87 0 0 0 0 We 1 12.93
Corey.RTU-3 2014-01-01 09:00:00 58.11 77.74 60.77 395.5 0 25.18 1 0 0 0 We 1 19.73
Corey.RTU-3 2014-01-01 10:00:00 60.94 79.17 65.3 395 0 26.31 0.25 0 0 0 We 1 22.18
Corey.RTU-3 2014-01-01 11:00:00 54.64 74.17 56.91 398.75 0 27.66 0.5 0 0 0 We 1 23
Corey.RTU-3 2014-01-01 12:00:00 63.75 80.15 66.29 398.75 0 28.42 0.75 0 0 0 We 1 23.5
Corey.RTU-3 2014-01-01 13:00:00 57.21 77.16 60.68 404.25 0 28.42 0 0 0 0 We 1 25.28
Corey.RTU-3 2014-01-01 14:00:00 56.33 76.35 58.57 399.25 0 28.83 0.75 0 0 0 We 1 25.83
Corey.RTU-3 2014-01-01 15:00:00 62.52 78.69 65.85 403.25 0 28.96 0.5 0 0 0 We 1 24.78
Corey.RTU-3 2014-01-01 16:00:00 49.09 66.27 52.38 400.75 0 28.39 0.25 0 0 0 We 1 23.55
Corey.RTU-3 2014-01-01 17:00:00 62.13 75.57 63.64 400.25 0 27.85 1 0 0 0 We 0 21.18
Corey.RTU-3 2014-01-01 18:00:00 58.36 73.43 63.04 401.5 0 27.24 0 0 0 0 We 0 19
Corey.RTU-3 2014-01-01 19:00:00 50.44 71.25 52.02 399 0 25.93 0.5 0 0 0 We 0 18.25
Corey.RTU-3 2014-01-01 20:00:00 62.54 82.1 65.39 401.5 0 25.21 0.75 0 0 0 We 0 16
Corey.RTU-3 2014-01-01 21:00:00 54.73 75.29 60.02 404.25 0 23.96 0 0 0 0 We 0 16.28
Corey.RTU-3 2014-01-01 22:00:00 52.13 66.25 52.93 404.25 0 24.76 0.75 0 0 0 We 0 17.33
Corey.RTU-3 2014-01-01 23:00:00 62.92 82.15 65.85 403.25 0 25.28 0.75 0 0 0 We 0 18.25
Corey.RTU-3 2014-01-02 00:00:00 51.41 71.71 56.84 409.75 0 25.44 0 0 0 0 Th 0 19
Corey.RTU-3 2014-01-02 01:00:00 55.81 69.97 54.81 407.5 0 25.24 1 0 0 0 Th 0 18.15
Corey.RTU-3 2014-01-02 02:00:00 63.39 82.74 65.84 407.75 0 24.83 0.5 0 0 0 Th 0 18
Corey.RTU-3 2014-01-02 03:00:00 50.08 69.86 54.57 413 0 25.24 0 0 0 0 Th 0 17.8
Corey.RTU-3 2014-01-02 04:00:00 57.33 76.29 59.51 407.25 0 24.58 1 0 0 0 Th 0 17.48
Corey.RTU-3 2014-01-02 05:00:00 61.58 79.42 65.53 406.5 0 24.53 0.5 0 0 0 Th 0 17.18
Corey.RTU-3 2014-01-02 06:00:00 47.97 66.83 52.22 409 0 23.55 0.25 0 0 0 Th 0 15.85
Corey.RTU-3 2014-01-02 07:00:00 61.21 78.03 63.5 405.5 0 23.03 1 0 0 0 Th 0 15.95
Corey.RTU-3 2014-01-02 08:00:00 58.68 76.3 63.99 410 0 23.09 0.25 0 0 0 Th 1 15.68
Corey.RTU-3 2014-01-02 09:00:00 54.08 66.66 56.26 405 0 22.4 0.75 0 0 0 Th 1 14.3
Corey.RTU-3 2014-01-02 10:00:00 61.93 78.67 65.15 403.75 0 20.68 1 0 0 0 Th 1 13.23
Corey.RTU-3 2014-01-02 11:00:00 53.96 74.27 58.72 410.5 0 19.9 0.25 0 0 0 Th 1 10.68
Corey.RTU-3 2014-01-02 12:00:00 61.02 79.41 64.3 401.75 0 19.26 1 0 0 0 Th 1 10
Corey.RTU-3 2014-01-02 13:00:00 59.33 77.75 63.65 403.25 0 19.09 0.25 0 0 0 Th 1 9.75
Corey.RTU-3 2014-01-02 14:00:00 57.88 75.94 61.45 401.25 0 18.31 1 0 0 0 Th 1 8.5
Corey.RTU-3 2014-01-02 15:00:00 60.66 80.46 64.88 403.25 0 17.46 0.5 0 0 0 Th 1 6.68
Corey.RTU-3 2014-01-02 16:00:00 57.76 71.01 61.36 399.5 0 16.95 1 0 0 0 Th 1 5.36
Corey.RTU-3 2014-01-02 17:00:00 61.41 83.04 64.97 401.25 0 16.42 0.5 0 0 0 Th 0 4.73
Corey.RTU-3 2014-01-02 18:00:00 58.13 73.99 60.84 397.75 0 15.54 1 0 0 0 Th 0 3.33
Corey.RTU-3 2014-01-02 19:00:00 61.17 79.25 64.65 399.5 0 15.13 0.75 0 0 0 Th 0 2.33
Corey.RTU-3 2014-01-02 20:00:00 54.9 69.2 60.92 397.75 0 14.63 0.75 0 0 0 Th 0 1.32
Corey.RTU-3 2014-01-02 21:00:00 60.6 80.75 64.26 395.5 0 13.89 1 0 0 0 Th 0 0.95
Corey.RTU-3 2014-01-02 22:00:00 56.7 79.44 62.59 395.5 0 13.49 0.5 0 0 0 Th 0 -0.1
Corey.RTU-3 2014-01-02 23:00:00 59.76 79.36 63.46 393.25 0 13.35 1 0 0 0 Th 0 -0.24
Corey.RTU-3 2014-01-03 00:00:00 60.66 80.63 64.33 391.75 0 12.98 0.75 0 0 0 Fr 0 -0.33
Corey.RTU-3 2014-01-03 01:00:00 56.75 79.95 62.08 394.5 0 13.1 0.75 0 0 0 Fr 0 -0.78
Corey.RTU-3 2014-01-03 02:00:00 60.42 80.48 64.1 393 0 13.4 1 0 0 0 Fr 0 -0.42
Corey.RTU-3 2014-01-03 03:00:00 61.6 80.52 64.48 390.25 0 13.51 0.5 0 0 0 Fr 0 -0.08
Corey.RTU-3 2014-01-03 04:00:00 57.93 76.56 62.14 387 0 13.91 1 0 0 0 Fr 0 0.25
Corey.RTU-3 2014-01-03 05:00:00 60.92 80.94 64.53 390 0 14.19 0.75 0 0 0 Fr 0 1.33
Corey.RTU-3 2014-01-03 06:00:00 57.38 70.12 61.23 390.75 0 14.73 1 0 0 0 Fr 0 2.7
Corey.RTU-3 2014-01-03 07:00:00 61.04 80.38 64.62 387.5 0 14.93 0.75 0 0 0 Fr 0 3.34
Corey.RTU-3 2014-01-03 08:00:00 57.3 70.98 61.6 390.75 0 15.63 1 0 0 0 Fr 1 3.38
Corey.RTU-3 2014-01-03 09:00:00 61.27 81.6 64.8 390.25 0 16.61 0.75 0 0 0 Fr 1 3.93
Corey.RTU-3 2014-01-03 10:00:00 61.59 80.2 63.38 391.75 0 18.49 1 0 0 0 Fr 1 7.78
Corey.RTU-3 2014-01-03 11:00:00 61.32 81 65.39 394.25 0 19.83 0.75 0 0 0 Fr 1 9.15
Corey.RTU-3 2014-01-03 12:00:00 61.86 77.64 64.68 394.5 0 20.42 1 0 0 0 Fr 1 10.23
Corey.RTU-3 2014-01-03 13:00:00 59.85 75.75 62.57 390.75 0 21.06 0.75 0 0 0 Fr 1 11.18
Corey.RTU-3 2014-01-03 14:00:00 62.61 78.67 65.54 393.75 0 21.12 0.75 0 0 0 Fr 1 12
Corey.RTU-3 2014-01-03 15:00:00 59.23 79.34 62.78 395.5 0 20.03 1 0 0 0 Fr 1 11.5
Corey.RTU-3 2014-01-03 16:00:00 58.66 78.57 63.85 396.75 0 18.88 0.75 0 0 0 Fr 1 9.25
Corey.RTU-3 2014-01-03 17:00:00 60.66 76.41 63.32 397.25 0 17.35 1 0 0 0 Fr 0 6.78
Corey.RTU-3 2014-01-03 18:00:00 58.96 74.69 63.56 395 0 16.3 0.75 0 0 0 Fr 0 5.55
Corey.RTU-3 2014-01-03 19:00:00 60.49 82.18 63.84 397.75 0 15.6 1 0 0 0 Fr 0 3.68
Corey.RTU-3 2014-01-03 20:00:00 59.24 77.61 63.1 399.25 0 14.52 0.75 0 0 0 Fr 0 2.5
Corey.RTU-3 2014-01-03 21:00:00 60.57 80.11 64.27 397 0 13.61 1 0 0 0 Fr 0 0.75
Corey.RTU-3 2014-01-03 22:00:00 58.29 76.46 61.31 398.5 0 13.01 0.75 0 0 0 Fr 0 -0.5
Corey.RTU-3 2014-01-03 23:00:00 60.56 79.06 64.43 399.75 0 12.11 1 0 0 0 Fr 0 -3
Corey.RTU-3 2014-01-04 00:00:00 53.87 78.76 60.58 395.75 0 11.96 0.5 0 0 0 Sa 0 -6.28
Corey.RTU-3 2014-01-04 01:00:00 60.2 79.42 64.04 402 0 11.78 1 0 0 0 Sa 0 -7.8
Corey.RTU-3 2014-01-04 02:00:00 57.8 83.7 61.88 401 0 11.52 0.5 0 0 0 Sa 0 -10.18
Corey.RTU-3 2014-01-04 03:00:00 60.1 79.03 64.16 399.25 0 10.45 1 0 0 0 Sa 0 -10.73
Corey.RTU-3 2014-01-04 04:00:00 58.15 79.64 62.66 401.25 0 10.19 0.75 0 0 0 Sa 0 -10.4
Corey.RTU-3 2014-01-04 05:00:00 59.83 76.59 64.01 404.75 0 9.91 1 0 0 0 Sa 0 -11.36
Corey.RTU-3 2014-01-04 06:00:00 55.41 79.26 61.06 404.75 0 10.29 0.5 0 0 0 Sa 0 -10.88
Corey.RTU-3 2014-01-04 07:00:00 60.07 79.76 63.98 409 0 10.85 1 0 0 0 Sa 0 -9.68
Corey.RTU-3 2014-01-04 08:00:00 57.17 80.17 62.66 410.5 0 11.91 0.75 0 0 0 Sa 0 -6.28
Corey.RTU-3 2014-01-04 09:00:00 60.77 81.28 63.72 412.5 0 14.51 1 0 0 0 Sa 0 2.95
Corey.RTU-3 2014-01-04 10:00:00 60.08 79.39 64.87 415.25 0 18.17 0.5 0 0 0 Sa 0 7.58
Corey.RTU-3 2014-01-04 11:00:00 63.01 80.49 65.9 408.5 0 21.97 0.75 0 0 0 Sa 0 13.28
Corey.RTU-3 2014-01-04 12:00:00 61.21 77.11 64.04 401.75 0 25 1 0 0 0 Sa 0 17.8
Corey.RTU-3 2014-01-04 13:00:00 62.13 77.56 64.79 404 0 26.86 0.75 0 0 0 Sa 0 20.4
Corey.RTU-3 2014-01-04 14:00:00 64.61 82.8 66.59 401.5 0 27.44 0.5 0 0 0 Sa 0 22.18
Corey.RTU-3 2014-01-04 15:00:00 61.84 76.71 64.03 400 0 27.46 1 0 0 0 Sa 0 23
Corey.RTU-3 2014-01-04 16:00:00 59.05 74.48 62.51 404.25 0 27.39 0.5 0 0 0 Sa 0 23
Corey.RTU-3 2014-01-04 17:00:00 63.44 82.26 66.25 401.75 0 26.81 0.5 0 0 0 Sa 0 23
Corey.RTU-3 2014-01-04 18:00:00 58.87 80.23 63.57 402.5 0 26.74 0.75 0 0 0 Sa 0 22.5
Corey.RTU-3 2014-01-04 19:00:00 57.94 72.12 61.99 405.5 0 26.33 0.5 0 0 0 Sa 0 21.78
Corey.RTU-3 2014-01-04 20:00:00 63.53 81.76 66.23 401 0 26.58 0.75 0 0 0 Sa 0 24.1
Corey.RTU-3 2014-01-04 21:00:00 56.84 74.16 61.4 399.5 0 27.21 0.75 0 0 0 Sa 0 24.1
Corey.RTU-3 2014-01-04 22:00:00 60.5 75.36 64.69 398.75 0 27.47 0.25 0 0 0 Sa 0 24.33
Corey.RTU-3 2014-01-04 23:00:00 59.48 79 62.72 404.5 0 27.43 1 0 0 0 Sa 0 25
Corey.RTU-3 2014-01-05 00:00:00 55.47 75.19 61.31 402 0 27.62 0.25 0 0 0 Su 0 25
Corey.RTU-3 2014-01-05 01:00:00 63.17 82.38 65.53 398.75 0 27.39 0.75 0 0 0 Su 0 24.78
Corey.RTU-3 2014-01-05 02:00:00 56 74.78 60.92 402.75 0 27.16 0.5 0 0 0 Su 0 23.83
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adding Padding</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('rect').click(function() {
console.log('clicked a rect');
$(this).attr("fill","#fc9000");
});
$('#hideme').click(function() {
$('#thechart').toggle('fast');
});
});
</script>
<style type="text/css">
body {
background-color: #ddddff;
font-family: Arial;
}
svg {
background-color: white;
}
rect.clickable:hover {
fill: yellow;
}
g.axis path, g.axis line {
stroke: green;
fill: none;
shape-rendering: crispEdges;
}
g.axis text {
font-family: Arial;
font-size: 8px;
opacity: 0.5;
text-anchor: left;
}
g.tick {
fill: black;
opacity: 0.5;
text-anchor: left;
}
g.axis.y line, g.axis.y path {
stroke: orange;
opacity: 0;
}
</style>
</head>
<body>
<h1>Corety RTU-3 Mixed Air Temps</h1>
<p>Date range 2014 January</p>
<p><small><a id="hideme">hideChart</a></small></p>
<div id="thechart" style="border: 1px solid red; width: 90%;">
<script type="text/javascript">
var w = 800;
var h = 800;
var padding = [20, 220, 80, 80 ]; //Top, right, bottom, left
var widthScale = d3.scale.pow().exponent(0.5)
.range([ 0, w - padding[1] - padding[3] ]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("right");
var svg = d3.select("body #thechart")
.append("svg")
.attr("id","svg")
.attr("width", w)
.attr("height", h);
d3.select("svg")
.append("h1")
.attr("width",500)
.attr("height",200)
.attr("fill","yellow")
.text("h1 text inside of svg"); // I didn't expect this to work but thought I should try.
d3.csv("Corey.RTU-3-short-2.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(a['64651.Corey Building.RTU-3.Mixed AIr Temp'], b['64651.Corey Building.RTU-3.Mixed AIr Temp']);
});
//data.push(['Corey.RTU-3','2015-01-02 11:00:00','100','74.27','58.72','410.5','0','19.9','0.25','0','0','0','Th','1','10.68']);
widthScale.domain([ 0, d3.max(data, function(d) {
return +d['64651.Corey Building.RTU-3.Mixed AIr Temp'];
}) ]);
heightScale.domain(data.map(function(d,i) {
return d.DateTime + ' ' + d['64651.Corey Building.RTU-3.Mixed AIr Temp'];
} ));
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", padding[3])
.attr("y", function(d, i) {
return heightScale(d.DateTime + ' ' + d['64651.Corey Building.RTU-3.Mixed AIr Temp']);
})
.attr("width", function(d) {
return widthScale(d['64651.Corey Building.RTU-3.Mixed AIr Temp']);
})
.attr("height", heightScale.rangeBand())
.attr("class","clickable")
.append("title")
.text(function(d) {
return d.DateTime + "'s life satisfaction score is " + d['64651.Corey Building.RTU-3.Mixed AIr Temp'];
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (w - padding[1] + 5) + ",0)")
.call(yAxis);
d3.selectAll('rect').on('click', function() {
console.log('clicked a rect');
d3.select(this).style('fill', '#fc9000');
});
});
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment