Bump Chart

var data = [
  [
    {name: "A", year: "2001", rank: 1},
    {name: "A", year: "2002", rank: 2},
    {name: "A", year: "2003", rank: 1},
    {name: "A", year: "2004", rank: 2},
    {name: "A", year: "2005", rank: 2},
    {name: "A", year: "2006", rank: 3},
    {name: "A", year: "2007", rank: 3}
  ], [
    {name: "B", year: "2001", rank: 2},
    {name: "B", year: "2002", rank: 1},
    {name: "B", year: "2003", rank: 2},
    {name: "B", year: "2004", rank: 3},
    {name: "B", year: "2005", rank: 4},
    {name: "B", year: "2006", rank: 2},
    {name: "B", year: "2007", rank: 1}
  ], [
    {name: "C", year: "2001", rank: 3},
    {name: "C", year: "2002", rank: 3},
    {name: "C", year: "2003", rank: 4},
    {name: "C", year: "2004", rank: 4},
    {name: "C", year: "2005", rank: 3},
    {name: "C", year: "2006", rank: 4},
    {name: "C", year: "2007", rank: 4}],
  [
    {name: "D", year: "2001", rank: 4},
    {name: "D", year: "2002", rank: 4},
    {name: "D", year: "2003", rank: 3},
    {name: "D", year: "2004", rank: 1},
    {name: "D", year: "2005", rank: 1},
    {name: "D", year: "2006", rank: 1},
    {name: "D", year: "2007", rank: 2}
  ]
];

var xScale = new Plottable.Scales.Category();
var yScale = new Plottable.Scales.Linear();
// Making sure 1 is on top and 4 is on the bottom and adding some padding
yScale.domain([4.5, 0.5]);
// Making sure the ticks are integer numbers
yScale.tickGenerator(Plottable.Scales.TickGenerators.integerTickGenerator());

var colorScale = new Plottable.Scales.Color();
colorScale.domain(["A","B","C","D"]);

var legend = new Plottable.Components.Legend(colorScale);
legend.maxEntriesPerRow(Infinity);

var linePlot = new Plottable.Plots.Line()
  .x(function(d) { return d.year; }, xScale)
  .y(function(d) { return d.rank; }, yScale)
  .attr("stroke-width", 3)
  .attr("stroke", function(d) { return d.name; }, colorScale);

var scatterPlot = new Plottable.Plots.Scatter()
  .x(function(d) { return d.year; }, xScale)
  .y(function(d) { return d.rank; }, yScale)
  .attr("stroke-width", 3)
  .size(30)
  .attr("stroke", function(d) { return d.name; }, colorScale)
  .attr("fill", function(d) { return d.name; }, colorScale)
  .attr("opacity", 1);

data.forEach(function(d) {
  var dataSet = new Plottable.Dataset(d, {name: d[0].name});
  linePlot.addDataset(dataSet);
  scatterPlot.addDataset(dataSet);
});

var plots = new Plottable.Components.Group([linePlot, scatterPlot]);

var xAxis = new Plottable.Axes.Category(xScale, "bottom");
var yAxis = new Plottable.Axes.Numeric(yScale, "left");

var table = new Plottable.Components.Table([
  [null,  legend],
  [yAxis, plots],
  [null,  xAxis]
]);

table.renderTo("svg#example");

var adjustOpacity = function(plot, legendText) {
  plot.attr("opacity", function(d, i, ds) {
    return ds.metadata().name == legendText ? 1 : .2;
  });
}

new Plottable.Interactions.Click()
  .attachTo(legend)
  .onClick(function(p) {
    if (legend.entitiesAt(p)[0] !== undefined) {
      var selected = legend.entitiesAt(p)[0].datum;
      adjustOpacity(scatterPlot, selected);
      adjustOpacity(linePlot, selected);
    }
  });

new Plottable.Interactions.Click()
  .attachTo(plots)
  .onClick(function() {
    scatterPlot.attr("opacity", 1);
    linePlot.attr("opacity", 1);
  });