D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .centerize {
      text-align:center;
    }
  </style>
</head>
​
<body>
  <div>
    <h2>Glass</h2>
  </div>
  <table>
    <tr><td>
      <input type="text" id=glassDim placeholder="width,height"/>
      <input type="text" id=glassMm placeholder="mm"/>
      <button id="clear">clear</button
    </td></tr>
    <tr><td>
      Dimension : <span id="dimNonRound"></span> <br/>
      Dimension (round) : <span id="dimRound"></span> <br/>
      Price : <span id="price"></span> <br/>
    </td></tr>
  </table>
  <script>
    console.clear();
    
    function sel(id){
      return document.getElementById(id);
    }
    
    allInputIds = []
        var inputs = document.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            allInputIds.push(inputs[i].id);
        }
​
        for (var i = 0; i < allInputIds.length; i++) {
            if(allInputIds[i] != ""){
                thisEl = sel(allInputIds[i])
                thisEl.oninput = function(){
                    runCalculation();
                }
            }
        }
    
    function clear(){
      console.log("aaa");
      for (var i = 0; i < allInputIds.length; i++) {
            if(allInputIds[i] != ""){
                thisEl = sel(allInputIds[i])
                thisEl.value = "";
        runCalculation();
                }
            }
    }
    
    sel("clear").onclick = function(){return clear();};
    
    function runCalculation(){
      var glassDim = sel("glassDim").value;
      glassDim = glassDim.split(",");
      var glassMm = (sel("glassMm").value);
      var glassPrice;
      
      if(glassMm == '2')
        glassPrice = 2500;
      else if(glassMm == '2r')
        glassPrice = 3000;
      else if(glassMm == '3')
        glassPrice = 3500;
      else if(glassMm == '3r')
        glassPrice = 4000;
      else if(glassMm == '5')
        glassPrice = 5000;
      else if(glassMm == '5r')
        glassPrice = 5500;
      else
        glassPrice = 5000;
      
      var dim1 = parseFloat(glassDim[0]);
      var dim2 = parseFloat(glassDim[1]);
      
      var dimRound1 = (dim1 > 120 ? 4 : (runThis(dim1/15))/2) || 0
      var dimRound2 = (dim2 > 120 ? 4 : (runThis(dim2/15))/2) || 0
      
      var dimNonRound1 = (dim1 > 120 ? 4 : ((dim1/15)/2).toFixed(2)) || 0
      var dimNonRound2 = (dim2 > 120 ? 4 : ((dim2/15)/2).toFixed(2)) || 0
      
      function runThis(dim){
        var output;
        var rounded = Math.floor(dim);
        var temp = dim%1;
        if(temp != 0){
          if(0 < temp <= 0.5)
            output = rounded + 0.5;
            else if(0.5 < temp <= 1 );
                output = rounded + 1;
        } else { output = dim; }
        return output;
      }
      
      sel("dimNonRound").innerHTML = dimNonRound1 + "," + dimNonRound2;
      sel("dimRound").innerHTML = dimRound1 + "," + dimRound2;
      sel("price").innerHTML = "<b><u>" + d3.format(',')((dimRound1 * dimRound2) * glassPrice) + "</b></u>"
    }
  </script>
</body>
​
    