e9t/README.md

## README.md

      
    Raw
  

              README.md
            
          
Caveat: This work is still in progress!


Author: team POPONG
Created date: 2013-01-27
Todos:

Activate mouse hover when close to line

y-axis log scale
Mark data points with circles
Interpolation for null cells


## data.tsv

          
            date
            president-candidates
            president-officials
            mayor-candidates
            mayor-officials
            legislator-candidates
            legislator-officials

            
              19480510
              
              
              950
              200

            
              19480720
              3
              1

            
              19500530
              
              
              2207
              204

            
              19520805
              4
              1

            
              19540520
              
              
              1291
              202

            
              19560515
              3
              1

            
              19580502
              
              
              870
              232

            
              19600315
              2
              1

            
              19600729
              
              
              1561
              233

            
              19600812
              7
              1

            
              19631015
              7
              1

            
              19631126
              
              
              847
              131

            
              19670503
              7
              1

            
              19670608
              
              
              702
              131

            
              19710427
              1
              1

            
              19710525
              
              
              577
              153

            
              19721223
              1
              1

            
              19730227
              
              
              339
              146

            
              19780706
              1
              1

            
              19781212
              
              
              473
              154

            
              19791206
              1
              1

            
              19800827
              4
              1

            
              19810225
              8
              1

            
              19810325
              
              
              635
              183

            
              19850212
              
              
              440
              184

            
              19871216
              8
              1

            
              19880426
              
              
              1046
              224

            
              19920324
              
              
              1052
              237

            
              19921218
              7
              1

            
              19960411
              
              
              1389
              253

            
              19971218
              7
              1

            
              19980604
              
              
              40
              16

            
              20000413
              
              
              1040
              227

            
              20010613
              
              
              55
              16

            
              20021219
              10
              1

            
              20040415
              
              
              1365
              299

            
              20060531
              
              
              66
              16

            
              20071219
              
              
              56
              15

            
              20080409
              
              
              1301
              299

            
              20100602
              
              
              55
              16

            
              20120411
              
              
              1090
              300

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
            type="text/javascript"></script>
        <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <script type="text/javascript" src="politicians.js"></script>
    </body>
</html>

## politicians.js
// settings
var margin = {top: 20, right: 80, bottom: 30, left: 50},
    canvas_width = 960,
    canvas_height = 500;

var color = d3.scale.category10();

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

// auto-settings
var width = canvas_width - margin.left - margin.right,
    height = canvas_height - margin.top - margin.bottom;

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

var xAxis = d3.svg.axis().scale(x).orient("bottom"),
    yAxis = d3.svg.axis().scale(y).orient("left");

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

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 + ")");

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

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

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

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

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

  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("n(People)");

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

  type.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return color(d.name); });

  type.append("text")
      .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.npeople) + ")"; })
      .attr("x", 3)
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });
});

## style.css
body {
  font: 10px 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.5px;
}

.line:hover {
  stroke-width: 3px;
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
date	president-candidates	president-officials	mayor-candidates	mayor-officials	legislator-candidates	legislator-officials
19480510					950	200
19480720	3	1
19500530					2207	204
19520805	4	1
19540520					1291	202
19560515	3	1
19580502					870	232
19600315	2	1
19600729					1561	233
19600812	7	1
19631015	7	1
19631126					847	131
19670503	7	1
19670608					702	131
19710427	1	1
19710525					577	153
19721223	1	1
19730227					339	146
19780706	1	1
19781212					473	154
19791206	1	1
19800827	4	1
19810225	8	1
19810325					635	183
19850212					440	184
19871216	8	1
19880426					1046	224
19920324					1052	237
19921218	7	1
19960411					1389	253
19971218	7	1
19980604			40	16
20000413					1040	227
20010613			55	16
20021219	10	1
20040415					1365	299
20060531			66	16
20071219			56	15
20080409					1301	299
20100602			55	16
20120411					1090	300
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
	type="text/javascript"></script>
	<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
	<link href="style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	<script type="text/javascript" src="politicians.js"></script>
	</body>
	</html>
	// settings
	var margin = {top: 20, right: 80, bottom: 30, left: 50},
	canvas_width = 960,
	canvas_height = 500;

	var color = d3.scale.category10();

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

	// auto-settings
	var width = canvas_width - margin.left - margin.right,
	height = canvas_height - margin.top - margin.bottom;

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

	var xAxis = d3.svg.axis().scale(x).orient("bottom"),
	yAxis = d3.svg.axis().scale(y).orient("left");

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

	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 + ")");

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

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

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

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

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

	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("n(People)");

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

	type.append("path")
	.attr("class", "line")
	.attr("d", function(d) { return line(d.values); })
	.style("stroke", function(d) { return color(d.name); });

	type.append("text")
	.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
	.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.npeople) + ")"; })
	.attr("x", 3)
	.attr("dy", ".35em")
	.text(function(d) { return d.name; });
	});
	body {
	font: 10px 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.5px;
	}

	.line:hover {
	stroke-width: 3px;
	}