cflavs/data.tsv

## data.tsv

          
            year
            money
            number

            
              RO
              86.6
              36.4

            
              AC
              79.63
              52.07

            
              AM
              65.7
              31.73

            
              PR
              86.7
              36.4

            
              PA
              70.6
              35.8

            
              AP
              64.4
              21.83

            
              TO
              59.7
              32.6

            
              MA
              54.5
              26.87

            
              PI
              46
              21.60

            
              CE
              59.87
              32.6

            
              RN
              76
              45.4

            
              PB
              65.87
              36.9

            
              PE
              75.4
              50.63

            
              AL
              72.73
              46.6

            
              SE
              74.1
              32.67

            
              BA
              65.73
              42.1

            
              MG
              83.7
              62.13

            
              ES
              79.7
              68.2

            
              RJ
              70.27
              33.1

            
              SC
              92.9
              52.27

            
              RS
              84.2
              64.50

            
              MS
              82.73
              51.1

            
              MT
              70.73
              52.53

            
              GO
              79.83
              64.67

            
              DF
              92.17
              66.97

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.y.axisRight text {
    fill: orange;
}

.y.axisLeft text {
    fill: steelblue;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar1 {
  fill: steelblue;
}

.bar2 {
  fill: orange;
}

.x.axis path {
  display: none;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 80, right: 80, bottom: 80, left: 80},
    width = 600 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var y0 = d3.scale.linear().domain([300, 1100]).range([height, 0]),
y1 = d3.scale.linear().domain([20, 80]).range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

// create left yAxis
var yAxisLeft = d3.svg.axis().scale(y0).ticks(4).orient("left");
// create right yAxis
var yAxisRight = d3.svg.axis().scale(y1).ticks(6).orient("right");

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("class", "graph")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.tsv", type, function(error, data) {
  x.domain(data.map(function(d) { return d.year; }));
  y0.domain([0, d3.max(data, function(d) { return d.money; })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
	  .attr("class", "y axis axisLeft")
	  .attr("transform", "translate(0,0)")
	  .call(yAxisLeft)
	.append("text")
	  .attr("y", 6)
	  .attr("dy", "-2em")
	  .style("text-anchor", "end")
	  .style("text-anchor", "end")
	  .text("Banco da Frente");

  svg.append("g")
	  .attr("class", "y axis axisRight")
	  .attr("transform", "translate(" + (width) + ",0)")
	  .call(yAxisRight)
	.append("text")
	  .attr("y", 6)
	  .attr("dy", "-2em")
	  .attr("dx", "2em")
	  .style("text-anchor", "end")
	  .text("Banco de Tras");

  bars = svg.selectAll(".bar").data(data).enter();

  bars.append("rect")
      .attr("class", "bar1")
      .attr("x", function(d) { return x(d.year); })
      .attr("width", x.rangeBand()/2)
      .attr("y", function(d) { return y0(d.money); })
	  .attr("height", function(d,i,j) { return height - y0(d.money); });

  bars.append("rect")
      .attr("class", "bar2")
      .attr("x", function(d) { return x(d.year) + x.rangeBand()/2; })
      .attr("width", x.rangeBand() / 2)
      .attr("y", function(d) { return y1(d.number); })
	  .attr("height", function(d,i,j) { return height - y1(d.number); });

});

function type(d) {
  d.money = +d.money;
  return d;
}

</script>
year	money	number
RO	86.6	36.4
AC	79.63	52.07
AM	65.7	31.73
PR	86.7	36.4
PA	70.6	35.8
AP	64.4	21.83
TO	59.7	32.6
MA	54.5	26.87
PI	46	21.60
CE	59.87	32.6
RN	76	45.4
PB	65.87	36.9
PE	75.4	50.63
AL	72.73	46.6
SE	74.1	32.67
BA	65.73	42.1
MG	83.7	62.13
ES	79.7	68.2
RJ	70.27	33.1
SC	92.9	52.27
RS	84.2	64.50
MS	82.73	51.1
MT	70.73	52.53
GO	79.83	64.67
DF	92.17	66.97
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

	.y.axisRight text {
	fill: orange;
	}

	.y.axisLeft text {
	fill: steelblue;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.bar1 {
	fill: steelblue;
	}

	.bar2 {
	fill: orange;
	}

	.x.axis path {
	display: none;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var margin = {top: 80, right: 80, bottom: 80, left: 80},
	width = 600 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom;

	var x = d3.scale.ordinal()
	.rangeRoundBands([0, width], .1);

	var y0 = d3.scale.linear().domain([300, 1100]).range([height, 0]),
	y1 = d3.scale.linear().domain([20, 80]).range([height, 0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	// create left yAxis
	var yAxisLeft = d3.svg.axis().scale(y0).ticks(4).orient("left");
	// create right yAxis
	var yAxisRight = d3.svg.axis().scale(y1).ticks(6).orient("right");

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("class", "graph")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.tsv("data.tsv", type, function(error, data) {
	x.domain(data.map(function(d) { return d.year; }));
	y0.domain([0, d3.max(data, function(d) { return d.money; })]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis axisLeft")
	.attr("transform", "translate(0,0)")
	.call(yAxisLeft)
	.append("text")
	.attr("y", 6)
	.attr("dy", "-2em")
	.style("text-anchor", "end")
	.style("text-anchor", "end")
	.text("Banco da Frente");

	svg.append("g")
	.attr("class", "y axis axisRight")
	.attr("transform", "translate(" + (width) + ",0)")
	.call(yAxisRight)
	.append("text")
	.attr("y", 6)
	.attr("dy", "-2em")
	.attr("dx", "2em")
	.style("text-anchor", "end")
	.text("Banco de Tras");

	bars = svg.selectAll(".bar").data(data).enter();

	bars.append("rect")
	.attr("class", "bar1")
	.attr("x", function(d) { return x(d.year); })
	.attr("width", x.rangeBand()/2)
	.attr("y", function(d) { return y0(d.money); })
	.attr("height", function(d,i,j) { return height - y0(d.money); });

	bars.append("rect")
	.attr("class", "bar2")
	.attr("x", function(d) { return x(d.year) + x.rangeBand()/2; })
	.attr("width", x.rangeBand() / 2)
	.attr("y", function(d) { return y1(d.number); })
	.attr("height", function(d,i,j) { return height - y1(d.number); });

	});

	function type(d) {
	d.money = +d.money;
	return d;
	}

	</script>