cflavs/data.tsv

## data.tsv

          
            date
            AC
            AL
            AP
            AM
            BA
            CE
            DF
            ES
            GO
            MA
            MT
            MS
            MG
            PA
            PB
            PR
            PE
            PI
            RJ
            RN
            RS
            RO
            RR
            SC
            SP
            SE
            TO

            
              2010
              0
              61.98
              3.88
              26.29
              33.06
              31.32
              25.34
              48.76
              16.29
              15.3
              28.7
              18.42
              14.69
              22.12
              38.18
              26.66
              36.87
              7.7
              26.17
              25.5
              15.48
              35.07
              19.76
              11.51
              3.69
              30.42
              18.41

            
              2011
              20.23
              74.51
              17.1
              29.19
              33.37
              30.69
              28.29
              47.79
              16.41
              18.49
              30.69
              17.48
              18.4
              14.71
              43.07
              18.6
              36.67
              10.86
              23.55
              0
              16
              25.31
              11.73
              5.62
              10.08
              32.11
              18.27

            
              2012
              22.8
              63.91
              29.2
              28.13
              2.53
              40.58
              31.37
              46.39
              13.61
              21.71
              40.58
              14.65
              19.76
              38.89
              38.89
              13.76
              34.3
              15.15
              22.52
              11.43
              18.45
              28.05
              13.02
              9.31
              11.54
              38.04
              20.88

            
              2013
              22.5
              58.86
              23.4
              23.4
              34.45
              47.16
              27.28
              40.74
              29.06
              23.21
              47.16
              17.39
              19.89
              39.61
              34.33
              11.18
              30.94
              15.30
              25.56
              25.02
              16.51
              26.91
              20.28
              10.06
              10.18
              40.08
              19.42

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body{
	font:8px sans-serif;
}
.axis path,
.axis line{
	fill:none;
	stroke:#000;
	shape-rendering:crispEdges;
}
.x.axis path{
	display:none;
}
.line{
	fill:none;
	stroke:steelblue;
	stroke-width:1 px;
}
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
</style>

<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>
var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y").parse;


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

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.category10();

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

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(2);

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong> Estado: </strong> <span style='color:red'>" + d.name + "</span>";
  })

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.temperature); });

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


svg.call(tip);

d3.tsv("data.tsv", function(error, data) {
  if (error) throw error;

  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

  data.forEach(function(d) {
    d.date = parseDate(d.date);
  });

  var cities = color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {date: d.date, temperature: +d[name]};
      })
    };
  });

  x.domain(d3.extent(data, function(d) { return d.date; }));

  y.domain([
    d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
    d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
  ]);

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

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Homicios Dolosos");

  var city = svg.selectAll(".city")
      .data(cities)
    .enter().append("g")
      .attr("class", "city");

  city.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)
      .style("stroke", function(d) { return color(d.name); });
});
</script>
</body>
date	AC	AL	AP	AM	BA	CE	DF	ES	GO	MA	MT	MS	MG	PA	PB	PR	PE	PI	RJ	RN	RS	RO	RR	SC	SP	SE	TO
2010	0	61.98	3.88	26.29	33.06	31.32	25.34	48.76	16.29	15.3	28.7	18.42	14.69	22.12	38.18	26.66	36.87	7.7	26.17	25.5	15.48	35.07	19.76	11.51	3.69	30.42	18.41
2011	20.23	74.51	17.1	29.19	33.37	30.69	28.29	47.79	16.41	18.49	30.69	17.48	18.4	14.71	43.07	18.6	36.67	10.86	23.55	0	16	25.31	11.73	5.62	10.08	32.11	18.27
2012	22.8	63.91	29.2	28.13	2.53	40.58	31.37	46.39	13.61	21.71	40.58	14.65	19.76	38.89	38.89	13.76	34.3	15.15	22.52	11.43	18.45	28.05	13.02	9.31	11.54	38.04	20.88
2013	22.5	58.86	23.4	23.4	34.45	47.16	27.28	40.74	29.06	23.21	47.16	17.39	19.89	39.61	34.33	11.18	30.94	15.30	25.56	25.02	16.51	26.91	20.28	10.06	10.18	40.08	19.42
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body{
	font:8px sans-serif;
	}
	.axis path,
	.axis line{
	fill:none;
	stroke:#000;
	shape-rendering:crispEdges;
	}
	.x.axis path{
	display:none;
	}
	.line{
	fill:none;
	stroke:steelblue;
	stroke-width:1 px;
	}
	.d3-tip {
	line-height: 1;
	font-weight: bold;
	padding: 12px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 2px;
	}
	/* Creates a small triangle extender for the tooltip */
	.d3-tip:after {
	box-sizing: border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1;
	color: rgba(0, 0, 0, 0.8);
	content: "\25BC";
	position: absolute;
	text-align: center;
	}
	/* Style northward tooltips differently */
	.d3-tip.n:after {
	margin: -1px 0 0 0;
	top: 100%;
	left: 0;
	}
	</style>

	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
	<script>
	var margin = {top: 20, right: 80, bottom: 30, left: 50},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;
	var parseDate = d3.time.format("%Y").parse;


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

	var y = d3.scale.linear()
	.range([height, 0]);

	var color = d3.scale.category10();

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

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.ticks(2);

	var tip = d3.tip()
	.attr('class', 'd3-tip')
	.offset([-10, 0])
	.html(function(d) {
	return "<strong> Estado: </strong> <span style='color:red'>" + d.name + "</span>";
	})

	var line = d3.svg.line()
	.interpolate("basis")
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.temperature); });

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


	svg.call(tip);

	d3.tsv("data.tsv", function(error, data) {
	if (error) throw error;

	color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

	data.forEach(function(d) {
	d.date = parseDate(d.date);
	});

	var cities = color.domain().map(function(name) {
	return {
	name: name,
	values: data.map(function(d) {
	return {date: d.date, temperature: +d[name]};
	})
	};
	});

	x.domain(d3.extent(data, function(d) { return d.date; }));

	y.domain([
	d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
	d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
	]);

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

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Homicios Dolosos");

	var city = svg.selectAll(".city")
	.data(cities)
	.enter().append("g")
	.attr("class", "city");

	city.append("path")
	.attr("class", "line")
	.attr("d", function(d) { return line(d.values); })
	.on('mouseover', tip.show)
	.on('mouseout', tip.hide)
	.style("stroke", function(d) { return color(d.name); });
	});
	</script>
	</body>