Base Plottable JSFiddle

by bluong63

HTML

<script src="http://d3js.org/d3.v3.js"></script>
<script src="https://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/palantir/plottable/develop/plottable.css">
<svg id="svg" width="400" height="300"/>
<script src="https://rawgithub.com/palantir/plottable/2519FR/plottable.js"></script>

CSS

.selected {
  fill: red
}

JavaScript

var data = [];
for (var i = 0; i < 30; i++) {
  data[i] = {x: i, y: i};
}

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

var plot = new Plottable.Plots.Scatter(xScale, yScale);
plot.addDataset(new Plottable.Dataset(data))
    .x(function(d) { return d.x; }, xScale)
    .y(function(d) { return d.y; }, yScale);

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

var dragBoxLayer = new Plottable.Components.DragBoxLayer();
dragBoxLayer.onDrag(function (bounds) {
  plot.entities().forEach(function (entity) {
    entity.selection.classed("selected", false)
  });

  // Using entitiesIn() to get the selected points
  var entities = plot.entitiesIn(bounds);
  entities.forEach(function (entity) {
    entity.selection.classed("selected", true);
  });

});

dragBoxLayer.onDragStart(function (bounds) {
  plot.entities().forEach(function (entity) {
    entity.selection.classed("selected", false)
  });
});

new Plottable.Components.Table([[yAxis, new Plottable.Components.Group([plot, dragBoxLayer])], [null, xAxis]]).renderTo("#svg");