| license: mit |
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
forked from ibtimoussi's block: simple bar chat dataset
| name;value | |
| A;22 | |
| B;32 | |
| C;21 | |
| D;23 | |
| E;10 | |
| F;22 | |
| G;11 | |
| H;19 | |
| I;30 | |
| J;50 | |
| K;10 |
| <!DOCTYPE html> | |
| <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]); | |
| // 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",40 ) | |
| .attr("height", function(d){return y(d.value);}) | |
| /* setInterval(function() { | |
| data.forEach(function(d){ | |
| } ) | |
| }) */ | |
| 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(100).delay(function(d)){ | |
| return i * 50; | |
| } | |
| .attr("y", function(d) { return 170 - y(d.value); }) | |
| .attr("height", function(d) { return y(d.value); }) }, 500) | |
| }); | |
| </script> | |
| </body> |