Built with blockbuilder.org
forked from chriswmackey's block: Explore Facade Options
forked from anonymous's block: Explore Facade Options
xxxxxxxxxx
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset = "UTF-8" />
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="data.json"></script>
<style>
#inputSliders { font-family:sans-serif;outline:none;padding-top:15px;width:960px;margin: 0 auto;}
#summary { font-family:sans-serif;font-weight:bold;text-align:center;outline:none;padding-top:15px;width:960px;margin: 0 auto;}
#content { width:960px;margin: 0 auto;}
.inputgroup {border:none;}
.slider { width:210px;float:left;padding:10px;}
label { float:left;font-weight:bold;padding-bottom:10px;}
input[type=range] { float:left;clear:left;margin-right:10px;width:130px;}
input[type=range]::-ms-track { background: transparent;border-color: transparent;color: transparent;-webkit-appearance: none}
input[type=range]::-ms-track { -ms-appearance: none; height: 3px;background-color: #d5d5d5; margin-right: 0;
margin-top: 5px;margin-bottom: 5px; border:0; }
input[type=range]::-ms-thumb { background-color: #FFF; border: 3px solid rgb(150,150,150);
border-radius: 5px; height: 10px;width: 1px; }
input[type=range]::-webkit-slider-runnable-track { height: 5px;background:#7c7c7c; margin-top: -4px;}
input[type=range]::-webkit-slider-thumb { margin-top:-6px;}
#inputSliders p {padding-top:10px;}
#eastRatio {background-color:#e6e6e6}
#westRatio {background-color:#f2f2f2}
#rvalue {background-color:#e6e6e6}
#electroc {background-color:#f2f2f2}
#filtered {background-color:#f2f2f2}
#hvacType {background-color:#e6e6e6}
</style>
</head>
<body>
<div id="inputSliders">
<form id="sliders" autocomplete="off">
<fieldset class="inputgroup">
<div class="slider" id="eastRatio">
<label>East Glazing Dim</label>
<input type="range" name="eglz" id="eglz" value="1" min="0" max="1" step = "1"><p id="eglzoutput">Full</p></div>
<div class="slider" id="westRatio">
<label>West Glazing Dim</label>
<input type="range" name="wglz" id="wglz" value="2" min="0" max="2" step = "1"><p id="wglzoutput">5.25'</p></div>
<div class="slider" id="rvalue">
<label>Wall R-Value</label>
<input type="range" name="rval" id="rval" value="6" min="6" max="18" step = "12"><p id="rvaloutput">6</p></div>
<div class="slider" id="electroc">
<label>Electrochromic</label>
<input type="range" name="echrom" id="echrom" value="0" min="0" max="1" step = "1"><p id="echromoutput">No</p></div>
<div class="slider"></div>
<div class="slider" id="hvacType">
<label>HVAC Type</label>
<input type="range" name="hvac" id="hvac" value="11" min="11" max="17" step = "6"><p id="hvacoutput">Hydr</p></div>
<div class="slider" id="filtered">
<label>Fume Hoods</label>
<input type="range" name="heatr" id="heatr" value="0" min="0" max="1" step = "1"><p id="heatroutput">Ducted</p></div>
</fieldset>
</form>
</div>
<div id="content">
</div>
<div id="summary">
<div class="slider" id="pvdiv"><div id="pv"></div><p style="margin-top:3px;">Roofs of <br> Photovoltaics</p></div>
<div class="slider" id="moneydiv"><div id="money"></div><p style="margin-top:3px;">$/sf <br>over 30 years</p></div>
<div class="slider" id="euidiv"><div id="eui"></div><p style="margin-top:3px;">kBTU/sf<br>Energy Use Intentisty</p></div>
<div class="slider" id="hvacdiv"><div id="hvacS"></div><p style="margin-top:3px;">BTU/h-sf<br>HVAC Size</p></div>
</div>
<script>
// Load in all of the data.
var dataObj = JSON.parse(allResults)
// Get inputs from the sliders
var EGlz = $("#eglz").val().toString(); // East Glazing Ratio
var WGlz = $("#wglz").val().toString(); // West Glazing Ratio
var rValue = $("#rval").val().toString(); //R-value
var Echrom = $("#echrom").val().toString(); // Electrochromic
var hRecovery = $("#heatr").val().toString(); // Heat Recovery
var HVAC = $("#hvac").val().toString(); // HVAC Type
// Dictionary to interpret the meaning of the integer inputs.
eGlzDict = {'0':'Sill', '1':'Full'}
wGlzDict = {'0':"2.25'", '1':"3.5'", '2':"5.25'"}
eChromDict = {'0':"No", '1':'Yes'}
heatRDict = {'0':'Ducted', '1':'Filtered'}
hvacTypeDict = {'11':'Hydr', '17':'GSHP'}
// Update inputs
$("#eglz").on("input", function(event) {
EGlz = $(this).val();
$("#eglzoutput").text(eGlzDict[EGlz]);
updateImg();
updateEnergy();
});
$("#wglz").on("input", function(event) {
WGlz = $(this).val();
$("#wglzoutput").text(wGlzDict[WGlz]);
updateImg();
updateEnergy();
});
$("#rval").on("input", function(event) {
rValue = $(this).val();
$("#rvaloutput").text(rValue.toString());
updateImg();
updateEnergy();
});
$("#echrom").on("input", function(event) {
Echrom = $(this).val();
$("#echromoutput").text(eChromDict[Echrom]);
updateEnergy();
});
$("#heatr").on("input", function(event) {
hRecovery = $(this).val();
$("#heatroutput").text(heatRDict[hRecovery]);
updateEnergy();
});
$("#hvac").on("input", function(event) {
HVAC = $(this).val();
$("#hvacoutput").text(hvacTypeDict[HVAC]);
updateEnergy();
});
// Function to retrive the images from github.
updateImg = function(){
URL = 'https://raw.githubusercontent.com/chriswmackey/explorer-test/master/data4/'
URL = URL + 'Glz' + EGlz
URL = URL + 'Wall' + rValue + '.jpg'
URL2 = 'https://raw.githubusercontent.com/chriswmackey/explorer-test/master/data4/W'
URL2 = URL2 + 'Glz' + WGlz
URL2 = URL2 + 'Wall' + rValue + '.jpg'
d3.select(".imgdisplay").remove()
svg.append("image")
.attr('xlink:href', URL)
.attr('class', 'pico')
.attr('width', '450')
.attr('height', '253')
.attr('x', '0')
.attr('y', '0')
.attr("class","imgdisplay")
svg.append("image")
.attr('xlink:href', URL2)
.attr('class', 'pico')
.attr('width', '450')
.attr('height', '267')
.attr('x', '0')
.attr('y', '253')
.attr("class","imgdisplay")
}
// Function to update the charta.
updateEnergy = function(){
// Retrieve the energy use and peak load data from the json.
var inputList = [WGlz, EGlz, rValue, Echrom, hRecovery,HVAC]
var jsonStr = inputList.join(',')
console.log(jsonStr)
var rawData = dataObj[jsonStr][0]
var data = [rawData[2], rawData[3], rawData[1], rawData[0], rawData[4], rawData[5]]
var peakData = dataObj[jsonStr][1]
// Update the energy chart.
svg2.selectAll('.energyBar').remove();
stackIncrement = 0
for (i = 0; i < data.length; i++) {
svg2.append("rect")
.attr("x", margin.left + barSpacer)
.attr("y", svgheight- margin.bottom - yScale(maxEUI-data[i]) - yScale(maxEUI - stackIncrement))
.attr("width", 100)
.attr("height", yScale(maxEUI - data[i]))
.attr('fill', colors[i])
.attr("class", "energyBar")
.style("stroke", "#000")
.style("stroke-width", "0.05em");
stackIncrement += data[i]
}
// Update the peak loads chart.
svg3.selectAll('.peakBar').remove();
for (i = 0; i < peakData.length; i++) {
svg3.append("rect")
.attr("x", peakMarginLeft + barSpacer + 50*i)
.attr("y", svgheight- margin.bottom - yPeakScale(maxPeak-peakData[i]))
.attr("width", 50)
.attr("height", yPeakScale(maxPeak - peakData[i]))
.attr('fill', peakColors[i])
.attr("class", "peakBar")
.style("stroke", "#000")
.style("stroke-width", "0.05em");
}
// Update the metrics on the bottom.
d3.selectAll(".resultText").remove();
// Calculate the metrics.
var EUI = precisionRound(rawData.reduce(add, 0),1);
var PV = precisionRound(EUI/66.942344, 1)
var hvacSize = precisionRound(Math.max(peakData[0], peakData[1]),1)
if (HVAC == "1"){
var cost = precisionRound(EUI*2.297802, 1)
} else {
electr = [data[0], data[1], data[3], data[4], data[5]].reduce(add, 0)
fuel = data[2]
var cost = precisionRound((electr*2.297802)+(fuel*0.503348)
, 1)
}
d3.select("#eui").append("text")
.attr("class", "resultText")
.attr("text-anchor", "start")
.attr("fill", "#000")
.style('font-size', '30px')
.style('font-family', 'sans-serif')
.text(EUI.toString());
d3.select("#pv").append("text")
.attr("class", "resultText")
.attr("text-anchor", "start")
.attr("fill", "#000")
.style('font-size', '30px')
.style('font-family', 'sans-serif')
.text(PV.toString());
d3.select("#hvacS").append("text")
.attr("class", "resultText")
.attr("text-anchor", "start")
.attr("fill", "#000")
.style('font-size', '30px')
.style('font-family', 'sans-serif')
.text(hvacSize.toString());
d3.select("#money").append("text")
.attr("class", "resultText")
.attr("text-anchor", "start")
.attr("fill", "#000")
.style('font-size', '30px')
.style('font-family', 'sans-serif')
.text(cost.toString());
}
// Utility Functions
function add(a, b) {
return a + b;
}
function precisionRound(number, precision) {
var factor = Math.pow(10, precision);
return Math.round(number * factor) / factor;
}
// Build a URL from the inputs.
var URL = 'https://raw.githubusercontent.com/chriswmackey/explorer-test/master/data4/'
URL = URL + 'Glz' + EGlz
URL = URL + 'Wall' + rValue + '.jpg'
var URL2 = 'https://raw.githubusercontent.com/chriswmackey/explorer-test/master/data4/W'
URL2 = URL2 + 'Glz' + WGlz
URL2 = URL2 + 'Wall' + rValue + '.jpg'
// Display the image in the scene.
var svg = d3.select("#content").append("svg")
.attr("width", 450)
.attr("height", 520)
svg.append("image")
.attr('xlink:href', URL)
.attr('class', 'pico')
.attr('width', '450')
.attr('height', '253')
.attr('x', '0')
.attr('y', '0')
.attr("class","imgdisplay")
svg.append("image")
.attr('xlink:href', URL2)
.attr('class', 'pico')
.attr('width', '450')
.attr('height', '267')
.attr('x', '0')
.attr('y', '253')
.attr("class","imgdisplay")
// Properties of the Energy Chart
var maxEUI = 180
var colors = ["rgb(255,255,0)", "rgb(191,191,191)", "rgb(255,0,102)", "rgb(0,176,240)","rgb(166,216,110)","rgb(119,185,49)"]
var energyTypes = ["Lighting", "Equipment", "Heating", "Cooling","Fans","Pumps"]
// Pixel sizes of the Energy Chart
margin = {top: 20, right: 40, bottom: 30, left: 70};
svgwidth = 240
svgheight = 520
barSpacer = 35
// Layout the chart.
var svg2 = d3.select("#content").append("svg")
.attr("width", svgwidth)
.attr("height", svgheight)
width = svg2.attr("width") - margin.left - margin.right,
height = svg2.attr("height") - margin.top - margin.bottom,
g = svg2.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleBand()
.rangeRound([0, svgwidth])
.padding(0.1)
.align(0.1);
var yScale = d3.scaleLinear()
.domain([0, maxEUI])
.rangeRound([height, 0]);
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(yScale).ticks(10, "s"))
.append("text")
.attr("x", 10)
.attr("y", yScale(yScale.ticks(10).pop()))
.attr("dy", "0.35em")
.attr("text-anchor", "start")
.attr("fill", "#000")
.style('font-size', '14px')
.text("EUI");
g.append("text")
.attr("x", 10)
.attr("y", 18)
.attr("dy", "0.35em")
.attr("text-anchor", "start")
.attr("fill", "#000")
.style('font-size', '11px')
.style('font-family', 'sans-serif')
.text("(kBTU/sf)");
// Add the legend.
spacerIncrement = 0
for (i = 0; i < energyTypes.length; i++) {
svg2.append("rect")
.attr("x", svgwidth - 11)
.attr("y", margin.top + spacerIncrement)
.attr("width", 10)
.attr("height", 10)
.attr('fill', colors[i])
.style("stroke", "#000")
.style("stroke-width", "0.05em");
svg2.append("text")
.attr("x",svgwidth - 15)
.attr("y", margin.top + spacerIncrement)
.attr("dy", "10px")
.attr("text-anchor", "end")
.attr("fill", "#000")
.style('font-family', 'sans-serif')
.style('font-size', '12px')
.text(energyTypes[i]);
spacerIncrement += 20
}
// Properties of the Peak Loads Chart
var maxPeak = 40
var peakColors = ["rgb(24,77,138)", "rgb(168,5,0)"]
var peakTypes = ["Cooling", "Heating"]
var peakMarginLeft = 70
// Layout the chart.
var svg3 = d3.select("#content").append("svg")
.attr("width", svgwidth)
.attr("height", svgheight)
g2 = svg3.append("g").attr("transform", "translate(" + peakMarginLeft + "," + margin.top + ")");
var yPeakScale = d3.scaleLinear()
.domain([0, maxPeak])
.rangeRound([height, 0]);
g2.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g2.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(yPeakScale).ticks(10, "s"))
.append("text")
.attr("x", 10)
.attr("y", yPeakScale(yPeakScale.ticks(10).pop()))
.attr("dy", "0.35em")
.attr("text-anchor", "start")
.attr("fill", "#000")
.style('font-size', '14px')
.text("Peak Load");
g2.append("text")
.attr("x", 10)
.attr("y", 18)
.attr("dy", "0.35em")
.attr("text-anchor", "start")
.attr("fill", "#000")
.style('font-size', '11px')
.style('font-family', 'sans-serif')
.text("(BTU/hr-sf)");
// Add the legend.
spacerIncrement = 0
for (i = 0; i < peakTypes.length; i++) {
svg3.append("rect")
.attr("x", svgwidth - 30)
.attr("y", margin.top + spacerIncrement)
.attr("width", 10)
.attr("height", 10)
.attr('fill', peakColors[i])
.style("stroke", "#000")
.style("stroke-width", "0.05em");
svg3.append("text")
.attr("x",svgwidth - 35)
.attr("y", margin.top + spacerIncrement)
.attr("dy", "10px")
.attr("text-anchor", "end")
.attr("fill", "#000")
.style('font-family', 'sans-serif')
.style('font-size', '12px')
.text(peakTypes[i]);
spacerIncrement += 20
}
updateEnergy()
d3.select(self.frameElement).style("height", 850 + "px");
</script>
</body>
https://d3js.org/d3.v4.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js