building blueprint

forked from chriswmackey's block: Explore Facade Options

forked from chriswmackey's block: Parametric Energy Model Results

forked from chriswmackey's block: Parametric Energy Model

<!DOCTYPE html>
<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;}
    #progRatio {background-color:#e6e6e6}
    #glzRatio {background-color:#f2f2f2}
    #uvalue {background-color:#e6e6e6}
    #rvalue {background-color:#f2f2f2}
    #hvacType {background-color:#f2f2f2}
    #heatRecovery {background-color:#e6e6e6}
    #ventilation {background-color:#f2f2f2}
    #equipment {background-color:#e6e6e6}
    #pvdiv {background-color:#f2f2f2}
    #moneydiv {background-color:#e6e6e6}
    #euidiv {background-color:#f2f2f2}
    #hvacdiv {background-color:#e6e6e6}
  </style>
</head>

<body>
  <div id="inputSliders">
			<form id="sliders" autocomplete="off">
				<fieldset class="inputgroup">
          <div class="slider" id="progRatio">
					<label>Lab to Office Ratio</label>
					<input type="range" name="prog" id="prog" value="0.5" min="0" max="1" step = "0.25"><p id="progoutput">50%</p></div>
          <div class="slider" id="glzRatio">
          <label>Glazing Ratio</label>
					<input type="range" name="glz" id="glz" value="0.4" min="0.2" max="0.8" step = "0.2"><p id="glzoutput">40%</p></div>
          <div class="slider" id="uvalue">
          <label>Win U-Value</label>
					<input type="range" name="uval" id="uval" value="1" min="0" max="2" step = "1"><p id="uvaloutput">0.4</p></div>
          <div class="slider" id="rvalue">
          <label>Wall R-Value</label>
					<input type="range" name="rval" id="rval" value="15" min="5" max="25"  step = "10"><p id="rvaloutput">15</p></div>
          <div class="slider" id="hvacType">
          <label>HVAC Type</label>
					<input type="range" name="hvac" id="hvac" value="0" min="0" max="2"  step = "1"><p id="hvacoutput">VAV</p></div>
          <div class="slider" id="heatRecovery">
          <label>Heat Recovery Efficiency</label>
					<input type="range" name="heatr" id="heatr" value="0.5" min="0.5" max="0.75"  step = "0.25"><p id="heatroutput">50%</p></div>
          <div class="slider" id="ventilation">
          <label>Lab Ventilation</label>
					<input type="range" name="vent" id="vent" value="1" min="0" max="2"  step = "1"><p id="ventoutput">6 ACH</p></div>
          <div class="slider" id="equipment">
          <label>Lab Equipment</label>
					<input type="range" name="equip" id="equip" value="6" min="6" max="11"  step = "5"><p id="equipoutput">6 W/ft2</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>

// Dictionary to interpret the meaning of the integer inputs.
    uValueDict = {'0':'0.25', '1':'0.4', '2':'1.0'}
    hvacTypeDict = {'0':'VAV', '1':'Hydr', '2':'GSHP'}
    labVentDict = {'0':'4', '1':'6', '2':'10'}

// Update inputs
    $("#prog").on("input", function(event) {
      Prog = $(this).val();
      $("#progoutput").text((Prog*100).toString() + "%");
      updateImg();
      updateEnergy();
    });
    $("#glz").on("input", function(event) {
      Glz = $(this).val();
      $("#glzoutput").text((Glz*100).toString() + "%");
      updateImg();
      updateEnergy();
    });
    $("#uval").on("input", function(event) {
      uValue = $(this).val();
      $("#uvaloutput").text(uValueDict[uValue]);
      updateEnergy();
    });
    $("#rval").on("input", function(event) {
      rValue = $(this).val();
      $("#rvaloutput").text(rValue.toString());
      updateEnergy();
    });
    $("#hvac").on("input", function(event) {
      HVAC = $(this).val();
      $("#hvacoutput").text(hvacTypeDict[HVAC]);
      updateEnergy();
    });
    $("#heatr").on("input", function(event) {
      hRecovery = $(this).val();
      $("#heatroutput").text((hRecovery*100).toString() + "%");
      updateEnergy();
    });
    $("#vent").on("input", function(event) {
      Vent = $(this).val();
      $("#ventoutput").text(labVentDict[Vent] + ' ACH');
      updateEnergy();
    });
    $("#equip").on("input", function(event) {
      Equip = $(this).val();
      $("#equipoutput").text(Equip.toString() + ' W/ft2');
      updateEnergy();
    });
    
    // Function to retrive the images from github.
    updateImg = function(){
      var URL = 'https://raw.githubusercontent.com/chriswmackey/explorer-test/master/data3/'
      URL = URL + 'Lab_' + Prog
      URL = URL + 'Glz_' + Glz + '.gif'
      d3.select(".imgdisplay").remove()

svg.append("image")
        .attr('xlink:href', URL)
        .attr('class', 'pico')
        .attr('width', '450')
      	.attr('height', '450')
      	.attr('x', '0')
    		.attr('y', '0')
    		.attr("class","imgdisplay")
    }

// Function to update the charta.
    updateEnergy = function(){
    	// Retrieve the energy use and peak load data from the json.
      var inputList = [Prog, Glz, uValue, rValue, HVAC, hRecovery, Vent, Equip]
      var jsonStr = inputList.join(',')
      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*3)/63.751756, 1)
      var hvacSize = precisionRound(Math.max(peakData[0], peakData[1]),1)
      if (HVAC == "2"){
        var cost = precisionRound(EUI*1.275782, 1)
      } else {
        electr = [data[0], data[1], data[3], data[4], data[5]].reduce(add, 0)
        fuel = data[2]
        var cost = precisionRound((electr*1.275782)+(fuel*0.554254)
, 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/data3/'
    URL = URL + 'Lab_' + Prog
    URL = URL + 'Glz_' + Glz + '.gif'

// Display the image in the scene.
    var svg = d3.select("#content").append("svg")
    .attr("width", 450)
    .attr("height", 400)
    svg.append("image")
        .attr('xlink:href', URL)
        .attr('class', 'pico')
        .attr('width', '450')
    		.attr('height', '450')
    		.attr('x', '0')
    		.attr('y', '0')
    		.attr("class","imgdisplay")
 
    
    
    // Properties of the Energy Chart
    var maxEUI = 200
    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 = 400
    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 = 30
    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", 800 + "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