veltman/gist:7467656

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

body {
  font: 10px sans-serif;
}

path.country {
  stroke-width: 1px;
  stroke: #ccc;
  fill: none;
}

path.highlighted {
  fill: none;
  stroke-width: 2px;
  stroke: #c00;
}

span.country {
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

span.country:hover {
  color: steelblue;
}

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

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

var margin = {top: 20, bottom: 30, left: 30, right: 0};

var countries = d3.range(100).map(function(d) {
  return {
    "country": "Country "+(d+1),
    "rankings": d3.range(20).map(function(d){
      return Math.random()*3;
    })
  };
});

var xScale = d3.scale.linear().domain([0,19]).range([margin.left,width-margin.right]);
var yScale = d3.scale.linear().domain([0,3]).range([height-margin.bottom,margin.top]);

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

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

var line = function(d,i) {

  var path = [];

  for (var i = 0; i < d.length; i++) {
    if (i == 0) {
      path.push("M"+xScale(i)+","+yScale(d[i]));
    } else {
      path.push(xScale(i)+","+yScale(d[i-1]));
      path.push(xScale(i)+","+yScale(d[i]));
    }
  }

  return path.join("L");
}

/*var line = d3.svg.line()
    //.tension(0) // Catmull–Rom
    .interpolate("cardinal")
    .x(function(d,i){
      return xScale(i);
    })
    .y(yScale);*/

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var paths = svg.selectAll("path.country").data(countries.map(function(d){
    return d.rankings;
  })).enter()
  .append("path")
  .attr("class","country")
  .attr("d",line);

var highlighted = svg.append("path").attr("class","highlighted");

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

  svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + (margin.left) + ",0)")
      .call(yAxis);

var list = d3.select("body").append("div").selectAll("div").data(countries).enter()
  .append("div")
    .append("span")
    .attr("class","country")
    .text(function(d){return d.country;})
    .on("click",function(d){
      highlighted
        .transition()
          .duration(0);

      highlighted
        .attr("d",line(d.rankings))
        .call(transition);
    });

function transition(path) {
  path.transition()
    .duration(2500)
    .attrTween("stroke-dasharray", tweenDash);
}

function tweenDash() {
  var l = this.getTotalLength(),
      i = d3.interpolateString("0," + l, l + "," + l);
  return function(t) { return i(t); };
}

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

	path.country {
	stroke-width: 1px;
	stroke: #ccc;
	fill: none;
	}

	path.highlighted {
	fill: none;
	stroke-width: 2px;
	stroke: #c00;
	}

	span.country {
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	}

	span.country:hover {
	color: steelblue;
	}

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

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var width = 960,
	height = 500;

	var margin = {top: 20, bottom: 30, left: 30, right: 0};

	var countries = d3.range(100).map(function(d) {
	return {
	"country": "Country "+(d+1),
	"rankings": d3.range(20).map(function(d){
	return Math.random()*3;
	})
	};
	});

	var xScale = d3.scale.linear().domain([0,19]).range([margin.left,width-margin.right]);
	var yScale = d3.scale.linear().domain([0,3]).range([height-margin.bottom,margin.top]);

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

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left");

	var line = function(d,i) {

	var path = [];

	for (var i = 0; i < d.length; i++) {
	if (i == 0) {
	path.push("M"+xScale(i)+","+yScale(d[i]));
	} else {
	path.push(xScale(i)+","+yScale(d[i-1]));
	path.push(xScale(i)+","+yScale(d[i]));
	}
	}

	return path.join("L");
	}

	/*var line = d3.svg.line()
	//.tension(0) // Catmull–Rom
	.interpolate("cardinal")
	.x(function(d,i){
	return xScale(i);
	})
	.y(yScale);*/

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var paths = svg.selectAll("path.country").data(countries.map(function(d){
	return d.rankings;
	})).enter()
	.append("path")
	.attr("class","country")
	.attr("d",line);

	var highlighted = svg.append("path").attr("class","highlighted");

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

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + (margin.left) + ",0)")
	.call(yAxis);

	var list = d3.select("body").append("div").selectAll("div").data(countries).enter()
	.append("div")
	.append("span")
	.attr("class","country")
	.text(function(d){return d.country;})
	.on("click",function(d){
	highlighted
	.transition()
	.duration(0);

	highlighted
	.attr("d",line(d.rankings))
	.call(transition);
	});

	function transition(path) {
	path.transition()
	.duration(2500)
	.attrTween("stroke-dasharray", tweenDash);
	}

	function tweenDash() {
	var l = this.getTotalLength(),
	i = d3.interpolateString("0," + l, l + "," + l);
	return function(t) { return i(t); };
	}

	</script>