Skip to content

Instantly share code, notes, and snippets.

@chriswmackey

chriswmackey/.block

Last active May 3, 2018 23:01
Show Gist options
  • Save chriswmackey/65aea4d1886451bf00a98718f56c92f2 to your computer and use it in GitHub Desktop.
Save chriswmackey/65aea4d1886451bf00a98718f56c92f2 to your computer and use it in GitHub Desktop.
Download ZIP
Parametric Radiant Slab - Heating
Raw
.block
license: mit
Raw
data.json
allResults = '{"0,80" : [10.333729, 4.011418, 6.32231, 77.239922],"1,80" : [8.901274, 3.43318, 5.468094, 76.7984],"2,80" : [7.611956, 2.972238, 4.639718, 76.5329],"3,80" : [5.698163, 2.241685, 3.456478, 76.28657],"0,81" : [11.631723, 4.511205, 7.120518, 77.892908],"1,81" : [10.017854, 3.860879, 6.156975, 77.396414],"2,81" : [8.566132, 3.342528, 5.223604, 77.097974],"3,81" : [6.411784, 2.521057, 3.890728, 76.821152],"0,82" : [12.931466, 5.010726, 7.92074, 78.545552],"1,82" : [11.135683, 4.288341, 6.847342, 77.994158],"2,82" : [9.521015, 3.712616, 5.808399, 77.662796],"3,82" : [7.125807, 2.800297, 4.32551, 77.355554],"0,83" : [14.232435, 5.509802, 8.722633, 79.197656],"1,83" : [12.254309, 4.71541, 7.538899, 78.591398],"2,83" : [10.476257, 4.082368, 6.393888, 78.227204],"3,83" : [7.83994, 3.079304, 4.760636, 77.889614],"0,84" : [15.534865, 6.008614, 9.526251, 79.849454],"1,84" : [13.373904, 5.142241, 8.231663, 79.188386],"2,84" : [11.432338, 4.451919, 6.980418, 78.791378],"3,84" : [8.554593, 3.35818, 5.196413, 78.423512],"0,85" : [16.838764, 6.50698, 10.331784, 80.500676],"1,85" : [14.494321, 5.56868, 8.92564, 79.78487],"2,85" : [12.388799, 4.821136, 7.567663, 79.35512],"3,85" : [9.269362, 3.636824, 5.632539, 78.957032],"0,86" : [18.144226, 7.005081, 11.139145, 81.15161],"1,86" : [15.615674, 5.994882, 9.620792, 80.381066],"2,86" : [13.346081, 5.19015, 8.155931, 79.918628],"3,86" : [9.984609, 3.915336, 6.069273, 79.490408],"0,87" : [19.451092, 7.502827, 11.948264, 81.802094],"1,87" : [16.738122, 6.420769, 10.317353, 80.976902],"2,87" : [14.303947, 5.558897, 8.745051, 80.481812],"3,87" : [10.700104, 4.193667, 6.506437, 80.023496],"0,88" : [20.759203, 8.00013, 12.759074, 82.45202],"1,88" : [17.861258, 6.846265, 11.014994, 81.572234],"2,88" : [15.26219, 5.927308, 9.334882, 81.044564],"3,88" : [11.41575, 4.471765, 6.943985, 80.556242],"0,89" : [22.068818, 8.497166, 13.571652, 83.101622],"1,89" : [18.985485, 7.271522, 11.713963, 82.167296],"2,89" : [16.221278, 6.295519, 9.925759, 81.607082],"3,89" : [12.131868, 4.749733, 7.382135, 81.088808],"0,90" : [23.379885, 8.993757, 14.386128, 83.750684],"1,90" : [20.110184, 7.696389, 12.413795, 82.761872],"2,90" : [17.180688, 6.663397, 10.517292, 82.169168],"3,90" : [12.848158, 5.027469, 7.820689, 81.621032],"0,91" : [24.69241, 9.490083, 15.202327, 84.39944],"1,91" : [21.23632, 8.121018, 13.115302, 83.35616],"2,91" : [18.141077, 7.031072, 11.110005, 82.73102],"3,91" : [13.564876, 5.305074, 8.259801, 82.153076],"0,92" : [26.006434, 9.985966, 16.020468, 85.04762],"1,92" : [22.363116, 8.545256, 13.817859, 83.949962],"2,92" : [19.101707, 7.398414, 11.703292, 83.29244],"3,92" : [14.281729, 5.582448, 8.699282, 82.68476],"0,93" : [27.321689, 10.481582, 16.840108, 85.695494],"1,93" : [23.49098, 8.969257, 14.521723, 84.543494],"2,93" : [20.06316, 7.765556, 12.297605, 83.853644],"3,93" : [14.999266, 5.859691, 9.139575, 83.216282],"0,94" : [28.638417, 10.976754, 17.661664, 86.342828],"1,94" : [24.619539, 9.392868, 15.226672, 85.13654],"2,94" : [21.025004, 8.132364, 12.89264, 84.414398],"3,94" : [15.716225, 6.136703, 9.579522, 83.747444],"0,95" : [29.956629, 11.47166, 18.484969, 86.98982],"1,95" : [25.749173, 9.816241, 15.932933, 85.729298],"2,95" : [21.987641, 8.498972, 13.488669, 84.974936],"3,95" : [16.434467, 6.413585, 10.020883, 84.278444],"0,96" : [31.276412, 11.966211, 19.310201, 87.636398],"1,96" : [26.879675, 10.2393, 16.640375, 86.321678],"2,96" : [22.950582, 8.865312, 14.08527, 85.535132],"3,96" : [17.15256, 6.690284, 10.462276, 84.809174],"0,97" : [32.597476, 12.460318, 20.137158, 88.2824],"1,97" : [28.011086, 10.661969, 17.349117, 86.913572],"2,97" : [23.914411, 9.231321, 14.68309, 86.094914],"3,97" : [17.871036, 6.966755, 10.904282, 85.339544],"0,98" : [33.920143, 12.954159, 20.965984, 88.928096],"1,98" : [29.143307, 11.084401, 18.058906, 87.505196],"2,98" : [24.879047, 9.597129, 15.281918, 86.654444],"3,98" : [18.589413, 7.243094, 11.346319, 85.869752],"0,99" : [35.24405, 13.447556, 21.796494, 89.573252],"1,99" : [30.276761, 11.506444, 18.770317, 88.096316],"2,99" : [25.843341, 9.962604, 15.880737, 87.21356],"3,99" : [19.308907, 7.519202, 11.789705, 86.399582],"0,100" : [36.569583, 13.940688, 22.628896, 90.218066],"1,100" : [31.410317, 11.928249, 19.482068, 88.687166],"2,100" : [26.809634, 10.327879, 16.481755, 87.772442],"3,100" : [20.02816, 7.795181, 12.232979, 86.929268],"0,101" : [37.896171, 14.433375, 23.462796, 90.86234],"1,101" : [32.546179, 12.349666, 20.196514, 89.27753],"2,101" : [27.775518, 10.692824, 17.082694, 88.330892],"3,101" : [20.74768, 8.07093, 12.67675, 87.458594],"0,102" : [39.224676, 14.925796, 24.29888, 91.50629],"1,102" : [33.681981, 12.770845, 20.911137, 89.867606],"2,102" : [28.742244, 11.057566, 17.684678, 88.889108],"3,102" : [21.467893, 8.346548, 13.121345, 87.98774],"0,103" : [40.554249, 15.417774, 25.136475, 92.1497],"1,103" : [34.818674, 13.191635, 21.627039, 90.457214],"2,103" : [29.709638, 11.421979, 18.287659, 89.446892],"3,103" : [22.188064, 8.621937, 13.566128, 88.516526],"0,104" : [41.885488, 15.909485, 25.976003, 92.792768],"1,104" : [35.956447, 13.612189, 22.344259, 91.046534],"2,104" : [30.676918, 11.786192, 18.890726, 90.00446],"3,104" : [22.908909, 8.897195, 14.011714, 89.04515],"0,105" : [43.218226, 16.400842, 26.817384, 93.435422],"1,105" : [37.095359, 14.032429, 23.06293, 91.635458],"2,105" : [31.646166, 12.150139, 19.496027, 90.561686],"3,105" : [23.62906, 9.172273, 14.456787, 89.573522],"0,106" : [44.55176, 16.891754, 27.660006, 94.077518],"1,106" : [38.233927, 14.452281, 23.781646, 92.223914],"2,106" : [32.614314, 12.513755, 20.100559, 91.11848],"3,106" : [24.349841, 9.447123, 14.902718, 90.101516],"0,107" : [45.887809, 17.382402, 28.505408, 94.71929],"1,107" : [39.375146, 14.871897, 24.503249, 92.812082],"2,107" : [33.584567, 12.877172, 20.707395, 91.675058],"3,107" : [25.071979, 9.721842, 15.350137, 90.629348],"0,108" : [47.223463, 17.872605, 29.350858, 95.360504],"1,108" : [40.516337, 15.291125, 25.225211, 93.399782],"2,108" : [34.554726, 13.240258, 21.314468, 92.231186],"3,108" : [25.793412, 9.996333, 15.797079, 91.15682],"0,109" : [48.563304, 18.362541, 30.200763, 96.001394],"1,109" : [41.659436, 15.710116, 25.94932, 93.987176],"2,109" : [35.525931, 13.603146, 21.922785, 92.787098],"3,109" : [26.515533, 10.270693, 16.244839, 91.68413],"0,110" : [49.902474, 18.852036, 31.050437, 96.641744],"1,110" : [42.802472, 16.12872, 26.673752, 94.574102],"2,110" : [36.4971, 13.965702, 22.531398, 93.342578],"3,110" : [27.237582, 10.544825, 16.692757, 92.21108]}'
Raw
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;}
.slider3 { 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;}
.slider3 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="slider3" 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="slider3" id="waterTemp">
<label>Water Temperature</label>
<input type="range" name="temp" id="temp" value="100" min="80" max="110" step = "1"><p id="tempoutput">90 F</p></div>
<div class="slider3"><img src="https://raw.githubusercontent.com/chriswmackey/explorer-test/master/data8/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="rhfdiv"><div id="rhf"></div><p style="margin-top:3px;">Radiant<br> Heat Flux</p></div>
  <div class="slider" id="chfdiv"><div id="chf"></div><p style="margin-top:3px;">Convective<br> Heat Flux</p></div>
  <div class="slider" id="hottestdiv"><div id="hottest"></div><p style="margin-top:3px;">Hotest Surface<br>Temperature</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="25" max="500" step = "25"><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="3" min="1" max="8" step = "1"><p id="deltaoutput">3 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 pSpac = $("#pspac").val().toString(); // Pipe Spacing
var Temp = $("#temp").val().toString(); // Water Temperature
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':'6"', '1':'9"', '2':'12"', '3':'18"'}
// Update inputs
$("#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();
});
$("#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/data8/NCGMtherm'
URL = URL + pSpac
URL = URL + Temp + '_View3.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 = [pSpac, Temp]
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 hotTemp = precisionRound(rawData[3],1)
var galColor = '#000'
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("#rhf").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("#chf").append("text")
.attr("class", "resultText")
.attr("text-anchor", "start")
.attr("fill", "#000")
.style('font-size', '30px')
.style('font-family', 'sans-serif')
.text(chFlux.toString()+ ' BTU/sf');
d3.select("#hottest").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(hotTemp.toString()+ ' F');
}
// Function to update the flow rate.
updateFowRate = function(){
// Retrieve the energy use and peak load data from the json.
var inputList = [pSpac, Temp]
var jsonStr = inputList.join(',')
var rawData = dataObj[jsonStr]
var totalHeat = Area * (rawData[0] / 3.41214163) // Heat added 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment