kpq · December 24, 2015 10:59
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 body {
  font: 10px sans-serif;
 }

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

 .x.axis path {
  display: none;
 }

 .g-indicator-line {
   fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
 }

 </style>

 <body>
 <div class="chart">
 </div>

 <script src="http://d3js.org/d3.v3.js"></script>
 <script>
 var margin = {top: 20, right: 120, bottom: 30, left: 20},
    width = 600 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom,
    labelBuffer = 10;

 var color = d3.scale.category10();

 var parseDate = d3.time.format("%Y%m").parse;

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

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

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

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

 var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.val); });

 var svg = d3.select(".chart").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 + ")");

 d3.csv("data.csv", function(error, data) {

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

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

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

 svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

 valuesBySector = d3.nest()
    .key(function(d) { return d.indicators})
    .entries(data);

 color.domain(d3.keys(valuesBySector) );

 var sectorContainer = svg.append("g")
    .attr("class", "g-sector-container");

 var sectors = sectorContainer.selectAll("g-sector")
    .data(valuesBySector)
  .enter()
    .append("g")
    .attr("class", "g-sector");

 var sectorLine = sectors.append("path")
    .attr("class", "g-indicator-line")
    .attr("d", function(d) { console.log(d); return line(d.values); })
    .style("stroke", function(d) {return color(d.key); });

 sectors.append("text")
    .text(function(d) { return d.key; })
    .attr("x", function(d) { return x(d.values[d.values.length - 1].date) + labelBuffer })
    .attr("y", function(d) { return y(d.values[d.values.length - 1].val) })

 sectors.append("circle")
    .attr("cx", function(d) { return x(d.values[d.values.length - 1].date); })
    .attr("cy", function(d) { return y(d.values[d.values.length - 1].val); })
    .attr("r", 3)
    .style("fill", function(d) { return color(d.key); });

 });

 </script>
date	val	indicators
200309	4.5	Furniture_stores
200312	5.2	Furniture_stores
200403	9	Furniture_stores
200406	5.9	Furniture_stores
200409	6.7	Furniture_stores
200412	6	Furniture_stores
200503	5.2	Furniture_stores
200506	6	Furniture_stores
200509	5.2	Furniture_stores
200512	5.5	Furniture_stores
200603	6.8	Furniture_stores
200606	4.5	Furniture_stores
200609	3.1	Furniture_stores
200612	0.5	Furniture_storess
200703	-0.1	Furniture_stores
200706	-0.8	Furniture_stores
200709	-2.1	Furniture_stores
200712	-2.9	Furniture_stores
200803	-7.6	Furniture_stores
200806	-7.6	Furniture_stores
200809	-11.7	Furniture_stores
200812	-15.1	Furniture_stores
200903	-16.1	Furniture_stores
200906	-16.4	Furniture_stores
200909	-12.6	Furniture_stores
200912	-7.3	Furniture_stores
201003	-0.7	Furniture_stores
201006	1.1	Furniture_stores
201009	2.1	Furniture_stores
201012	1.6	Furniture_stores
201103	0.4	Furniture_stores
201106	1.9	Furniture_stores
201109	3.3	Furniture_stores
201112	6.5	Furniture_stores
201203	9.3	Furniture_stores
201206	8.8	Furniture_stores
201209	8.2	Furniture_stores
201212	6	Furniture_stores
201303	3.1	Furniture_stores
201306	3.4	Furniture_stores
201309	3.6	Furniture_stores
200309	6.8	Clothing_stores
200312	4.7	Clothing_stores
200403	9.2	Clothing_stores
200406	6.5	Clothing_stores
200409	3.6	Clothing_stores
200412	5.2	Clothing_stores
200503	3.9	Clothing_stores
200506	6.8	Clothing_stores
200509	5.2	Clothing_stores
200512	6.7	Clothing_stores
200603	6.1	Clothing_stores
200606	5.2	Clothing_stores
200609	8.2	Clothing_stores
200612	5.8	Clothing_stores
200703	6	Clothing_stores
200706	4.5	Clothing_stores
200709	3.4	Clothing_stores
200712	2	Clothing_stores
200803	-0.2	Clothing_stores
200806	1.3	Clothing_stores
200809	-1.1	Clothing_stores
200812	-7.7	Clothing_stores
200903	-7.2	Clothing_stores
200906	-9	Clothing_stores
200909	-6	Clothing_stores
200912	0.4	Clothing_stores
201003	2.7	Clothing_stores
201006	4.3	Clothing_stores
201009	2.9	Clothing_stores
201012	6.1	Clothing_stores
201103	5.7	Clothing_stores
201106	7.7	Clothing_stores
201109	8.5	Clothing_stores
201112	6.4	Clothing_stores
201203	7.8	Clothing_stores
201206	4.5	Clothing_stores
201209	5.3	Clothing_stores
201212	4.8	Clothing_stores
201303	2.9	Clothing_stores
201306	4.9	Clothing_stores
201309	4.5	Clothing_stores
200309	-0.1	Department_stores
200312	-1.7	Department_stores
200403	1.1	Department_stores
200406	-0.1	Department_stores
200409	-1.4	Department_stores
200412	1.1	Department_stores
200503	0.3	Department_stores
200506	1.6	Department_stores
200509	-0.9	Department_stores
200512	-0.3	Department_stores
200603	-0.2	Department_stores
200606	-1.2	Department_stores
200609	-0.4	Department_stores
200612	-1.6	Department_stores
200703	-0.9	Department_stores
200706	-2.1	Department_stores
200709	-1.1	Department_stores
200712	-2.3	Department_stores
200803	-5.5	Department_stores
200806	-2.9	Department_stores
200809	-5.1	Department_stores
200812	-6.5	Department_stores
200903	-6.3	Department_stores
200906	-7.4	Department_stores
200909	-5.8	Department_stores
200912	-3.1	Department_stores
201003	-0.1	Department_stores
201006	-0.8	Department_stores
201009	-1.5	Department_stores
201012	-0.6	Department_stores
201103	-1.8	Department_stores
201106	0.5	Department_stores
201109	0.2	Department_stores
201112	-0.9	Department_stores
201203	0.6	Department_stores
201206	-2	Department_stores
201209	-0.5	Department_stores
201212	-2.2	Department_stores
201303	-3.9	Department_stores
201306	-4.7	Department_stores
201309	-6	Department_stores
200309	6.9	Restaurants_and_bars
200312	7.7	Restaurants_and_bars
200403	8.2	Restaurants_and_bars
200406	6.2	Restaurants_and_bars
200409	5.5	Restaurants_and_bars
200412	5.9	Restaurants_and_bars
200503	5.5	Restaurants_and_bars
200506	7.2	Restaurants_and_bars
200509	6.3	Restaurants_and_bars
200512	6.5	Restaurants_and_bars
200603	8	Restaurants_and_bars
200606	5.7	Restaurants_and_bars
200609	6.2	Restaurants_and_bars
200612	7	Restaurants_and_bars
200703	4.4	Restaurants_and_bars
200706	5.7	Restaurants_and_bars
200709	5.6	Restaurants_and_bars
200712	4.6	Restaurants_and_bars
200803	3	Restaurants_and_bars
200806	3.3	Restaurants_and_bars
200809	2.6	Restaurants_and_bars
200812	0.3	Restaurants_and_bars
200903	1	Restaurants_and_bars
200906	-0.9	Restaurants_and_bars
200909	-1.8	Restaurants_and_bars
200912	-1	Restaurants_and_bars
201003	0.6	Restaurants_and_bars
201006	2.7	Restaurants_and_bars
201009	4.2	Restaurants_and_bars
201012	5.1	Restaurants_and_bars
201103	5.2	Restaurants_and_bars
201106	5.6	Restaurants_and_bars
201109	6	Restaurants_and_bars
201112	7	Restaurants_and_bars
201203	8.3	Restaurants_and_bars
201206	7.3	Restaurants_and_bars
201209	6.5	Restaurants_and_bars
201212	6.4	Restaurants_and_bars
201303	4.6	Restaurants_and_bars
201306	4.2	Restaurants_and_bars
201309	3.2	Restaurants_and_bars
200309	8	Pharmacies
200312	7.7	Pharmacies
200403	3.4	Pharmacies
200406	2.9	Pharmacies
200409	0.6	Pharmacies
200412	0.6	Pharmacies
200503	5.4	Pharmacies
200506	6.2	Pharmacies
200509	7	Pharmacies
200512	6.3	Pharmacies
200603	5.2	Pharmacies
200606	5.8	Pharmacies
200609	6.7	Pharmacies
200612	8.8	Pharmacies
200703	8.2	Pharmacies
200706	6.5	Pharmacies
200709	5.5	Pharmacies
200712	2.7	Pharmacies
200803	3.8	Pharmacies
200806	3.7	Pharmacies
200809	4.1	Pharmacies
200812	4.3	Pharmacies
200903	3.3	Pharmacies
200906	4	Pharmacies
200909	3	Pharmacies
200912	3.3	Pharmacies
201003	1.8	Pharmacies
201006	1.6	Pharmacies
201009	2.5	Pharmacies
201012	3.2	Pharmacies
201103	5.3	Pharmacies
201106	3.9	Pharmacies
201109	3.9	Pharmacies
201112	2.9	Pharmacies
201203	1.7	Pharmacies
201206	1.1	Pharmacies
201209	0	Pharmacies
201212	-0.6	Pharmacies
201303	-0.1	Pharmacies
201306	0.3	Pharmacies
201309	2.4	Pharmacies
200309	14.4	Warehouse_clubs
200312	12.8	Warehouse_clubs
200403	12.3	Warehouse_clubs
200406	13	Warehouse_clubs
200409	9.9	Warehouse_clubs
200412	11.4	Warehouse_clubs
200503	10.8	Warehouse_clubs
200506	12.2	Warehouse_clubs
200509	13.8	Warehouse_clubs
200512	12.8	Warehouse_clubs
200603	11.8	Warehouse_clubs
200606	10.1	Warehouse_clubs
200609	8.3	Warehouse_clubs
200612	8.4	Warehouse_clubs
200703	9.2	Warehouse_clubs
200706	8.7	Warehouse_clubs
200709	9.5	Warehouse_clubs
200712	8.8	Warehouse_clubs
200803	8	Warehouse_clubs
200806	10.3	Warehouse_clubs
200809	8.9	Warehouse_clubs
200812	5.7	Warehouse_clubs
200903	4.4	Warehouse_clubs
200906	0	Warehouse_clubs
200909	-0.4	Warehouse_clubs
200912	1.9	Warehouse_clubs
201003	3.4	Warehouse_clubs
201006	3.8	Warehouse_clubs
201009	4.2	Warehouse_clubs
201012	4.4	Warehouse_clubs
201103	3.4	Warehouse_clubs
201106	5.4	Warehouse_clubs
201109	6.4	Warehouse_clubs
201112	5.3	Warehouse_clubs
201203	6.8	Warehouse_clubs
201206	5.4	Warehouse_clubs
201209	4.6	Warehouse_clubs
201212	4.5	Warehouse_clubs
201303	2.5	Warehouse_clubs
201306	2.6	Warehouse_clubs
201309	2.2	Warehouse_clubs
200309	3.4	Liquor_stores
200312	5.8	Liquor_stores
200403	6.4	Liquor_stores
200406	7.1	Liquor_stores
200409	4.3	Liquor_stores
200412	3.4	Liquor_stores
200503	3.6	Liquor_stores
200506	3.1	Liquor_stores
200509	4.2	Liquor_stores
200512	6.2	Liquor_stores
200603	9.1	Liquor_stores
200606	8.4	Liquor_stores
200609	7.3	Liquor_stores
200612	6.1	Liquor_stores
200703	4.9	Liquor_stores
200706	6.8	Liquor_stores
200709	6.6	Liquor_stores
200712	4.5	Liquor_stores
200803	2.7	Liquor_stores
200806	2.5	Liquor_stores
200809	4.2	Liquor_stores
200812	4.4	Liquor_stores
200903	4	Liquor_stores
200906	1.9	Liquor_stores
200909	0.7	Liquor_stores
200912	1.8	Liquor_stores
201003	2.8	Liquor_stores
201006	3.2	Liquor_stores
201009	2.5	Liquor_stores
201012	2.7	Liquor_stores
201103	2	Liquor_stores
201106	1.9	Liquor_stores
201109	3.7	Liquor_stores
201112	2.8	Liquor_stores
201203	3.5	Liquor_stores
201206	4.2	Liquor_stores
201209	1.2	Liquor_stores
201212	4.6	Liquor_stores
201303	4.7	Liquor_stores
201306	6.3	Liquor_stores
201309	10.7	Liquor_stores
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

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

	.x.axis path {
	display: none;
	}

	.g-indicator-line {
	fill: none;
	stroke: steelblue;
	stroke-width: 1.5px;
	}

	</style>

	<body>
	<div class="chart">
	</div>

	<script src="http://d3js.org/d3.v3.js"></script>
	<script>
	var margin = {top: 20, right: 120, bottom: 30, left: 20},
	width = 600 - margin.left - margin.right,
	height = 450 - margin.top - margin.bottom,
	labelBuffer = 10;

	var color = d3.scale.category10();

	var parseDate = d3.time.format("%Y%m").parse;

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

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

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

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

	var line = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.val); });

	var svg = d3.select(".chart").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 + ")");

	d3.csv("data.csv", function(error, data) {

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

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

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

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	valuesBySector = d3.nest()
	.key(function(d) { return d.indicators})
	.entries(data);

	color.domain(d3.keys(valuesBySector) );

	var sectorContainer = svg.append("g")
	.attr("class", "g-sector-container");

	var sectors = sectorContainer.selectAll("g-sector")
	.data(valuesBySector)
	.enter()
	.append("g")
	.attr("class", "g-sector");

	var sectorLine = sectors.append("path")
	.attr("class", "g-indicator-line")
	.attr("d", function(d) { console.log(d); return line(d.values); })
	.style("stroke", function(d) {return color(d.key); });

	sectors.append("text")
	.text(function(d) { return d.key; })
	.attr("x", function(d) { return x(d.values[d.values.length - 1].date) + labelBuffer })
	.attr("y", function(d) { return y(d.values[d.values.length - 1].val) })

	sectors.append("circle")
	.attr("cx", function(d) { return x(d.values[d.values.length - 1].date); })
	.attr("cy", function(d) { return y(d.values[d.values.length - 1].val); })
	.attr("r", 3)
	.style("fill", function(d) { return color(d.key); });

	});

	</script>