Parametric Facade and Energy

.block

license: mit

README.md

Built with blockbuilder.org

forked from chriswmackey's block: Explore Facade Options

forked from anonymous's block: Explore Facade Options

data.json

allResults = '{"0,0,6,0,0,11" : [[10.500144, 47.860499, 8.840292, 31.43976, 18.062106, 4.333018],[32.377925, 13.569783]],"1,0,6,0,0,11" : [[10.625358, 47.868849, 8.835745, 31.43976, 18.07405, 4.361577],[33.118461, 13.639796]],"2,0,6,0,0,11" : [[10.869845, 47.89513, 8.830157, 31.43976, 18.096946, 4.41665],[34.588803, 13.774857]],"0,1,6,0,0,11" : [[10.9349, 48.006701, 8.838099, 31.43976, 18.116719, 4.426082],[34.955776, 13.781228]],"1,1,6,0,0,11" : [[11.072951, 48.020226, 8.833552, 31.43976, 18.129064, 4.458511],[35.694196, 13.851238]],"2,1,6,0,0,11" : [[11.313427, 48.042706, 8.827964, 31.43976, 18.152024, 4.512121],[37.163285, 13.986293]],"0,0,18,0,0,11" : [[10.498744, 46.471133, 8.840292, 31.43976, 18.286401, 4.305962],[31.247142, 11.833892]],"1,0,18,0,0,11" : [[10.623467, 46.464027, 8.835745, 31.43976, 18.279953, 4.333],[32.040683, 11.975472]],"2,0,18,0,0,11" : [[10.871445, 46.496118, 8.830157, 31.43976, 18.264777, 4.38031],[33.613736, 12.247934]],"0,1,18,0,0,11" : [[10.948546, 46.913001, 8.838099, 31.43976, 18.3296, 4.409034],[34.00217, 12.27919]],"1,1,18,0,0,11" : [[11.075041, 46.906287, 8.833552, 31.43976, 18.320695, 4.4338],[34.794135, 12.420761]],"2,1,18,0,0,11" : [[11.32964, 46.92784, 8.827964, 31.43976, 18.306215, 4.488719],[36.363966, 12.693206]],"0,0,6,1,0,11" : [[8.957385, 48.071596, 9.413715, 31.43976, 17.77042, 4.018493],[24.032624, 13.569783]],"1,0,6,1,0,11" : [[8.947774, 48.090943, 9.408163, 31.43976, 17.759195, 4.018221],[24.067932, 13.639796]],"2,0,6,1,0,11" : [[8.928732, 48.130181, 9.399379, 31.43976, 17.733069, 4.01755],[24.142716, 13.774857]],"0,1,6,1,0,11" : [[8.944302, 48.297092, 9.402319, 31.43976, 17.76543, 4.019006],[24.004261, 13.781228]],"1,1,6,1,0,11" : [[8.932907, 48.306218, 9.396822, 31.43976, 17.75202, 4.018202],[24.039579, 13.851238]],"2,1,6,1,0,11" : [[8.911955, 48.340416, 9.388052, 31.43976, 17.724681, 4.017053],[24.114399, 13.986293]],"0,0,18,1,0,11" : [[8.935302, 46.683088, 9.436535, 31.43976, 17.982957, 4.00187],[22.894712, 11.833892]],"1,0,18,1,0,11" : [[8.920742, 46.680094, 9.430163, 31.43976, 17.94404, 3.994756],[22.982019, 11.975472]],"2,0,18,1,0,11" : [[8.892854, 46.699642, 9.419632, 31.43976, 17.877734, 3.98377],[23.157756, 12.247934]],"0,1,18,1,0,11" : [[8.940471, 47.213005, 9.419612, 31.43976, 17.968895, 4.013528],[23.020378, 12.27919]],"1,1,18,1,0,11" : [[8.925425, 47.205964, 9.413287, 31.43976, 17.92964, 4.006862],[23.107738, 12.420761]],"2,1,18,1,0,11" : [[8.893708, 47.214653, 9.402718, 31.43976, 17.859804, 3.998769],[23.283516, 12.693206]],"0,0,6,0,1,11" : [[10.075718, 11.591104, 8.840292, 31.43976, 18.057462, 4.10504],[32.377925, 13.569783]],"1,0,6,0,1,11" : [[10.199256, 11.605854, 8.835745, 31.43976, 18.069955, 4.1294],[33.118461, 13.639796]],"2,0,6,0,1,11" : [[10.440632, 11.650749, 8.830157, 31.43976, 18.095044, 4.176175],[34.588803, 13.774857]],"0,1,6,0,1,11" : [[10.515631, 11.737013, 8.838099, 31.43976, 18.112944, 4.197453],[34.955776, 13.781228]],"1,1,6,0,1,11" : [[10.650396, 11.754844, 8.833552, 31.43976, 18.125901, 4.22551],[35.694196, 13.851238]],"2,1,6,0,1,11" : [[10.89332, 11.797774, 8.827964, 31.43976, 18.148719, 4.276628],[37.163285, 13.986293]],"0,0,18,0,1,11" : [[10.071433, 9.621393, 8.840292, 31.43976, 18.283384, 3.977265],[31.247142, 11.833892]],"1,0,18,0,1,11" : [[10.196575, 9.70621, 8.835745, 31.43976, 18.27695, 4.005126],[32.040683, 11.975472]],"2,0,18,0,1,11" : [[10.444568, 9.88263, 8.830157, 31.43976, 18.262571, 4.062641],[33.613736, 12.247934]],"0,1,18,0,1,11" : [[10.52514, 10.062396, 8.838099, 31.43976, 18.326182, 4.090465],[34.00217, 12.27919]],"1,1,18,0,1,11" : [[10.651782, 10.145963, 8.833552, 31.43976, 18.317836, 4.115912],[34.794135, 12.420761]],"2,1,18,0,1,11" : [[10.908353, 10.325916, 8.827964, 31.43976, 18.303761, 4.179782],[36.363966, 12.693206]],"0,0,6,1,1,11" : [[8.528857, 11.951938, 9.413719, 31.43976, 17.765742, 3.820367],[24.032624, 13.569783]],"1,0,6,1,1,11" : [[8.52012, 12.009319, 9.408161, 31.43976, 17.754867, 3.81981],[24.067932, 13.639796]],"2,0,6,1,1,11" : [[8.50107, 12.120196, 9.399379, 31.43976, 17.729673, 3.816418],[24.142716, 13.774857]],"0,1,6,1,1,11" : [[8.516174, 12.17496, 9.402312, 31.43976, 17.761237, 3.828363],[24.004261, 13.781228]],"1,1,6,1,1,11" : [[8.505558, 12.228002, 9.396822, 31.43976, 17.74793, 3.82403],[24.039579, 13.851238]],"2,1,6,1,1,11" : [[8.484331, 12.335055, 9.388052, 31.43976, 17.720353, 3.820221],[24.114399, 13.986293]],"0,0,18,1,1,11" : [[8.500343, 9.974215, 9.436527, 31.43976, 17.980632, 3.710837],[22.894712, 11.833892]],"1,0,18,1,1,11" : [[8.486356, 10.095889, 9.430163, 31.43976, 17.941809, 3.708459],[22.982019, 11.975472]],"2,0,18,1,1,11" : [[8.46357, 10.336461, 9.419628, 31.43976, 17.874708, 3.708914],[23.157756, 12.247934]],"0,1,18,1,1,11" : [[8.504483, 10.486184, 9.419614, 31.43976, 17.965449, 3.738359],[23.020378, 12.27919]],"1,1,18,1,1,11" : [[8.49025, 10.608031, 9.413286, 31.43976, 17.926975, 3.740264],[23.107738, 12.420761]],"2,1,18,1,1,11" : [[8.463106, 10.841867, 9.402718, 31.43976, 17.856388, 3.741649],[23.283516, 12.693206]],"0,0,6,0,0,17" : [[18.388888, 17.090161, 8.840292, 31.43976, 18.125712, 2.251541],[32.377925, 13.569783]],"1,0,6,0,0,17" : [[18.496104, 17.091666, 8.835745, 31.43976, 18.139954, 2.228724],[33.118461, 13.639796]],"2,0,6,0,0,17" : [[18.672152, 17.095062, 8.830157, 31.43976, 18.160586, 2.181418],[34.588803, 13.774857]],"0,1,6,0,0,17" : [[18.628489, 17.111273, 8.838099, 31.43976, 18.177267, 2.148139],[34.955776, 13.781228]],"1,1,6,0,0,17" : [[18.772504, 17.117297, 8.833552, 31.43976, 18.193706, 2.141791],[35.694196, 13.851238]],"2,1,6,0,0,17" : [[18.946602, 17.123024, 8.827964, 31.43976, 18.211358, 2.099102],[37.163285, 13.986293]],"0,0,18,0,0,17" : [[18.473206, 16.396211, 8.840292, 31.43976, 18.339367, 2.26379],[31.247142, 11.833892]],"1,0,18,0,0,17" : [[18.556071, 16.417922, 8.835745, 31.43976, 18.333085, 2.236693],[32.040683, 11.975472]],"2,0,18,0,0,17" : [[18.732277, 16.466415, 8.830157, 31.43976, 18.322344, 2.189863],[33.613736, 12.247934]],"0,1,18,0,0,17" : [[18.706923, 16.519671, 8.838099, 31.43976, 18.377525, 2.157269],[34.00217, 12.27919]],"1,1,18,0,0,17" : [[18.809966, 16.54236, 8.833552, 31.43976, 18.368947, 2.134681],[34.794135, 12.420761]],"2,1,18,0,0,17" : [[18.996768, 16.595003, 8.827964, 31.43976, 18.358061, 2.103294],[36.363966, 12.693206]],"0,0,6,1,0,17" : [[17.395163, 17.254841, 9.413802, 31.43976, 17.846588, 2.595053],[24.032624, 13.569783]],"1,0,6,1,0,17" : [[17.381219, 17.272838, 9.408299, 31.43976, 17.833205, 2.591214],[24.067932, 13.639796]],"2,0,6,1,0,17" : [[17.34926, 17.30733, 9.399506, 31.43976, 17.807411, 2.582961],[24.142716, 13.774857]],"0,1,6,1,0,17" : [[17.364963, 17.320783, 9.402499, 31.43976, 17.841154, 2.59781],[24.004261, 13.781228]],"1,1,6,1,0,17" : [[17.356387, 17.337896, 9.396963, 31.43976, 17.827671, 2.594537],[24.039579, 13.851238]],"2,1,6,1,0,17" : [[17.336258, 17.372324, 9.388255, 31.43976, 17.796615, 2.58655],[24.114399, 13.986293]],"0,0,18,1,0,17" : [[17.467483, 16.571381, 9.436883, 31.43976, 18.046454, 2.617019],[22.894712, 11.833892]],"1,0,18,1,0,17" : [[17.461496, 16.610955, 9.430438, 31.43976, 18.006897, 2.612516],[22.982019, 11.975472]],"2,0,18,1,0,17" : [[17.423812, 16.688378, 9.419886, 31.43976, 17.943105, 2.600478],[23.157756, 12.247934]],"0,1,18,1,0,17" : [[17.434551, 16.736271, 9.419861, 31.43976, 18.027364, 2.622136],[23.020378, 12.27919]],"1,1,18,1,0,17" : [[17.410378, 16.774803, 9.413536, 31.43976, 17.989203, 2.616122],[23.107738, 12.420761]],"2,1,18,1,0,17" : [[17.390066, 16.854109, 9.40296, 31.43976, 17.9228, 2.605663],[23.283516, 12.693206]],"0,0,6,0,1,17" : [[16.977753, 4.579639, 8.840292, 31.43976, 18.118084, 1.466345],[32.377925, 13.569783]],"1,0,6,0,1,17" : [[17.081111, 4.596046, 8.835745, 31.43976, 18.133013, 1.45511],[33.118461, 13.639796]],"2,0,6,0,1,17" : [[17.276944, 4.632051, 8.830157, 31.43976, 18.156808, 1.432815],[34.588803, 13.774857]],"0,1,6,0,1,17" : [[17.229482, 4.642879, 8.838099, 31.43976, 18.171941, 1.406008],[34.955776, 13.781228]],"1,1,6,0,1,17" : [[17.348548, 4.660652, 8.833552, 31.43976, 18.186976, 1.404135],[35.694196, 13.851238]],"2,1,6,0,1,17" : [[17.558938, 4.695943, 8.827964, 31.43976, 18.207474, 1.384976],[37.163285, 13.986293]],"0,0,18,0,1,17" : [[17.105024, 3.803875, 8.840292, 31.43976, 18.337206, 1.444395],[31.247142, 11.833892]],"1,0,18,0,1,17" : [[17.186435, 3.851527, 8.835745, 31.43976, 18.332185, 1.433472],[32.040683, 11.975472]],"2,0,18,0,1,17" : [[17.365469, 3.948451, 8.830157, 31.43976, 18.32028, 1.415095],[33.613736, 12.247934]],"0,1,18,0,1,17" : [[17.318521, 3.964052, 8.838099, 31.43976, 18.374663, 1.382223],[34.00217, 12.27919]],"1,1,18,0,1,17" : [[17.424847, 4.012489, 8.833552, 31.43976, 18.366107, 1.374202],[34.794135, 12.420761]],"2,1,18,0,1,17" : [[17.628753, 4.11077, 8.827964, 31.43976, 18.35406, 1.365867],[36.363966, 12.693206]],"0,0,6,1,1,17" : [[15.93376, 4.621659, 9.413804, 31.43976, 17.838471, 1.67239],[24.032624, 13.569783]],"1,0,6,1,1,17" : [[15.9042, 4.646887, 9.408301, 31.43976, 17.825275, 1.672888],[24.067932, 13.639796]],"2,0,6,1,1,17" : [[15.879551, 4.69614, 9.39951, 31.43976, 17.79928, 1.675302],[24.142716, 13.774857]],"0,1,6,1,1,17" : [[15.889425, 4.685447, 9.402506, 31.43976, 17.834253, 1.674768],[24.004261, 13.781228]],"1,1,6,1,1,17" : [[15.870669, 4.71005, 9.396965, 31.43976, 17.819902, 1.675636],[24.039579, 13.851238]],"2,1,6,1,1,17" : [[15.850582, 4.760228, 9.388256, 31.43976, 17.788698, 1.677181],[24.114399, 13.986293]],"0,0,18,1,1,17" : [[16.035879, 3.852752, 9.436867, 31.43976, 18.041157, 1.649565],[22.894712, 11.833892]],"1,0,18,1,1,17" : [[16.000842, 3.909561, 9.430438, 31.43976, 18.003359, 1.652748],[22.982019, 11.975472]],"2,0,18,1,1,17" : [[15.962017, 4.021768, 9.419884, 31.43976, 17.936523, 1.657336],[23.157756, 12.247934]],"0,1,18,1,1,17" : [[15.970318, 4.011219, 9.419854, 31.43976, 18.022717, 1.652958],[23.020378, 12.27919]],"1,1,18,1,1,17" : [[15.951507, 4.06867, 9.413537, 31.43976, 17.983358, 1.655543],[23.107738, 12.420761]],"2,1,18,1,1,17" : [[15.930575, 4.182186, 9.402956, 31.43976, 17.918036, 1.66096],[23.283516, 12.693206]]}'

index.html

<!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;}
    #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>

thumbnail.png