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/dataSelectionBoxLayer/plottable.js"></script>

JavaScript

var data = [];
for (var i = 0; i < 1000; i++) {
  data[i] = {x: i, y: i};
}
var xScale = new Plottable.Scales.Linear();
var yScale = new Plottable.Scales.Linear();
var plot = new Plottable.Plots.Line(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 pzi = new Plottable.Interactions.PanZoom();
pzi.addXScale(xScale);
var pzi2 = new Plottable.Interactions.PanZoom();
pzi2.addYScale(yScale);
pzi.attachTo(xAxis);
pzi2.attachTo(yAxis);

var dragBoxLayer = new Plottable.Components.DragBoxLayer();
dragBoxLayer.resizable(true);

// Setting the xScale so the box can react to xScale changes.
dragBoxLayer.xScale(xScale);
// Setting the yScale so the box can react to yScale changes.
dragBoxLayer.yScale(yScale);

var xAxisLabel = new Plottable.Components.AxisLabel("X Axis");
var yAxisLabel = new Plottable.Components.AxisLabel("Y Axis", 90);

dragBoxLayer.onDrag(function() {
  var fixedFormatter = Plottable.Formatters.fixed();

  // Setting the xAxisLabel text to the x data values for the box.
  var xExtent = dragBoxLayer.xExtent();

  xAxisLabel.text(fixedFormatter(xExtent[0]) + ", " + fixedFormatter(xExtent[1]));

  // Setting the yAxisLabel text to the y data values for the box.
  var yExtent = dragBoxLayer.yExtent();

  yAxisLabel.text(fixedFormatter(yExtent[0]) + ", " + fixedFormatter(yExtent[1]));
});

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