Band Zoom

D3 V4.

Hit the pull data button to pull in the testData.json file.

Drag a rectangle around an area of interest to zoom in.

If anyone is interested in a more general version (to take in custom data), or would like me to correct something, leave a comment on the gist.

Update Dec 29th 2017

Mashed things together to make it work with v4
Pulling data from json file (based off request to make it more generic)
Dynamically updating axes, and other properties, in case the testData should change, or I add an upload data feature.
Needs some refactoring

Gist

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  
  path.line {
    fill: none;
    stroke-width: 1px;
    pointer-events: none;
  }
  
  .zoomOut {
    fill: #66a;
    cursor: pointer;
  }
  
  .zoomOutText {
    pointer-events: none;
    fill: #ccc;
  }
  
  .zoomOverlay {
    pointer-events: all;
    fill: none;
  }
  
  .band {
    fill: none;
    stroke-width: 2px;
    stroke: black;
  }

</style>

<body>

<button onClick="zoomOut()"> Zoom Out </button>
  <button onClick="pullData()"> Pull Data </button>
  <div id="graph"></div>
  </button>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
    var data = [[{"x":0,"y":154.50225795359734},{"x":5,"y":-431.1182941299825},{"x":10,"y":-263.54297944962224},{"x":15,"y":20.79694446514884},{"x":20,"y":-87.760719133787},{"x":25,"y":345.3894549301824},{"x":30,"y":-290.35883897319945},{"x":35,"y":-280.91337075367437},{"x":40,"y":-225.94356313607113},{"x":45,"y":-251.16322653616896},{"x":50,"y":497.35765151981343},{"x":55,"y":-418.9842890223636},{"x":60,"y":-10.514169311464514},{"x":65,"y":-142.42525955529152},{"x":70,"y":-271.1309836942313},{"x":75,"y":-299.39379176396153},{"x":80,"y":258.6465842514907},{"x":85,"y":-278.542553549006},{"x":90,"y":-281.1272168974168},{"x":95,"y":286.4967168240822},{"x":100,"y":313.0808307829635},{"x":105,"y":131.474021207056},{"x":110,"y":-331.7678927009637},{"x":115,"y":-393.56109686160653},{"x":120,"y":452.8033399462223},{"x":125,"y":-486.1915845314446},{"x":130,"y":-108.62971371859544},{"x":135,"y":389.01381464023973},{"x":140,"y":446.48059954521966},{"x":145,"y":266.32419527995285},{"x":150,"y":-244.41437274086053},{"x":155,"y":-291.70714382543906},{"x":160,"y":161.70890092984064},{"x":165,"y":-128.6392400145442},{"x":170,"y":-75.3267895513057},{"x":175,"y":259.2496416442698},{"x":180,"y":-454.2201941586541},{"x":185,"y":132.2417561216713},{"x":190,"y":-40.41983403480987},{"x":195,"y":-286.8110307639324},{"x":200,"y":247.842666122678},{"x":205,"y":-457.62362207877084},{"x":210,"y":365.6896976205745},{"x":215,"y":-143.02059447421686},{"x":220,"y":-439.40599725400943},{"x":225,"y":4.360672864073706},{"x":230,"y":-279.7266295396323},{"x":235,"y":340.7384672907823},{"x":240,"y":229.250544254499},{"x":245,"y":41.88955671966016},{"x":250,"y":185.16960000218648},{"x":255,"y":-428.71611484800053},{"x":260,"y":-0.2599080407921406},{"x":265,"y":-296.0918763112172},{"x":270,"y":295.6942647565792},{"x":275,"y":170.06279391817202},{"x":280,"y":-355.52900791140064},{"x":285,"y":-57.628984325124065},{"x":290,"y":39.57261689609038},{"x":295,"y":-54.648024049079424},{"x":300,"y":-493.59025689916234},{"x":305,"y":-314.84065704861064},{"x":310,"y":-185.8347423621771},{"x":315,"y":252.62084914394836},{"x":320,"y":-393.9805090437458},{"x":325,"y":295.23572626472605},{"x":330,"y":-177.07246901045238},{"x":335,"y":-374.65994330829267},{"x":340,"y":211.00793413745532},{"x":345,"y":121.42640187869301},{"x":350,"y":466.4682008062771},{"x":355,"y":-302.36624087287976},{"x":360,"y":423.5865895557995},{"x":365,"y":289.15831736348684},{"x":370,"y":-440.4385866992833},{"x":375,"y":16.286197026266677},{"x":380,"y":-288.0292493867373},{"x":385,"y":-384.35302621443435},{"x":390,"y":-52.0665650833767},{"x":395,"y":-467.9614161197034},{"x":400,"y":41.96621463896429},{"x":405,"y":-318.55439828793374},{"x":410,"y":-425.25198298700536},{"x":415,"y":346.65959197546897},{"x":420,"y":-436.16112190915703},{"x":425,"y":-396.79111148133404},{"x":430,"y":28.145698750255292},{"x":435,"y":344.40793256028917},{"x":440,"y":-291.8900397105026},{"x":445,"y":372.1221204602174},{"x":450,"y":-43.930089751435446},{"x":455,"y":-218.6624421861485},{"x":460,"y":54.224377535063695},{"x":465,"y":419.70498117709474},{"x":470,"y":-69.89077050784198},{"x":475,"y":-153.90541855698058},{"x":480,"y":-102.60935726407581},{"x":485,"y":392.05572763930684},{"x":490,"y":-302.6652096165823},{"x":495,"y":476.1051315775253},{"x":500,"y":433.74721043540546},{"x":505,"y":120.39436071261593},{"x":510,"y":274.76924584326025},{"x":515,"y":480.450845351323},{"x":520,"y":165.95578323760083},{"x":525,"y":235.38440730444665},{"x":530,"y":391.8778460026929},{"x":535,"y":106.51697790718435},{"x":540,"y":468.1903742857494},{"x":545,"y":140.37640409999358},{"x":550,"y":-234.04680898642914},{"x":555,"y":-310.7902000807396},{"x":560,"y":-415.2677694585194},{"x":565,"y":-263.7027444450861},{"x":570,"y":29.63612708743608},{"x":575,"y":-346.73536837589404},{"x":580,"y":219.11522694661483},{"x":585,"y":315.7120052978446},{"x":590,"y":-354.4053239346905},{"x":595,"y":452.5603813930587},{"x":600,"y":-315.70087428926973},{"x":605,"y":362.7978592642378},{"x":610,"y":158.46921150638877},{"x":615,"y":202.99102985459297},{"x":620,"y":316.5563204457651},{"x":625,"y":-127.18914587765039},{"x":630,"y":392.75761539708196},{"x":635,"y":-76.2515150027665},{"x":640,"y":-370.16937880710657},{"x":645,"y":354.7081532685521},{"x":650,"y":-36.16181653373184},{"x":655,"y":-336.31767745004333},{"x":660,"y":333.8328989341885},{"x":665,"y":173.27258851853128},{"x":670,"y":-428.61246323824975},{"x":675,"y":403.1447224029912},{"x":680,"y":-321.1287437974768},{"x":685,"y":408.2359964841921},{"x":690,"y":32.56865013366087},{"x":695,"y":377.06871354722773},{"x":700,"y":245.11898020113927},{"x":705,"y":59.41792999797781},{"x":710,"y":-145.57473164104653},{"x":715,"y":-354.4527580270309},{"x":720,"y":-176.63326092581946},{"x":725,"y":107.30468537700256},{"x":730,"y":-346.34103759216293},{"x":735,"y":87.46668254543067},{"x":740,"y":338.74010117120076},{"x":745,"y":-223.0445132798842},{"x":750,"y":-419.6574256472194},{"x":755,"y":-409.6950883844359},{"x":760,"y":413.237893362417},{"x":765,"y":-430.9821266357417},{"x":770,"y":82.77536060750276},{"x":775,"y":225.90644399336225},{"x":780,"y":-321.68060833153356},{"x":785,"y":-153.10571147183214},{"x":790,"y":116.1520034250234},{"x":795,"y":-252.20893388010902},{"x":800,"y":-412.38792164098606},{"x":805,"y":35.31571307538161},{"x":810,"y":139.68751753825597},{"x":815,"y":5.88048135721084},{"x":820,"y":36.434541148492144},{"x":825,"y":-248.197344993617},{"x":830,"y":411.4112779705981},{"x":835,"y":290.6087296721622},{"x":840,"y":-236.4848783152338},{"x":845,"y":370.49265983652276},{"x":850,"y":-24.162915619454054},{"x":855,"y":200.92626618411225},{"x":860,"y":-47.05830489825422},{"x":865,"y":-110.95520891063006},{"x":870,"y":-203.82427127837133},{"x":875,"y":-165.6608344024193},{"x":880,"y":321.6910541029214},{"x":885,"y":441.1671955887257},{"x":890,"y":284.4282275064986},{"x":895,"y":286.5683518737902},{"x":900,"y":489.72987660600006},{"x":905,"y":-149.47490373556474},{"x":910,"y":-166.17541751145427},{"x":915,"y":59.02664683197395},{"x":920,"y":23.692413993808827},{"x":925,"y":-149.47137069494687},{"x":930,"y":223.2359472103069},{"x":935,"y":-74.87608823878224},{"x":940,"y":390.60153546516995},{"x":945,"y":321.9857714043328},{"x":950,"y":-495.8058004402477},{"x":955,"y":140.02387524938138},{"x":960,"y":6.923257670111241},{"x":965,"y":385.8484080640594},{"x":970,"y":264.06444524891003},{"x":975,"y":488.4939700203754},{"x":980,"y":-366.71148478662775},{"x":985,"y":82.16090773513486},{"x":990,"y":298.98169322897456},{"x":995,"y":-97.38444271069625}],[{"x":0,"y":70.92866795588623},{"x":5,"y":-33.25019381999168},{"x":10,"y":-19.27279533700596},{"x":15,"y":-9.156055385032218},{"x":20,"y":20.627657633569612},{"x":25,"y":-55.2490364316315},{"x":30,"y":5.710840525578348},{"x":35,"y":116.94840142296908},{"x":40,"y":20.75619314587243},{"x":45,"y":188.60867892069916},{"x":50,"y":113.14220226213968},{"x":55,"y":193.53332830146286},{"x":60,"y":-79.9254275819806},{"x":65,"y":68.82674027670663},{"x":70,"y":181.22474955668923},{"x":75,"y":162.1273744113634},{"x":80,"y":120.78509282233824},{"x":85,"y":-37.829357683720424},{"x":90,"y":29.914397697120876},{"x":95,"y":46.87388786795145},{"x":100,"y":-6.895799228212638},{"x":105,"y":182.39304734224856},{"x":110,"y":127.14240578238528},{"x":115,"y":196.82490609352539},{"x":120,"y":194.63875439132306},{"x":125,"y":103.98088173124287},{"x":130,"y":-23.370213708359856},{"x":135,"y":58.468360690689906},{"x":140,"y":106.78753054820962},{"x":145,"y":141.4506428514553},{"x":150,"y":40.56936602352812},{"x":155,"y":140.54577608145794},{"x":160,"y":185.8674117553607},{"x":165,"y":39.169792775882},{"x":170,"y":76.33200260162243},{"x":175,"y":-36.17085192655986},{"x":180,"y":-84.56924763301265},{"x":185,"y":24.539783108617684},{"x":190,"y":-44.60290369086979},{"x":195,"y":-74.3022257678803},{"x":200,"y":97.15032981763414},{"x":205,"y":95.62181055104006},{"x":210,"y":-15.923721942001663},{"x":215,"y":159.75153772573907},{"x":220,"y":170.30528746653255},{"x":225,"y":14.279716804630908},{"x":230,"y":7.17673502781318},{"x":235,"y":48.01990293993455},{"x":240,"y":196.30539514082602},{"x":245,"y":-94.36374501855195},{"x":250,"y":-97.62706227828917},{"x":255,"y":-59.852777311828476},{"x":260,"y":52.88482608442837},{"x":265,"y":87.44367960288093},{"x":270,"y":83.15094069834484},{"x":275,"y":186.59555478475772},{"x":280,"y":-57.573687467055976},{"x":285,"y":-51.815054475988795},{"x":290,"y":68.31981101638482},{"x":295,"y":-36.83313548021629},{"x":300,"y":59.966843407402195},{"x":305,"y":-76.93802700967589},{"x":310,"y":95.20158101100807},{"x":315,"y":144.03782921728398},{"x":320,"y":-90.87702995456408},{"x":325,"y":164.322842970725},{"x":330,"y":53.04160219744617},{"x":335,"y":45.86913357124425},{"x":340,"y":-13.956611177206241},{"x":345,"y":79.96804647938882},{"x":350,"y":68.8526675709615},{"x":355,"y":4.495693028848223},{"x":360,"y":99.52919524925022},{"x":365,"y":149.79597506501224},{"x":370,"y":-21.714123508605397},{"x":375,"y":81.77043240387934},{"x":380,"y":-11.524336921770455},{"x":385,"y":-4.725252811303221},{"x":390,"y":136.92549087818622},{"x":395,"y":100.12817703904602},{"x":400,"y":-8.056009710411786},{"x":405,"y":-67.64463820483171},{"x":410,"y":198.13207120981156},{"x":415,"y":97.0528438629664},{"x":420,"y":161.67177122752474},{"x":425,"y":48.56366040464002},{"x":430,"y":-87.08878266237897},{"x":435,"y":198.35799418304765},{"x":440,"y":68.59658881767828},{"x":445,"y":192.1225328560957},{"x":450,"y":94.79764763403259},{"x":455,"y":65.94354068310608},{"x":460,"y":46.427873887982486},{"x":465,"y":-29.85891742663324},{"x":470,"y":129.18068173584825},{"x":475,"y":178.7915223308869},{"x":480,"y":143.852225991992},{"x":485,"y":-31.82738624757482},{"x":490,"y":13.910738250149322},{"x":495,"y":111.47797076890441},{"x":500,"y":6.914183178631234},{"x":505,"y":84.90853569663173},{"x":510,"y":-67.96804872322737},{"x":515,"y":-16.623934193261164},{"x":520,"y":86.94672459367789},{"x":525,"y":29.53712576133151},{"x":530,"y":-44.82307012904947},{"x":535,"y":-35.83184265862009},{"x":540,"y":28.586133835746352},{"x":545,"y":-39.98531418415461},{"x":550,"y":70.47171634144584},{"x":555,"y":15.792603636886653},{"x":560,"y":-51.82626654493354},{"x":565,"y":-25.714751261275538},{"x":570,"y":-9.190227135919343},{"x":575,"y":158.99442285617954},{"x":580,"y":105.68609457604356},{"x":585,"y":-14.09691743710313},{"x":590,"y":77.08701141772184},{"x":595,"y":87.42685323845635},{"x":600,"y":89.44608435192279},{"x":605,"y":5.658854191179927},{"x":610,"y":-29.14866385267743},{"x":615,"y":172.560711227129},{"x":620,"y":48.88677283971731},{"x":625,"y":73.97341697005606},{"x":630,"y":78.40955167898309},{"x":635,"y":190.15605357688736},{"x":640,"y":-66.7771535893624},{"x":645,"y":2.024580179842488},{"x":650,"y":133.97285274958358},{"x":655,"y":136.53753476166779},{"x":660,"y":39.37058531012107},{"x":665,"y":112.77149170512237},{"x":670,"y":182.44586423402325},{"x":675,"y":124.95631045561973},{"x":680,"y":-98.13872172763172},{"x":685,"y":38.478422956676866},{"x":690,"y":-22.915963801676327},{"x":695,"y":147.88697628441588},{"x":700,"y":131.62388843803296},{"x":705,"y":36.93063991819406},{"x":710,"y":-75.00908882249485},{"x":715,"y":-82.60509219376624},{"x":720,"y":10.90065609018096},{"x":725,"y":27.178274642745777},{"x":730,"y":165.8297477485806},{"x":735,"y":197.15181227325292},{"x":740,"y":50.11982010904859},{"x":745,"y":170.03425928356938},{"x":750,"y":124.77147407642116},{"x":755,"y":-86.32633373846747},{"x":760,"y":148.14452947432073},{"x":765,"y":-82.14367905637286},{"x":770,"y":-2.9912073326163124},{"x":775,"y":-30.85696400771066},{"x":780,"y":176.88996226628564},{"x":785,"y":136.05442100043246},{"x":790,"y":-19.706708339478965},{"x":795,"y":173.0593529087961},{"x":800,"y":-17.411037333354457},{"x":805,"y":-6.415797727461296},{"x":810,"y":-45.99393340692086},{"x":815,"y":137.22856367852617},{"x":820,"y":67.40856323519822},{"x":825,"y":185.9461269939613},{"x":830,"y":167.01273388358118},{"x":835,"y":175.28852406205186},{"x":840,"y":84.4076421398899},{"x":845,"y":151.72127881860115},{"x":850,"y":-71.49275601907989},{"x":855,"y":0.061261133304626014},{"x":860,"y":-17.03036951411285},{"x":865,"y":10.201700540901086},{"x":870,"y":-57.10644306936863},{"x":875,"y":140.8816386974169},{"x":880,"y":41.21003855638378},{"x":885,"y":-11.090478193921726},{"x":890,"y":99.25025848158077},{"x":895,"y":-29.285367396764173},{"x":900,"y":181.756888923713},{"x":905,"y":44.47193722955225},{"x":910,"y":108.27770530046931},{"x":915,"y":160.72971062707097},{"x":920,"y":34.95251458599867},{"x":925,"y":69.25040187839897},{"x":930,"y":29.297745819087623},{"x":935,"y":167.6944115342858},{"x":940,"y":-92.20284459891302},{"x":945,"y":97.29685359756394},{"x":950,"y":116.7303253982125},{"x":955,"y":30.15086544063388},{"x":960,"y":169.67048586934612},{"x":965,"y":-16.936286068211245},{"x":970,"y":156.20409137101268},{"x":975,"y":-71.05044777954251},{"x":980,"y":166.9822238349526},{"x":985,"y":97.58113857372692},{"x":990,"y":120.77806723416782},{"x":995,"y":-75.42220309466322}],[{"x":0,"y":-12.376901421372906},{"x":5,"y":-390.1293318947567},{"x":10,"y":-304.6342660443929},{"x":15,"y":-41.98719072109833},{"x":20,"y":-9.81837564280886},{"x":25,"y":-27.600667657240763},{"x":30,"y":-260.60045658424326},{"x":35,"y":-492.86720009852434},{"x":40,"y":-404.1432617442631},{"x":45,"y":-332.0332987920762},{"x":50,"y":-69.63864534199394},{"x":55,"y":-142.0140204252972},{"x":60,"y":-126.04923814811485},{"x":65,"y":-366.35405934587595},{"x":70,"y":-10.91452125074187},{"x":75,"y":-319.8136052581467},{"x":80,"y":-414.39513579019115},{"x":85,"y":-302.8948687792454},{"x":90,"y":-178.56308211004313},{"x":95,"y":-457.42519943279905},{"x":100,"y":-126.78550094330467},{"x":105,"y":-295.556983270548},{"x":110,"y":-32.2737304695936},{"x":115,"y":-178.13204273309702},{"x":120,"y":-266.4639028931754},{"x":125,"y":-498.34195317113273},{"x":130,"y":-95.82883513992044},{"x":135,"y":-134.58288723146728},{"x":140,"y":-413.831745171381},{"x":145,"y":-284.49302026610394},{"x":150,"y":-92.97999952586014},{"x":155,"y":-51.14076536217681},{"x":160,"y":-265.458037133546},{"x":165,"y":-486.58805586302253},{"x":170,"y":-143.02154979324058},{"x":175,"y":-64.83920460202484},{"x":180,"y":-19.38146168276046},{"x":185,"y":-383.63185341471126},{"x":190,"y":-138.05192773999818},{"x":195,"y":-89.72078898209344},{"x":200,"y":-237.8386774339353},{"x":205,"y":-35.102804717118374},{"x":210,"y":-470.45318708400663},{"x":215,"y":-114.22489581612984},{"x":220,"y":-176.7610731634195},{"x":225,"y":-146.72016147921687},{"x":230,"y":-63.52569007894658},{"x":235,"y":-46.739235053093296},{"x":240,"y":-258.9572796614699},{"x":245,"y":-175.43495239969644},{"x":250,"y":-180.0119473495859},{"x":255,"y":-295.3999975887933},{"x":260,"y":-46.73414857195013},{"x":265,"y":-150.40101422430075},{"x":270,"y":-431.25276795378255},{"x":275,"y":-208.69649965163984},{"x":280,"y":-189.38621134901666},{"x":285,"y":-465.29912116244145},{"x":290,"y":-157.43779046258123},{"x":295,"y":-427.41492320227104},{"x":300,"y":-190.42109874078818},{"x":305,"y":-460.7369343490566},{"x":310,"y":-415.7727306968211},{"x":315,"y":-65.65934012496268},{"x":320,"y":-224.29088494466322},{"x":325,"y":-132.4067937304025},{"x":330,"y":-354.51299374327306},{"x":335,"y":-35.25355836172383},{"x":340,"y":-277.6740123752154},{"x":345,"y":-158.25286010717844},{"x":350,"y":-439.9697498825947},{"x":355,"y":-199.16554738003032},{"x":360,"y":-154.25407941357537},{"x":365,"y":-483.15787337444016},{"x":370,"y":-362.1246256346086},{"x":375,"y":-231.0924331300742},{"x":380,"y":-107.01082588083466},{"x":385,"y":-123.43538844035476},{"x":390,"y":-36.40582629100453},{"x":395,"y":-468.30817795750954},{"x":400,"y":-259.7178982085793},{"x":405,"y":-1.9155168186046012},{"x":410,"y":-468.56361709072814},{"x":415,"y":-428.1597692965108},{"x":420,"y":-179.99625872335235},{"x":425,"y":-128.1860677587602},{"x":430,"y":-483.6372421450325},{"x":435,"y":-77.29480769915062},{"x":440,"y":-80.7390504807135},{"x":445,"y":-140.76320170549548},{"x":450,"y":-274.3680926265768},{"x":455,"y":-452.6935176896477},{"x":460,"y":-0.5158218942628991},{"x":465,"y":-266.2231716476341},{"x":470,"y":-314.25487671519136},{"x":475,"y":-484.08428214740195},{"x":480,"y":-232.350937421577},{"x":485,"y":-385.1694975431007},{"x":490,"y":-171.62814633955304},{"x":495,"y":-340.3832108550955},{"x":500,"y":-329.4436309195846},{"x":505,"y":-62.48838466544004},{"x":510,"y":-312.11793303687574},{"x":515,"y":-30.105886197217785},{"x":520,"y":-67.13942557942545},{"x":525,"y":-158.76483212448989},{"x":530,"y":-74.95060797922957},{"x":535,"y":-160.88586571785203},{"x":540,"y":-404.0098639927138},{"x":545,"y":-240.80974388825894},{"x":550,"y":-295.7591545725983},{"x":555,"y":-470.96615483881976},{"x":560,"y":-343.1299805574681},{"x":565,"y":-64.71689525630188},{"x":570,"y":-318.89669417848177},{"x":575,"y":-440.5771384595011},{"x":580,"y":-367.7392774998708},{"x":585,"y":-359.27708092998023},{"x":590,"y":-43.64416103807389},{"x":595,"y":-30.65891496502894},{"x":600,"y":-223.42167315438422},{"x":605,"y":-311.83213649266173},{"x":610,"y":-419.6094611636285},{"x":615,"y":-97.58009940150635},{"x":620,"y":-6.582041948100084},{"x":625,"y":-54.71738056497935},{"x":630,"y":-164.84741292402992},{"x":635,"y":-169.08747531714232},{"x":640,"y":-224.17376480893302},{"x":645,"y":-211.27092262949645},{"x":650,"y":-325.68305532912314},{"x":655,"y":-290.57557689337466},{"x":660,"y":-80.26762503507734},{"x":665,"y":-82.65029371629049},{"x":670,"y":-108.53308672225103},{"x":675,"y":-326.4943067144156},{"x":680,"y":-170.9449787841777},{"x":685,"y":-312.2357533238061},{"x":690,"y":-358.472672391797},{"x":695,"y":-193.17837569047424},{"x":700,"y":-478.4058397639948},{"x":705,"y":-83.41646511905299},{"x":710,"y":-17.073338866004065},{"x":715,"y":-219.97597100343893},{"x":720,"y":-255.38008348571438},{"x":725,"y":-117.259148363973},{"x":730,"y":-128.30030944561355},{"x":735,"y":-123.34878921632372},{"x":740,"y":-158.25617480192733},{"x":745,"y":-361.9139995493227},{"x":750,"y":-327.3136129597193},{"x":755,"y":-53.74795472561402},{"x":760,"y":-34.49165824029279},{"x":765,"y":-141.85075343166244},{"x":770,"y":-32.35140236568333},{"x":775,"y":-62.235213834038404},{"x":780,"y":-210.4088764959833},{"x":785,"y":-491.77619420795236},{"x":790,"y":-318.1307717853524},{"x":795,"y":-274.9588920464081},{"x":800,"y":-417.9587374167859},{"x":805,"y":-193.52890097638743},{"x":810,"y":-373.0586082181423},{"x":815,"y":-405.0829356138088},{"x":820,"y":-232.71563632777327},{"x":825,"y":-38.76224633908612},{"x":830,"y":-21.80933950011257},{"x":835,"y":-377.170494565328},{"x":840,"y":-422.0079136373547},{"x":845,"y":-466.6253852382682},{"x":850,"y":-447.13679008527873},{"x":855,"y":-402.2864365783944},{"x":860,"y":-46.29335359483599},{"x":865,"y":-132.31967414865352},{"x":870,"y":-103.29008363675553},{"x":875,"y":-271.46142662424455},{"x":880,"y":-460.20719097681194},{"x":885,"y":-418.75107990866724},{"x":890,"y":-448.9274270991456},{"x":895,"y":-406.5895199836104},{"x":900,"y":-176.6847853150628},{"x":905,"y":-308.8683633092121},{"x":910,"y":-95.39339461572416},{"x":915,"y":-366.14834903355757},{"x":920,"y":-476.62961140270767},{"x":925,"y":-87.01833817129778},{"x":930,"y":-29.61732881999501},{"x":935,"y":-196.95528562442541},{"x":940,"y":-360.390253557445},{"x":945,"y":-421.85635466670556},{"x":950,"y":-375.25942658793866},{"x":955,"y":-281.80819582620234},{"x":960,"y":-91.86187800017717},{"x":965,"y":-418.5815885207265},{"x":970,"y":-176.56989847290038},{"x":975,"y":-408.71243541277295},{"x":980,"y":-57.488435097416755},{"x":985,"y":-389.5512283735236},{"x":990,"y":-385.5048307914546},{"x":995,"y":-460.8443179503753}]]
    var bandPos = [-1, -1];
    var pos;
    var colors = d3.scaleOrdinal(d3.schemeCategory10);

//initialized when data is pulled
    var x, y, xDomain, yDomain, xDomainMin, yDomainMin, xAxis, yAxis, zoomArea, line;
    xDomain = 0;
    yDomain = 0;
    xDomainMin = 0;
    yDomainMin = 0;

var margin = {
      top: 40,
      right: 40,
      bottom: 50,
      left: 60
    }
    var width = 900 - margin.left - margin.right;
    var height = 450 - margin.top - margin.bottom;
    var drag = d3.drag();

var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("clipPath")
      .attr("id", "clip")
      .append("rect")
      .attr("width", width)
      .attr("height", height);

var zoomOverlay = svg.append("rect")
      .attr("width", width - 10)
      .attr("height", height)
      .attr("class", "zoomOverlay")
      .call(drag);

var band = svg.append("rect")
      .attr("width", 0)
      .attr("height", 0)
      .attr("x", 0)
      .attr("y", 0)
      .attr("class", "band");

var zoomout = svg.append("g");

drag.on("end", function() {
      var pos = d3.mouse(this);
      var x1 = x.invert(bandPos[0]);
      var x2 = x.invert(pos[0]);

if (x1 < x2) {
        zoomArea.x1 = x1;
        zoomArea.x2 = x2;
      } else {
        zoomArea.x1 = x2;
        zoomArea.x2 = x1;
      }

var y1 = y.invert(pos[1]);
      var y2 = y.invert(bandPos[1]);

if (x1 < x2) {
        zoomArea.y1 = y1;
        zoomArea.y2 = y2;
      } else {
        zoomArea.y1 = y2;
        zoomArea.y2 = y1;
      }

bandPos = [-1, -1];

d3.select(".band").transition()
        .attr("width", 0)
        .attr("height", 0)
        .attr("x", bandPos[0])
        .attr("y", bandPos[1]);

zoom();

});

drag.on("drag", function() {

var pos = d3.mouse(this);

if (pos[0] < bandPos[0]) {
        d3.select(".band").
        attr("transform", "translate(" + (pos[0]) + "," + bandPos[1] + ")");
      }
      if (pos[1] < bandPos[1]) {
        d3.select(".band").
        attr("transform", "translate(" + (pos[0]) + "," + pos[1] + ")");
      }
      if (pos[1] < bandPos[1] && pos[0] > bandPos[0]) {
        d3.select(".band").
        attr("transform", "translate(" + (bandPos[0]) + "," + pos[1] + ")");
      }

//set new position of band when user initializes drag
      if (bandPos[0] == -1) {
        bandPos = pos;
        d3.select(".band").attr("transform", "translate(" + bandPos[0] + "," + bandPos[1] + ")");
      }

d3.select(".band").transition().duration(1)
        .attr("width", Math.abs(bandPos[0] - pos[0]))
        .attr("height", Math.abs(bandPos[1] - pos[1]));
    });

function zoom() {
      //recalculate domains
      if (zoomArea.x1 > zoomArea.x2) {
        x.domain([zoomArea.x2, zoomArea.x1]);
      } else {
        x.domain([zoomArea.x1, zoomArea.x2]);
      }

if (zoomArea.y1 > zoomArea.y2) {
        y.domain([zoomArea.y2, zoomArea.y1]);
      } else {
        y.domain([zoomArea.y1, zoomArea.y2]);
      }

//update axis and redraw lines
      var t = svg.transition().duration(750);
      t.select(".x.axis").call(xAxis);
      t.select(".y.axis").call(yAxis);
      t.selectAll(".line").attr("d", line);

}

function pullData() {
      var input;
      var data = [];
      xDomain = 0;
      yDomain = 0;
      yDomainMin = 0;
      xDomainMin = 0;

d3.json("https://gist.github.com/jroetman/9b4c0599a4996edef0ab/raw/c9a433b3e7ea90618be913dd15fbba323e78ea91/testData.json", function(res) {
        input = res
        if (Array.isArray(input)) {
          updateChart(input);
        }
      });
    }

function updateChart(data) {
      var xmax, ymax, xmin, ymin;

d3.selectAll('.line').remove();
      d3.selectAll(".axis").remove();

data.forEach((da, idx) => {
        xmax = da.map(d => d.x).reduce((a, c) => Math.max(a, c))
        ymax = da.map(d => d.y).reduce((a, c) => Math.max(a, c))

xmin = da.map(d => d.x).reduce((a, c) => Math.min(a, c))
        ymin = da.map(d => d.y).reduce((a, c) => Math.min(a, c))

xDomain = Math.max(xDomain, xmax);
        yDomain = Math.max(yDomain, ymax);
        xDomainMin = Math.min(xDomainMin, xmin);
        yDomainMin = Math.min(yDomainMin, ymin);
      })
      xDomain += xDomain * .10;
      yDomain += yDomain * .10;
      xDomainMin += xDomainMin * .10;
      yDomainMin += yDomainMin * .10;

line = d3.line()
        .x(function(d) {
          return x(d.x);
        })
        .y(function(d) {
          return y(d.y);
        });

zoomArea = {
        x1: xDomainMin,
        y1: yDomainMin,
        x2: xDomain,
        y2: yDomain
      };

x = d3.scaleLinear().range([0, width]).domain([xDomainMin, xDomain]);
      y = d3.scaleLinear().range([height, 0]).domain([yDomainMin, yDomain]);

xAxis = d3.axisBottom(x)
      yAxis = d3.axisLeft(y)

//UPDATE AXES
      svg.append("g")
        .attr("class", "x axis")
        .call(xAxis)
        .attr("transform", "translate(0," + height + ")");

svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)

data.forEach((da, idx) => {
        svg.append("path")
          .datum(da)
          .attr("class", "line line" + idx)
          .attr("clip-path", "url(#clip)")
          .style("stroke", colors(idx))
          .attr("d", line);
      })

d3.select(".band").raise();

zoom();
    }

var zoomOut = function() {
      x.domain([xDomainMin, xDomain]);
      y.domain([yDomainMin, yDomain]);

var t = svg.transition().duration(750);
      t.select(".x.axis").call(xAxis);
      t.select(".y.axis").call(yAxis);

t.selectAll(".line").attr("d", line);
    }
    updateChart(data);
  </script>
</body>
</html>

https://d3js.org/d3.v4.min.js