bounded panning

_.md

[ Launch: bounded panning ] 8294897 by davidshinn

config.json

{"description":"bounded panning","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/5Z7hDSa.png"}

inlet.js

var svg = d3.select("svg");

var margin = {top: 10, bottom: 40, left: 40, right: 10},
    width = 300 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width + margin.left)
    .attr("height", height + margin.bottom);

var body = svg
  .append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
	.attr("clip-path", "url(#clip)");
    

var max = 318;

var points = d3.range(max).map(function(d) { return [d, d3.random.normal(50, 13)()]; });

var xscale = d3.scale.linear().domain([0, max]).range([0, max*2]),
    yscale = d3.scale.linear().domain([0, 100]).range([height, 0]);

var line = d3.svg.line()
    .x(function(d) { return xscale(d[0]); })
    .y(function(d) { return yscale(d[1]); })
    .interpolate('basis');

var xscaleFactor = (xscale.range()[1] - xscale.range()[0])/(xscale.domain()[1] - xscale.domain()[0]);

var xAxis = d3.svg.axis()
	.orient("bottom")
	.scale(xscale);

body.append('g').attr('class', 'x axis')
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

var path = body.append('g')
    .datum(points)
  .append('path')
	.attr('class', 'data')
    .attr('d', line)
	.style("fill", "none")
	.style("stroke", "steelblue");

var text = svg.append("text")
		.attr("transform", "translate(" + margin.left*2 + "," + (height + margin.bottom) + ")")
		.text(xscale.domain()).style("fill", "black");
var numberFormat = d3.format('.0f');
var zoom = d3.behavior.zoom()
    .scaleExtent([1, 1])
    .x(xscale)
    .on('zoom', function() {
      //svg.select('.data').attr('d', line);
      path.attr("transform", "translate(" + (-1.0*xscaleFactor*xscale.domain()[0]) + ",0)");
      svg.select('.x.axis').call(xAxis);
      text.text(numberFormat(xscale.domain()[0]))
    });

svg.call(zoom);