Base Plottable JSFiddle

by bluong63

HTML

<link rel="stylesheet" href="https://rawgithub.com/palantir/plottable/develop/plottable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="https://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<script src="https://rawgithub.com/palantir/plottable/dataSetterSelectionBoxLayer/plottable.js"></script>
<svg id="svg" width="400" height="300"/>
Left edge: <textarea rows="1" cols="2" id="leftEdgeTextArea"></textarea><br>
Right edge: <textarea rows="1" cols="2" id="rightEdgeTextArea"></textarea><br>
<button id="setXExtentButton">set X Extent</button>

CSS

textarea {
  resize: none;
}

JavaScript

// Setup components
var xScale = new Plottable.Scales.Linear();
var yScale = new Plottable.Scales.Linear();
var xAxis = new Plottable.Axes.Numeric(xScale, "bottom");
var yAxis = new Plottable.Axes.Numeric(yScale, "left");

// Setup dragBoxLayer to the xScale
var dragBoxLayer = new Plottable.Components.XDragBoxLayer();
dragBoxLayer.xScale(xScale);

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

// Sets
d3.select("button").on("click", function(d,i) {
  dragBoxLayer.boxVisible(true);
  var leftEdge = +d3.select("#leftEdgeTextArea").node().value;
  var rightEdge = +d3.select("#rightEdgeTextArea").node().value;
  if (leftEdge != null && rightEdge != null) {
    dragBoxLayer.xExtent([leftEdge, rightEdge]);
  }
});