D3/SVG Bar Chart 1

by Sergio Spagnuolo

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<script src="http://knockoutjs.com/js/knockout-2.0.0.js"></script>
<div id="texto">
    <h1> Votos favoráveis do Brasil 2006 - 2014 </h1>

    </div>
    </div>

CSS

.chart rect {
    stroke: white;
    fill: steelblue;
}
.chart text{
    fill: white;
}

JavaScript

var data = [3, 8, 11, 7, 5,	9, 5, 11, 10, 4];

var x = d3.scale.linear()
     .domain([0, d3.max(data)])
     .range([0, 420]);

var y = d3.scale.ordinal()
     .domain(data)
     .rangeBands([0, 120]);

var chart = d3.select("body").append("svg")
    .attr("class", "chart")
    .attr("width", 420)
    .attr("height", 20 * data.length);

chart.selectAll("rect")
     .data(data)
   .enter().append("rect")
     .attr("y", y)
     .attr("width", x)
     .attr("height", y.rangeBand());

chart.selectAll("text")
     .data(data)
   .enter().append("text")
     .attr("x", x)
     .attr("y", function(d) { return y(d) + y.rangeBand() / 2; })
     .attr("dx", -3) // padding-right
     .attr("dy", "0.35em") // vertical-align: middle
     .attr("text-anchor", "end") // text-align: right
     .text(String);