D3 Examples - Parametric Lab Energy Model

xxxxxxxxxx
 
<!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:165px;float:left;padding:10px;height:60px}
    .slider2 { 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:105px;}
    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;}
    #ventilation {background-color:#f2f2f2}
    #equipment {background-color:#e6e6e6}
    #hoodDensity {background-color:#f2f2f2}
    #uvalue {background-color:#e6e6e6}
    #rvalue {background-color:#f2f2f2}
    #hvacType {background-color:#e6e6e6}
    #heatRecovery {background-color:#f2f2f2}
    #ventilation {background-color:#f2f2f2}
    #autoclosers {background-color:#e6e6e6}
    #minimumflow {background-color:#f2f2f2}
    #heatingsource {background-color:#e6e6e6}
    
    #euidiv1 {background-color:#f2f2f2}
    #euidiv2 {background-color:#e6e6e6}
    #peakcooldiv {background-color:#f2f2f2}
    #peakheatdiv {background-color:#e6e6e6}
  </style>
</head>
​
<body>
  <div id="inputSliders">
            <form id="sliders" autocomplete="off">
                <fieldset class="inputgroup">
          <div class="slider" id="ventilation">
          <label>Lab Ventilation</label>
                    <input type="range" name="vent" id="vent" value="0" min="0" max="1"  step = "1"><p id="ventoutput">6/3</p></div>
          <div class="slider" id="equipment">
          <label>Lab Equipment</label>
                    <input type="range" name="equip" id="equip" value="6" min="3" max="9"  step = "3"><p id="equipoutput">6W/sf</p></div>
          <div class="slider" id="hoodDensity">
          <label>Fume Hoods Per Bay</label>
                    <input type="range" name="hoodD" id="hoodD" value="0.5" min="0.5" max="1.5" step = "1"><p id="hoodoutput">0.5</p></div>
          <div class="slider" id="uvalue">
          <label>Window U-Value</label>
                    <input type="range" name="uval" id="uval" value="2" min="0" max="2" step = "1"><p id="uvaloutput">0.6</p></div>
          <div class="slider" id="rvalue">
          <label>Wall R-Value</label>
                    <input type="range" name="rval" id="rval" value="0" min="0" max="1"  step = "1"><p id="rvaloutput">3</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</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="autoclosers">
          <label>Sash Auto-Closers</label>
                    <input type="range" name="autoc" id="autoc" value="0" min="0" max="1"  step = "1"><p id="autocoutput">No</p></div>
          <div class="slider" id="minimumflow">
          <label>Hood Minimum Flow</label>
                    <input type="range" name="minflow" id="minflow" value="25" min="10" max="25"  step = "15"><p id="minflowoutput">25cfm</p></div>
          <div class="slider" id="heatingsource">
          <label>Heating Source</label>
                    <input type="range" name="hsource" id="hsource" value="0" min="0" max="1"  step = "1"><p id="hsourceoutput">plant</p></div>
                </fieldset>
            </form>
        </div>
​
    <div id="content">
    </div>
  
  <div id="summary">
    <div class="slider2" id="euidiv1"><div id="eui1"></div><p style="margin-top:3px;">kBTU/sf<br>EUI (steam/water)</p></div>
    <div class="slider2" id="euidiv2"><div id="eui2"></div><p style="margin-top:3px;">kBTU/sf<br>EUI (fuel/electricity)</p></div>
    <div class="slider2" id="peakcooldiv"><div id="peakcool"></div><p style="margin-top:3px;">BTU/h-sf<br>Peak Cooling</p></div>
    <div class="slider2" id="peakheatdiv"><div id="peakheat"></div><p style="margin-top:3px;">BTU/h-sf<br>Peak Heating</p></div>
   </div>
​
​
  <script>
    // Load in all of the data.
    var dataObj = JSON.parse(allResults)
    
    // Get inputs from the sliders
    var Vent = $("#vent").val().toString(); // Lab Ventilation
    var Equip = $("#equip").val().toString(); // Lab Equipment
    var HoodD = $("#hoodD").val().toString(); // Fume Hood Density
    var uValue = $("#uval").val().toString(); //U-value
    var rValue = $("#rval").val().toString(); //R-value
    var HVAC = $("#hvac").val().toString(); // HVAC Type
    var hRecovery = $("#heatr").val().toString(); // Heat Recovery
    var AutoC = $("#autoc").val().toString(); // Sash AutoClosers
    var MinFlow = $("#minflow").val().toString(); // Fume Hood Minimum Flow
    var hSource = $("#hsource").val().toString(); // Hot Water Source
    
​
    // Dictionary to interpret the meaning of the integer inputs.
    uValueDict = {'0':'0.25', '1':'0.4', '2':'0.6'}
    rValueDict = {'0':'3', '1':'20'}
    hvacTypeDict = {'0':'VAV', '1':'VAVr', '2':'Hydr'}
    labVentDict = {'0':'6/3', '1':'8/4'}
    autoClosDict = {'0':'No', '1':'Yes'}
    hSourceDict = {'0':'plant', '1':'boiler'}
​
    // Update inputs
    $("#vent").on("input", function(event) {
      Vent = $(this).val();
      $("#ventoutput").text(labVentDict[Vent]);
      updateEnergy();
    });
    $("#equip").on("input", function(event) {
      Equip = $(this).val();
      $("#equipoutput").text(Equip.toString() + 'W/sf');
      updateEnergy();
    });
    $("#hoodD").on("input", function(event) {
      HoodD = $(this).val();
      $("#hoodoutput").text(HoodD.toString());
      updateEnergy();
    });
    $("#uval").on("input", function(event) {
      uValue = $(this).val();
      $("#uvaloutput").text(uValueDict[uValue]);
      updateEnergy();
    });
    $("#rval").on("input", function(event) {
      rValue = $(this).val();
      $("#rvaloutput").text(rValueDict[rValue]);
      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();
    });
    $("#autoc").on("input", function(event) {
      AutoC = $(this).val();
      $("#autocoutput").text(autoClosDict[AutoC]);
      updateEnergy();
    });
    $("#minflow").on("input", function(event) {
      MinFlow = $(this).val();
      $("#minflowoutput").text(MinFlow.toString() + 'cfm');
      updateEnergy();
    });
    $("#hsource").on("input", function(event) {
      hSource = $(this).val();
      $("#hsourceoutput").text(hSourceDict[hSource]);
      updateEnergy();
    });
    
​
    // Function to update the charts.
    updateEnergy = function(){
        // Retrieve the energy use and peak load data from the json.
      var hRoption = 1
      if (hRecovery == 0.5) {
        var hRoption = 0
      }
      var ventOption = 1
      if (Vent == 1) {
        var ventOption = 1.33
      }
      if (HoodD == 0.5) {
        AutoC = 0
      }
      var windowOption = Math.abs(uValue-2)
      var inputList = [rValue, windowOption, HVAC, hRoption, HoodD, ventOption, AutoC, MinFlow, 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 coolElectr = rawData[0] / 27
      var heatFuel = rawData[1] / 0.7
      if (hSource == 1){
        var heatFuel = rawData[1] / 0.95
      }
      var siteEUIData = [rawData[2], rawData[3], heatFuel, coolElectr, rawData[4], rawData[5]]
      var peakData = dataObj[jsonStr][1]
      var floorArea = 1194
      peakData = [peakData[0]/floorArea, peakData[1]/floorArea]
      
      // 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 energy chart.
      svg4.selectAll('.energyBar').remove();
      stackIncrement = 0
      for (i = 0; i < siteEUIData.length; i++) {
        svg4.append("rect")
          .attr("x", margin.left + barSpacer)
          .attr("y", svgheight- margin.bottom - yScale(maxEUI-siteEUIData[i]) - yScale(maxEUI - stackIncrement))
          .attr("width", 100)
          .attr("height", yScale(maxEUI - siteEUIData[i]))
          .attr('fill', colors[i])
            .attr("class", "energyBar")
          .style("stroke", "#000")
          .style("stroke-width", "0.05em");
        stackIncrement += siteEUIData[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 EUI1 = precisionRound(rawData.reduce(add, 0),1);
      var EUI2 = precisionRound(siteEUIData.reduce(add, 0),1);
      
      d3.select("#eui1").append("text")
        .attr("class", "resultText")
        .attr("text-anchor", "start")
        .attr("fill", "#000")
            .style('font-size', '30px')
            .style('font-family', 'sans-serif')
        .text(EUI1.toString());
        d3.select("#eui2").append("text")
        .attr("class", "resultText")
        .attr("text-anchor", "start")
        .attr("fill", "#000")
            .style('font-size', '30px')
            .style('font-family', 'sans-serif')
        .text(EUI2.toString());
      d3.select("#peakcool").append("text")
        .attr("class", "resultText")
        .attr("text-anchor", "start")
        .attr("fill", "#000")
            .style('font-size', '30px')
            .style('font-family', 'sans-serif')
        .text(precisionRound(peakData[0],1).toString());
      d3.select("#peakheat").append("text")
        .attr("class", "resultText")
        .attr("text-anchor", "start")
        .attr("fill", "#000")
            .style('font-size', '30px')
            .style('font-family', 'sans-serif')
        .text(precisionRound(peakData[1],1).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;
        }
    
    
    // Properties of the Energy Chart
    var maxEUI = 300
    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 = 300
    svgheight = 400
    barSpacer = 35
    
    width = svgwidth - margin.left - margin.right
    height = svgheight - margin.top - margin.bottom
    
    var x = d3.scaleBand()
      .rangeRound([0, svgwidth])
      .padding(0.1)
      .align(0.1);
    
    var yScale = d3.scaleLinear()
          .domain([0,   maxEUI])
          .rangeRound([height, 0]);
    
    // Layout the EUI charts.
    buildEUIChar = function(axisText) {
      var svg = d3.select("#content").append("svg")
      .attr("width", svgwidth)
      .attr("height", svgheight)
​
      g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      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(axisText);
      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++) {
          svg.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");
          svg.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
        }
      return svg
    }
    
    svg2 = buildEUIChar('EUI (hot/cold water)');
    svg4 = buildEUIChar('EUI (fuel/electricity)');
    
    
    
    // Properties of the Peak Loads Chart
    var maxPeak = 8
    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>
​
    