cflavs/data.tsv

## data.tsv

          
            name
            value

            
              RO
              76.7

            
              AC
              78.9

            
              AM
              81.7

            
              RR
              82.2

            
              PA
              68.9

            
              AP
              73.6

            
              TO
              82.1

            
              MA
              76.8

            
              PI
              74.1

            
              CE
              82.2

            
              RN
              76.1

            
              PB
              74.3

            
              PE
              80.2

            
              AL
              71.8

            
              SE
              70.4

            
              BA
              71.9

            
              MG
              77.8

            
              ES
              79.3

            
              RJ
              68.3

            
              SP
              82.9

            
              PR
              81.6

            
              SC
              82.5

            
              RS
              69.1

            
              MS
              71.1

            
              MT
              71.6

            
              GO
              76.1

            
              DF
              74.8

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

.chart rect {
  fill: steelblue;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

</style>
<svg class="chart"></svg>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 420,
    barHeight = 20;

var x = d3.scale.linear()
    .range([0, width]);

var chart = d3.select(".chart")
    .attr("width", width);


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

  chart.attr("height", barHeight * data.length);

  var bar = chart.selectAll("g")
      .data(data)
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

  bar.append("rect")
      .attr("width", function(d) { return x(d.value); })
      .attr("height", barHeight - 1);

  bar.append("text")
      .attr("x", function(d) { return x(d.value) - 3; })
      .attr("y", barHeight / 2)
      .attr("dy", ".35em")
      .text(function(d) { return d.value; });
});

function type(d) {
  d.value = +d.value; // coerce to number
  return d;
}

</script>
	name	value
	RO	76.7
	AC	78.9
	AM	81.7
	RR	82.2
	PA	68.9
	AP	73.6
	TO	82.1
	MA	76.8
	PI	74.1
	CE	82.2
	RN	76.1
	PB	74.3
	PE	80.2
	AL	71.8
	SE	70.4
	BA	71.9
	MG	77.8
	ES	79.3
	RJ	68.3
	SP	82.9
	PR	81.6
	SC	82.5
	RS	69.1
	MS	71.1
	MT	71.6
	GO	76.1
	DF	74.8
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.chart rect {
	fill: steelblue;
	}

	.chart text {
	fill: white;
	font: 10px sans-serif;
	text-anchor: end;
	}

	</style>
	<svg class="chart"></svg>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	var width = 420,
	barHeight = 20;

	var x = d3.scale.linear()
	.range([0, width]);

	var chart = d3.select(".chart")
	.attr("width", width);


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

	chart.attr("height", barHeight * data.length);

	var bar = chart.selectAll("g")
	.data(data)
	.enter().append("g")
	.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

	bar.append("rect")
	.attr("width", function(d) { return x(d.value); })
	.attr("height", barHeight - 1);

	bar.append("text")
	.attr("x", function(d) { return x(d.value) - 3; })
	.attr("y", barHeight / 2)
	.attr("dy", ".35em")
	.text(function(d) { return d.value; });
	});

	function type(d) {
	d.value = +d.value; // coerce to number
	return d;
	}

	</script>