d3-template: barCharts

This example of d3-template is combining the approaches of:

<!DOCTYPE html>
  <meta charset="utf-8"> 
  <head>
    <script src="https://d3js.org/d3.v3.js"></script>
    <link rel="stylesheet" type="text/css" href="d3_template_barCharts.css">
    <script src="d3_template_barCharts.js"></script>
   </head>
  
  <body>
    <div id="updatableChart"></div>

var myChart = reUsableChart("ht.csv").width(800) // no parameter when data is embedded in <pre> tag, otherwise reUsableChart(file);
        showChart(); // for preprocessing data see below

window.setTimeout(function() {
          myChart.height(450);
      }, 5000);

readData(); // no parameter when data is embedded in <pre> tag, otherwise readData(file);
      
      function readData(csvFile) {
        if (typeof csvFile !== 'undefined') {
          d3.csv(csvFile, processData, function(error, file) {
            showChart(file, true);
          });
        } 
        else {
          file = d3.csv.parse(d3.select("pre#data").text()); 
          file.forEach( function (row) {
            processData(row);
          });        
          showChart(file, true);
        }
      } 
      
      ////////////////////////////////////////////////////////////////
      //  This function converts each data element to a number.      //
      //  Update this function to process data accordingly          //
      ////////////////////////////////////////////////////////////////
       
      function processData(d) {
        for (var perm in d) {
          if (Object.prototype.hasOwnProperty.call(d, perm)) {
            d[perm] = +d[perm];
          }
        }    
        return d;
      }  
      */
    </script>
  </body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js