Bar Chart
Now, if we were to manually create a bar chart in SVG. We would do something like,
<svg>
<rect x="0" y="0" width="120" height="25"/>
<rect x="0" y="30" width="140" height="25"/>
<rect x="0" y="60" width="150" height="25"/>
<rect x="0" y="90" width="180" height="25"/>
</svg>
Let's use d3 to do the same
Create barchart
var data = [120, 140, 150, 180] // define width is array
var chart = d3.select('svg') // select svg
.selectAll('rect')
.data(data).enter()
.append('rect')
.attr('x', 0)
.attr('y', function(d,i) {return i * 30})
.attr('width', function(d) {return d})
.attr('height', 25)
Add text
// After creating basic barchart
d3.select('svg').selectAll("text")
.data(data)
.enter()
.append("text")
.text(function(d) {return d})
.attr("y", function(d,i) {return i*30 + 20})
.attr("x", function(d) {return d})
Shall we make the chart look a bit pretty? By, just changing position, color, size of text!
d3.select('svg').selectAll("text")
.data(data)
.enter()
.append("text")
.text(function(d) {return d})
.attr("y", function(d,i) {return i*30 + 15})
.attr("x", function(d) {return d - 20})
.attr("font-family", "sans-serif")
.attr("font-size", "10px")
.attr("fill", "white")