27/09/2015
[D3.js]Bar chart
var dataset = [];
for (var i=0; i < 15; i++) {
var newnumber = Math.floor(Math.random() * 30) + 5;
dataset.push(newnumber);
}
var w = 500;
var h = 500;
var barPadding = 1;
var svg = d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
var rect = svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr({ //multivalue map
x: function(d,i){return i* ( w / dataset.length);},
y: function(d){return (h - d* 10);},
width: (w / dataset.length - barPadding),
height: function(d){return (d * 10);},
fill: function(d){return "rgb(0,0," + ( d * 10) + ")"},
});
var text = svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function (d){
return d;
})
.attr({ //multivalue map
x: function(d,i){return i* ( w / dataset.length) + 15;},
y: function(d){return (h - d* 10) + 20;},
width: (w / dataset.length - barPadding),
height: function(d){return (d * 10);},
fill: "white",
"font-size": "15px",
"text-anchor": "middle",
});