Built with blockbuilder.org
forked from romsson's block: simple bar chat
forked from romsson's block: simple bar chat from dataset
forked from romsson's block: simple bar chat updates
forked from romsson's block: simple bar chat dataset
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
rect {
fill: none;
stroke: black;
stroke-width: 1px;
}
</style>
</head>
<body>
<script>
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
// var data = [22, 32, 21, 23, 10, 22, 11, 19, 30, 50];
// No domain (yet!)
var x = d3.scaleLinear().range([0, 500]);
var y = d3.scaleLinear().range([0, 100])
var g = svg.append("g").attr("transform", "translate(100, 0)");
d3.text('dataset.csv', function(error, raw) {
console.log(raw);
// https://github.com/d3/d3-dsv
var dsv = d3.dsvFormat(';')
var data = dsv.parse(raw);
// Domain after data have been loaded!
x.domain([0, data.length-1]);
// Accessor for value
y.domain([0, d3.max(data, function(d) { return d.value; })]);
g.selectAll("text").data(data).enter().append("text")
.text(function(d) { return d.name; })
.attr("y", 200)
.attr("x", function(d, i) { return x(i) + 20; })
.style("font-size", 12)
.style("font-family", "monospace");
g.selectAll("rect").data(data).enter().append("rect")
.attr("y",function(d){return 190-y(d.value);})
.attr("x",function(d,i){return x(i)+5;})
.attr("width",50)
.attr("height",function(d) {return y(d.value);});
setInterval(function(d) {
data.forEach(function(d) {
d.value = Math.random();
});
y.domain([0, d3.max(data, function(d) { return d.value; })]);
g.selectAll("rect").data(data)
.transition().duration(500).delay(function(d,i)
{return i*(500/data.length);})
.attr("y", function(d) { return 170 - y(d.value); })
.attr("height", function(d) { return y(d.value); })
}, 500)
});
</script>
</body>
https://d3js.org/d3.v4.min.js