Emphasizing Interaction

var symbolSize = 10;

var data = [
  {ages: "0 - 10",  respondents: 15},
  {ages: "10 - 20", respondents: 20},
  {ages: "20 - 30", respondents: 40},
  {ages: "30 - 40", respondents: 54},
  {ages: "40 - 50", respondents: 60},
  {ages: "50 - 60", respondents: 51},
  {ages: "60 - 70", respondents: 32},
  {ages: "70 - 80", respondents: 25}
];

var xScale = new Plottable.Scales.Category();
var yScale = new Plottable.Scales.Linear();

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

var linePlot = new Plottable.Plots.Line()
  .addDataset(new Plottable.Dataset(data))
  .x(function(d) { return d.ages; }, xScale)
  .y(function(d) { return d.respondents; }, yScale)
  .attr("stroke-width", 3)
  .attr("stroke", "black")
  .addDataset(new Plottable.Dataset(data));

var scatterPlot = new Plottable.Plots.Scatter()
  .addDataset(new Plottable.Dataset(data))
  .x(function(d) { return d.ages; }, xScale)
  .y(function(d) { return d.respondents; }, yScale)
  .attr("opacity", 1)
  .attr("stroke-width", 3)
  .attr("stroke", "black")
  .size(symbolSize)
  .addDataset(new Plottable.Dataset(data));

var bandPlot = new Plottable.Plots.Rectangle()
  .x(function(d) { return d.ages; }, xScale)
  .y(0)
  .y2(function() { return bandPlot.height(); })
  .attr("fill", "white")
  .attr("opacity", 0.3)
  .addDataset(new Plottable.Dataset(data));

var interaction = new Plottable.Interactions.Pointer();
interaction.onPointerMove(function(point) {
  bandPlot.entities().forEach(function(entity) {
    entity.selection.attr("fill", "white");
  });
  var nearestEntity = bandPlot.entityNearest(point);
  nearestEntity.selection.attr("fill", "#7cb5ec");
  scatterPlot.size(function(datum) {
    return datum.ages === nearestEntity.datum.ages ? symbolSize * 2 : symbolSize;
  });
})
interaction.onPointerExit(function() {
  bandPlot.entities().forEach(function(entity) {
    entity.selection.attr("fill", "white");
  });
  scatterPlot.size(symbolSize);
});
interaction.attachTo(bandPlot);

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

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

table.renderTo("svg#example");