monkeycycle/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Line charts with circles and labels. A demonstration of the technique for a student.

  
## data.tsv

          
            year
            val
            network

            
              2002
              9.86
              ABC

            
              2003
              10.596
              ABC

            
              2004
              9.989
              ABC

            
              2005
              12.217
              ABC

            
              2006
              12.281
              ABC

            
              2007
              11.913
              ABC

            
              2008
              12.265
              ABC

            
              2009
              11.05
              ABC

            
              2010
              9.595
              ABC

            
              2011
              9.871
              ABC

            
              2012
              8.339
              ABC

            
              2002
              13.959
              CBS

            
              2003
              13.856
              CBS

            
              2004
              13.581
              CBS

            
              2005
              12.843
              CBS

            
              2006
              13.019
              CBS

            
              2007
              11.726
              CBS

            
              2008
              11.274
              CBS

            
              2009
              11.812
              CBS

            
              2010
              12.538
              CBS

            
              2011
              12.284
              CBS

            
              2012
              10.69
              CBS

            
              2002
              0
              CW

            
              2003
              0
              CW

            
              2004
              0
              CW

            
              2005
              0
              CW

            
              2006
              2.847
              CW

            
              2007
              2.772
              CW

            
              2008
              2.911
              CW

            
              2009
              2.177
              CW

            
              2010
              2.481
              CW

            
              2011
              1.642
              CW

            
              2012
              0.688
              CW

            
              2002
              7.102
              FOX

            
              2003
              6.023
              FOX

            
              2004
              5.436
              FOX

            
              2005
              6.479
              FOX

            
              2006
              7.507
              FOX

            
              2007
              6.936
              FOX

            
              2008
              7.734
              FOX

            
              2009
              7.371
              FOX

            
              2010
              6.526
              FOX

            
              2011
              8.434
              FOX

            
              2012
              7.158
              FOX

            
              2002
              1.189
              ION

            
              2003
              0.811
              ION

            
              2004
              0.626
              ION

            
              2005
              0.561
              ION

            
              2006
              0.628
              ION

            
              2007
              0.488
              ION

            
              2008
              0.369
              ION

            
              2009
              0.628
              ION

            
              2010
              1.009
              ION

            
              2011
              0.956
              ION

            
              2012
              0.92
              ION

            
              2002
              0
              Television

            
              2003
              0
              Television

            
              2004
              0
              Television

            
              2005
              0
              Television

            
              2006
              0.847
              Television

            
              2007
              0.853
              Television

            
              2008
              1.257
              Television

            
              2009
              1.358
              Television

            
              2010
              0
              Television

            
              2011
              0
              Television

            
              2012
              0
              Television

            
              2002
              13.419
              MyNetworkTV

            
              2003
              12.572
              MyNetworkTV

            
              2004
              10.607
              MyNetworkTV

            
              2005
              9.879
              MyNetworkTV

            
              2006
              11.045
              MyNetworkTV

            
              2007
              9.929
              MyNetworkTV

            
              2008
              8.325
              MyNetworkTV

            
              2009
              7.567
              MyNetworkTV

            
              2010
              8.172
              MyNetworkTV

            
              2011
              7.495
              MyNetworkTV

            
              2012
              8.19
              MyNetworkTV

            
              2002
              0
              NBC

            
              2003
              0
              NBC

            
              2004
              0
              NBC

            
              2005
              0
              NBC

            
              2006
              0
              NBC

            
              2007
              0
              NBC

            
              2008
              0
              NBC

            
              2009
              0
              NBC

            
              2010
              0
              NBC

            
              2011
              1.507
              NBC

            
              2012
              1.651
              NBC

            
              2002
              4.207
              PBS

            
              2003
              3.448
              PBS

            
              2004
              3.193
              PBS

            
              2005
              4.134
              PBS

            
              2006
              0
              PBS

            
              2007
              0
              PBS

            
              2008
              0
              PBS

            
              2009
              0
              PBS

            
              2010
              0
              PBS

            
              2011
              0
              PBS

            
              2012
              0
              PBS

            
              2002
              4.532
              UPN

            
              2003
              4.008
              UPN

            
              2004
              4.243
              UPN

            
              2005
              3.289
              UPN

            
              2006
              0
              UPN

            
              2007
              0
              UPN

            
              2008
              0
              UPN

            
              2009
              0
              UPN

            
              2010
              0
              UPN

            
              2011
              0
              UPN

            
              2012
              0
              UPN

## 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;
}

.network-line {
  fill: none;
  stroke: steelblue;
  stroke-width: 3px;
}

</style>
<body>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script>

var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 700 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width])
    .domain([2002,2012])

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

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(function(d) { return d});

var yAxis = d3.svg.axis()
    .scale(y)
    .tickSize(-width)
    .orient("left");

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

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) {

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

  yearlyCostByNetwork = d3.nest()
      .key(function(d) { return d.network})
      .entries(data);

  y.domain([0,d3.max(data.map(function(d) { return d.val; }))]);

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

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

  var linesContainer = svg.append("g")

  linesContainer.selectAll(".network-line")
      .data(yearlyCostByNetwork)
      .enter()
      .append("path")
      .attr("class", "network-line")
      .attr("d", function(d) { return line(d.values); });

  var labelElements = svg.append("g")
      .attr("class", "fiddly-bits")

  var label = labelElements.selectAll(".g-label-element")
      .data(data.filter(function(d) { return d.year == 2012; }))
    .enter().append("g")
      .attr("class", "g-label-element")
      .attr("transform", function(d) { return "translate(" + x(d.year) + "," + y(d.val) + ")"; } );

  label.append("circle")
      .attr("r", 4)

    label.append("text")
      .attr("x", 10)
      .text(function(d) { return d.network})

});


</script>
year	val	network
2002	9.86	ABC
2003	10.596	ABC
2004	9.989	ABC
2005	12.217	ABC
2006	12.281	ABC
2007	11.913	ABC
2008	12.265	ABC
2009	11.05	ABC
2010	9.595	ABC
2011	9.871	ABC
2012	8.339	ABC
2002	13.959	CBS
2003	13.856	CBS
2004	13.581	CBS
2005	12.843	CBS
2006	13.019	CBS
2007	11.726	CBS
2008	11.274	CBS
2009	11.812	CBS
2010	12.538	CBS
2011	12.284	CBS
2012	10.69	CBS
2002	0	CW
2003	0	CW
2004	0	CW
2005	0	CW
2006	2.847	CW
2007	2.772	CW
2008	2.911	CW
2009	2.177	CW
2010	2.481	CW
2011	1.642	CW
2012	0.688	CW
2002	7.102	FOX
2003	6.023	FOX
2004	5.436	FOX
2005	6.479	FOX
2006	7.507	FOX
2007	6.936	FOX
2008	7.734	FOX
2009	7.371	FOX
2010	6.526	FOX
2011	8.434	FOX
2012	7.158	FOX
2002	1.189	ION
2003	0.811	ION
2004	0.626	ION
2005	0.561	ION
2006	0.628	ION
2007	0.488	ION
2008	0.369	ION
2009	0.628	ION
2010	1.009	ION
2011	0.956	ION
2012	0.92	ION
2002	0	Television
2003	0	Television
2004	0	Television
2005	0	Television
2006	0.847	Television
2007	0.853	Television
2008	1.257	Television
2009	1.358	Television
2010	0	Television
2011	0	Television
2012	0	Television
2002	13.419	MyNetworkTV
2003	12.572	MyNetworkTV
2004	10.607	MyNetworkTV
2005	9.879	MyNetworkTV
2006	11.045	MyNetworkTV
2007	9.929	MyNetworkTV
2008	8.325	MyNetworkTV
2009	7.567	MyNetworkTV
2010	8.172	MyNetworkTV
2011	7.495	MyNetworkTV
2012	8.19	MyNetworkTV
2002	0	NBC
2003	0	NBC
2004	0	NBC
2005	0	NBC
2006	0	NBC
2007	0	NBC
2008	0	NBC
2009	0	NBC
2010	0	NBC
2011	1.507	NBC
2012	1.651	NBC
2002	4.207	PBS
2003	3.448	PBS
2004	3.193	PBS
2005	4.134	PBS
2006	0	PBS
2007	0	PBS
2008	0	PBS
2009	0	PBS
2010	0	PBS
2011	0	PBS
2012	0	PBS
2002	4.532	UPN
2003	4.008	UPN
2004	4.243	UPN
2005	3.289	UPN
2006	0	UPN
2007	0	UPN
2008	0	UPN
2009	0	UPN
2010	0	UPN
2011	0	UPN
2012	0	UPN
	<!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;
	}

	.network-line {
	fill: none;
	stroke: steelblue;
	stroke-width: 3px;
	}

	</style>
	<body>

	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

	<script>

	var margin = {top: 20, right: 80, bottom: 30, left: 50},
	width = 700 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom;

	var x = d3.scale.linear()
	.range([0, width])
	.domain([2002,2012])

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

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.tickFormat(function(d) { return d});

	var yAxis = d3.svg.axis()
	.scale(y)
	.tickSize(-width)
	.orient("left");

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

	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) {

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

	yearlyCostByNetwork = d3.nest()
	.key(function(d) { return d.network})
	.entries(data);

	y.domain([0,d3.max(data.map(function(d) { return d.val; }))]);

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

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

	var linesContainer = svg.append("g")

	linesContainer.selectAll(".network-line")
	.data(yearlyCostByNetwork)
	.enter()
	.append("path")
	.attr("class", "network-line")
	.attr("d", function(d) { return line(d.values); });

	var labelElements = svg.append("g")
	.attr("class", "fiddly-bits")

	var label = labelElements.selectAll(".g-label-element")
	.data(data.filter(function(d) { return d.year == 2012; }))
	.enter().append("g")
	.attr("class", "g-label-element")
	.attr("transform", function(d) { return "translate(" + x(d.year) + "," + y(d.val) + ")"; } );

	label.append("circle")
	.attr("r", 4)

	label.append("text")
	.attr("x", 10)
	.text(function(d) { return d.network})

	});


	</script>