D3 Examples - Parametric THERM Model-UPDATE

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:210px;float:left;padding:10px;}
    .slider2 { width:440px;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;}
    #bside { width:250px;}
    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;}
    #bottomThick {background-color:#e6e6e6}
    #topThick {background-color:#f2f2f2}
    #pipeSpacing {background-color:#e6e6e6}
    #waterTemp {background-color:#f2f2f2}
    #bottomSide {background-color:#cccccc}
  </style>
</head>
​
<body>
  <div id="inputSliders">
            <form id="sliders" autocomplete="off">
                <fieldset class="inputgroup">
          <div class="slider" id="bottomThick">
                    <label>Bottom Thickness</label>
                    <input type="range" name="bthick" id="bthick" value="2" min="1" max="4" step = "1"><p id="bthickzoutput">2"</p></div>
          <div class="slider" id="topThick">
          <label>Top Thickness</label>
                    <input type="range" name="tthick" id="tthick" value="2" min="1" max="4" step = "1"><p id="tthickoutput">2"</p></div>
          <div class="slider" id="pipeSpacing">
          <label>Pipe Spacing</label>
                    <input type="range" name="pspac" id="pspac" value="2" min="0" max="3"  step = "1"><p id="pspacoutput">12"</p></div>
          <div class="slider" id="waterTemp">
          <label>Water Temperature</label>
                    <input type="range" name="temp" id="temp" value="54" min="42" max="66"  step = "4"><p id="tempoutput">54 F</p></div>
          <div class="slider2" id="bottomSide">
          <label>Slab Bottom</label>
                    <input type="range" name="bside" id="bside" value="1" min="0" max="2" step = "1"><p id="bsideoutput">Accoustic Insulation</p></div>
          <div class="slider"><img src="https://raw.githubusercontent.com/chriswmackey/explorer-test/master/data5/legend.png" alt="Temperature Legend" width="420px"></div>
                </fieldset>
            </form>
        </div>
​
    <div id="content">
    </div>
  
  <div id="summary">
    <div class="slider" id="hfdiv"><div id="hf"></div><p style="margin-top:3px;">Total<br> Heat Flux</p></div>
    <div class="slider" id="colddiv"><div id="hfbtu"></div><p style="margin-top:3px;">Total<br> Heat Flux</p></div>
    <div class="slider" id="ctempdiv"><div id="ctemp"></div><p style="margin-top:3px;">Coldest Surface <br> Temperature</p></div>
    <div class="slider" id="condendiv"><div id="conden"></div><p style="margin-top:3px;">From Condensation<br>at 55% RH</p></div>
   </div>
​
​
  <script>
    // Load in all of the data.
    var dataObj = JSON.parse(allResults)
    
    // Get inputs from the sliders
    var BThick = $("#bthick").val().toString(); // Bottom Thickness
    var TThick = $("#tthick").val().toString(); // Top Thickness
    var pSpac = $("#pspac").val().toString(); // Pipe Spacing
    var Temp = $("#temp").val().toString(); // Water Temperature
    var BSide = $("#bside").val().toString(); // Bottom Side
​
    // Dictionary to interpret the meaning of the integer inputs.
    pSpacDict = {'0':'6"', '1':'9"', '2':'12"', '3':'18"'}
    bSideDict = {'0':"Insulated", '1':"Accoustic Insulation", '2':"Exposed"}
​
    // Update inputs
    $("#bthick").on("input", function(event) {
      BThick = $(this).val();
      $("#bthickzoutput").text(BThick.toString() + '"');
      updateImg();
      updateData();
    });
    $("#tthick").on("input", function(event) {
      TThick = $(this).val();
      $("#tthickoutput").text(TThick.toString() + '"');
      updateImg();
      updateData();
    });
    $("#pspac").on("input", function(event) {
      pSpac = $(this).val();
      $("#pspacoutput").text(pSpacDict[pSpac]);
      updateImg();
      updateData();
    });
    $("#temp").on("input", function(event) {
      Temp = $(this).val();
      $("#tempoutput").text(Temp.toString() + 'F');
      updateImg();
      updateData();
    });
    $("#bside").on("input", function(event) {
      BSide = $(this).val();
      $("#bsideoutput").text(bSideDict[BSide]);
      updateImg();
      updateData();
    });
    
    // Function to retrive the images from github.
    updateImg = function(){
      URL = 'https://raw.githubusercontent.com/chriswmackey/explorer-test/master/data5/NCGMtherm'
        URL = URL + BSide
      URL = URL + BThick
      URL = URL + TThick
      URL = URL + pSpac
      URL = URL + Temp + '_View.png'
​
      
      d3.select(".imgdisplay").remove()
​
      svg.append("image")
        .attr('xlink:href', URL)
        .attr('class', 'pico')
        .attr('width', '800')
        .attr('height', '581')
        .attr('x', '80')
            .attr('y', '0')
            .attr("class","imgdisplay")
    }
​
    // Function to update the metrics.
    updateData = function(){
        // Retrieve the energy use and peak load data from the json.
      var inputList = [BThick, TThick, pSpac, Temp, BSide]
      var jsonStr = inputList.join(',')
      var rawData = dataObj[jsonStr]
      
      // Update the metrics on the bottom.
      d3.selectAll(".resultText").remove();
      
      // Calculate the metrics.
      var hFlux = precisionRound(rawData[0],1);
      var hFluxBTU =  precisionRound(rawData[1], 1)
      var coldTemp = precisionRound(rawData[2],1)
      var degGallery = precisionRound(rawData[3],1)
      
      var galColor = '#000'
      if (rawData[3] < 0){
        galColor = '#be2c33'
      } else if (rawData[3] < 3){
        galColor = '#ce8f30'
      }
      
      d3.select("#hf").append("text")
        .attr("class", "resultText")
        .attr("text-anchor", "start")
        .attr("fill", "#000")
            .style('font-size', '30px')
            .style('font-family', 'sans-serif')
        .text(hFlux.toString() + ' W/sf');
        d3.select("#hfbtu").append("text")
        .attr("class", "resultText")
        .attr("text-anchor", "start")
        .attr("fill", "#000")
            .style('font-size', '30px')
            .style('font-family', 'sans-serif')
        .text(hFluxBTU.toString()+ ' BTU/sf');
      d3.select("#ctemp").append("text")
        .attr("class", "resultText")
        .attr("text-anchor", "start")
        .attr("fill", "#000")
            .style('font-size', '30px')
            .style('font-family', 'sans-serif')
        .text(coldTemp.toString()+ ' F');
      d3.select("#conden").append("text")
        .attr("class", "resultText")
        .attr("text-anchor", "start")
        .attr("fill", "#000")
            .style('font-size', '30px')
            .style('font-family', 'sans-serif')
        .style('color', galColor)
        .text(degGallery.toString()+ ' F');
    }
    
    
    // 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.
    URL = 'https://raw.githubusercontent.com/chriswmackey/explorer-test/master/data5/NCGMtherm'
        URL = URL + BSide
      URL = URL + BThick
      URL = URL + TThick
      URL = URL + pSpac
      URL = URL + Temp + '_View.png'
        console.log(URL)
    // Display the image in the scene.
    var svg = d3.select("#content").append("svg")
    .attr("width", 960)
    .attr("height", 550)
    svg.append("image")
        .attr('xlink:href', URL)
        .attr('class', 'pico')
        .attr('width', '800')
            .attr('height', '581')
            .attr('x', '80')
            .attr('y', '0')
            .attr("class","imgdisplay")
​
   updateData()
   
   d3.select(self.frameElement).style("height", 900 + "px");
  </script>
  
</body>
​
​
    