D3 Examples - Parametric THERM Radiant Slab

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;background-color:#e6e6e6}
    .slider2 { font-family:sans-serif;font-weight:bold;text-align:center;outline:none;padding-top:15px;margin: 0 auto;height:70px;}
    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;}
    #solarFlux {background-color:#e6e6e6}
    #topThick {background-color:#f2f2f2}
    #pipeSpacing {background-color:#e6e6e6}
    #waterTemp {background-color:#f2f2f2}
    #bottomSide {background-color:#cccccc}
    #areaServed {background-color:#e6e6e6; height:75px;}
    #tempDelta {background-color:#cccccc; height:75px;}
  </style>
</head>
​
<body>
  <div class="inputSliders">
            <form id="sliders" autocomplete="off">
                <fieldset class="inputgroup">
          <div class="slider" id="topThick">
          <label>Top Thickness</label>
                    <input type="range" name="tthick" id="tthick" value="2" min="2" 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="4"  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="52" min="50" max="60"  step = "1"><p id="tempoutput">52 F</p></div>
          <div class="slider" id="solarFlux">
                    <label>Solar Flux</label>
                    <input type="range" name="sflux" id="sflux" value="0" min="0" max="100" step = "25"><p id="sfluxoutput">0btu/sf</p></div>
          <div class="slider"><img src="https://raw.githubusercontent.com/chriswmackey/explorer-test/master/data6/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;">Radiant<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>
​
  
  <div class="inputSliders">
            <form id="sliders" autocomplete="off">
                <fieldset class="inputgroup">
          <div class="slider" id="areaServed">
          <label>Area Served by Slab</label>
                    <input type="range" name="area" id="area" value="250" min="50" max="500" step = "50"><p id="areaoutput">250 sf</p></div>
          <div class="slider" id="tempDelta">
          <label>Water Temp Delta</label>
                    <input type="range" name="delta" id="delta" value="5" min="1" max="8"  step = "1"><p id="deltaoutput">5 F</p></div>
          <div class="slider2" id="flowrate"><div id="flow"></div><p style="margin-top:3px;">Water Flow Rate</p></div>
                </fieldset>
            </form>
        </div>
​
​
  <script>
    // Load in all of the data.
    var dataObj = JSON.parse(allResults)
    
    // Get inputs from the sliders
    var TThick = $("#tthick").val().toString(); // Top Thickness
    var pSpac = $("#pspac").val().toString(); // Pipe Spacing
    var Temp = $("#temp").val().toString(); // Water Temperature
    var SFlux = $("#sflux").val().toString(); // Solar Flux
    var Area = $("#area").val().toString(); // Slab Area
    var Delta = $("#delta").val().toString(); // Water Temp Delta
​
    // Dictionary to interpret the meaning of the integer inputs.
    pSpacDict = {'0':'4"', '1':'8"', '2':'12"', '3':'16"', '4':'24"'}
​
    // Update inputs
    $("#tthick").on("input", function(event) {
      TThick = $(this).val();
      $("#tthickoutput").text(TThick.toString() + '"');
      updateImg();
      updateData();
      updateFowRate();
    });
    $("#pspac").on("input", function(event) {
      pSpac = $(this).val();
      $("#pspacoutput").text(pSpacDict[pSpac]);
      updateImg();
      updateData();
      updateFowRate();
    });
    $("#temp").on("input", function(event) {
      Temp = $(this).val();
      $("#tempoutput").text(Temp.toString() + 'F');
      updateImg();
      updateData();
      updateFowRate();
    });
    $("#sflux").on("input", function(event) {
      SFlux = $(this).val();
      $("#sfluxoutput").text(SFlux.toString() + 'btu/sf');
      updateImg();
      updateData();
      updateFowRate();
    });
    $("#area").on("input", function(event) {
      Area = $(this).val();
      $("#areaoutput").text(Area.toString() + ' sf');
      updateFowRate();
    });
    $("#delta").on("input", function(event) {
      Delta = $(this).val();
      $("#deltaoutput").text(Delta.toString() + ' F');
      updateFowRate();
    });
    
    // Function to retrive the images from github.
    updateImg = function(){
      URL = 'https://raw.githubusercontent.com/chriswmackey/explorer-test/master/data6/NCGMtherm'
      URL = URL + TThick
      URL = URL + pSpac
      URL = URL + Temp
            URL = URL + SFlux + '_View2.png'
      
      d3.select(".imgdisplay").remove()
​
      svg.append("image")
        .attr('xlink:href', URL)
        .attr('class', 'pico')
        .attr('width', '800')
        .attr('height', '345')
        .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 = [TThick, pSpac, Temp, SFlux]
      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 chFlux =  precisionRound(rawData[1], 1)
      var rhFlux =  precisionRound(rawData[2], 1)
      var coldTemp = precisionRound(rawData[3],1)
      var degGallery = precisionRound(rawData[4],1)
      
      var galColor = '#000'
      if (degGallery < 0){
        galColor = '#be2c33'
      } else if (degGallery < 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() + ' BTU/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(rhFlux.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');
    }
    
    
    // Function to update the flow rate.
    updateFowRate = function(){
      // Retrieve the energy use and peak load data from the json.
      var inputList = [TThick, pSpac, Temp, SFlux]
      var jsonStr = inputList.join(',')
      var rawData = dataObj[jsonStr]
      
        var totalHeat =  Area * (rawData[0] / 3.41214163) // Heat removed by floor in Watts
      var tempDeltaC = Delta * (5/9)
      var massFlow = totalHeat / (4186 * tempDeltaC) // Water mass flow in kg/s
      var volumeFlow = massFlow / 1000 // Water volume flow in m3/s
      var volumeFlowIP = volumeFlow * 35.3147 // Water voume in ft3/s
      var pipeCross = Math.PI * (0.03125*0.03125) // Cross sectional area of pipe in ft2
      var waterSpeed = volumeFlowIP/pipeCross // Speed of water in the pipe in fps
      var waterSpeedDisplay = precisionRound(waterSpeed,2);
      
      // Update the metrics on the bottom.
      d3.selectAll(".flowText").remove();
      
      d3.select("#flow").append("text")
        .attr("class", "flowText")
        .attr("text-anchor", "start")
        .attr("fill", "#000")
            .style('font-size', '30px')
            .style('font-family', 'sans-serif')
        .text(waterSpeedDisplay.toString() + ' fps');
    }
    
    // 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;
        }
    
    
    // Display the image in the scene.
    var svg = d3.select("#content").append("svg")
    .attr("width", 960)
    .attr("height", 400)
   updateImg()
   updateData()
   updateFowRate()
   
   d3.select(self.frameElement).style("height", 900 + "px");
  </script>
  
</body>
​
​
    