dashboard w/ img & sliders

forked from chriswmackey's block: Explore Facade Options

forked from anonymous's block: Explore Facade Options

forked from chriswmackey's block: Parametric Facade and Energy

<!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>

// 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