Response to a question on stackoverflow
code taken from here
Response to a question on stackoverflow
code taken from here
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<meta charset="utf-8"> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<style type="text/css"> | |
/* No style rules here yet */ | |
</style> | |
<body> | |
<script type="text/javascript"> | |
//Width and height | |
var w = 500; | |
var h = 100; | |
var barPadding = 1; | |
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, | |
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; | |
//Create first SVG element | |
var svgOne = d3.select("body") | |
.append("svg") | |
.attr("width", w) | |
.attr("height", h); | |
svgOne.selectAll("rect") | |
.data(dataset) | |
.enter() | |
.append("rect") | |
.attr("x", function(d, i) { | |
return i * (w / dataset.length); | |
}) | |
.attr("y", function(d) { | |
return h - (d * 4); | |
}) | |
.attr("width", w / dataset.length - barPadding) | |
.attr("height", function(d) { | |
return d * 4; | |
}) | |
.attr("fill", function(d) { | |
return "rgb(0, 0, " + (d * 10) + ")"; | |
}); | |
svgOne.selectAll("text") | |
.data(dataset) | |
.enter() | |
.append("text") | |
.text(function(d) { | |
return d; | |
}) | |
.attr("text-anchor", "middle") | |
.attr("x", function(d, i) { | |
return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2; | |
}) | |
.attr("y", function(d) { | |
return h - (d * 4) + 14; | |
}) | |
.attr("font-family", "sans-serif") | |
.attr("font-size", "11px") | |
.attr("fill", "white"); | |
//Create second SVG element | |
var svgTwo = d3.select("body") | |
.append("svg") | |
.attr("width", w) | |
.attr("height", h); | |
svgTwo.selectAll("rect") | |
.data(dataset) | |
.enter() | |
.append("rect") | |
.attr("x", function(d, i) { | |
return i * (w / dataset.length); | |
}) | |
.attr("y", function(d) { | |
return h - (d * 4); | |
}) | |
.attr("width", w / dataset.length - barPadding) | |
.attr("height", function(d) { | |
return d * 4; | |
}) | |
.attr("fill", function(d) { | |
return "rgb(0, 0, " + (d * 10) + ")"; | |
}); | |
svgTwo.selectAll("text") | |
.data(dataset) | |
.enter() | |
.append("text") | |
.text(function(d) { | |
return d; | |
}) | |
.attr("text-anchor", "middle") | |
.attr("x", function(d, i) { | |
return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2; | |
}) | |
.attr("y", function(d) { | |
return h - (d * 4) + 14; | |
}) | |
.attr("font-family", "sans-serif") | |
.attr("font-size", "11px") | |
.attr("fill", "white"); | |
</script> | |
</body> | |