This example of d3-template is combining the approaches of:
xxxxxxxxxx
<meta charset="utf-8"> <!-- also save this file as unicode-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>
<script>
var dataSet = [];
var highTemperatures = dataSet[0] = [77, 71, 82, 87, 84, 78, 80, 84, 86, 72, 71, 68, 75, 73, 80, 85, 86, 80];
var lowTemperatures = dataSet[1] = highTemperatures.map(function(d) { return d - Math.random() * 30});
var milesRun = dataSet[2] = [2, 5, 4, 3, 1, 2, 1];
var fillColors = ['coral', 'steelblue', 'teal'];
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);
var i = 1;
window.setInterval(function() {
console.log("hier" + i);
// updatableChart.data(dataSet[i]);
myChart.height(150 * (i+1));
myChart.fillColor(fillColors[i]);
i = (i+1) % 3 ;
}, 2500);
function showChart(_file, preprocessed) {
var selection = d3.select("body")
.append("div")
.attr("class", "chart");
if (preprocessed) {
selection.datum(_file);
}
selection.call(myChart);
}
/*
////////////////////////////////////////////////////////////////
// If data needs to be processed before passing it on //
// substitute showChart() with readData() //
////////////////////////////////////////////////////////////////
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