Introduce chart left to right demo

<!DOCTYPE html>
<meta charset="utf-8">
<style>
 
svg {
  font: 10px sans-serif;
}
 
.line {
  fill: none;
  stroke: #0066FF;
  stroke-width: 3.5px;
}
 
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

h1 {
font-family:helvetica neue;
}

.y.axis { font-family: sans-serif; font-size: 20px; }
 
</style>
<body>
<h1>135,330,120 clicks on our client's campaigns in 2013</h1>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var data = [553672,
626023,
404467,
325756,
399585,
374168,
311477,
320624,
337161,
321094,
280684,
390855,
422791,
433126,
327826,
344636,
346588,
378701,
437265,
427807,
350518,
332586,
342963,
320510,
305064,
390883,
394665,
358944,
387024,
393851,
379535,
344658,
409317,
437981,
386410,
363412,
384581,
374330,
348301,
366788,
403753,
402186,
368865,
381656,
352761,
346346,
363903,
390527,
386553,
356947,
428834,
386484,
351992,
400338,
415884,
398865,
370020,
377716,
372311,
332145,
395260,
423626,
375384,
362238,
408824,
374577,
367980,
449482,
440343,
381030,
394610,
408472,
377185,
379824,
450156,
444622,
388900,
408993,
416397,
425468,
534608,
664390,
487976,
437760,
572469,
522363,
462161,
509417,
534952,
391387,
374928,
427847,
406659,
386792,
367014,
413266,
391036,
374139,
388989,
389857,
375995,
331435,
349055,
338909,
335862,
339799,
359215,
333682,
303893,
302075,
331758,
347650,
364729,
351807,
333804,
307639,
309811,
280235,
334660,
319503,
284878,
265599,
281121,
268209,
210400,
255311,
312294,
327881,
312064,
300020,
289839,
277386,
322488,
379337,
382207,
343395,
344619,
290653,
256312,
327460,
342382,
327399,
320065,
380907,
338654,
234937,
324303,
489880,
374908,
352615,
353000,
302337,
262511,
305803,
305377,
337485,
321456,
390367,
368307,
248425,
340259,
451888,
406020,
354665,
404715,
493970,
276839,
336747,
354305,
441169,
411875,
537974,
537293,
350743,
389662,
667656,
345471,
339260,
349611,
294183,
264862,
335111,
284468,
271463,
252800,
222487,
198833,
186985,
235237,
234448,
238546,
218376,
211837,
185890,
196842,
280810,
273202,
262798,
260802,
308091,
347038,
242954,
290846,
340715,
348313,
474915,
659873,
592323,
326646,
415194,
403143,
386907,
337069,
349042,
395350,
317796,
361224,
445624,
329891,
266778,
265539,
285109,
289905,
332994,
316084,
322227,
315827,
309502,
264222,
250117,
324060,
334377,
337006,
328770,
302502,
302602,
237099,
258146,
396282,
413520,
409280,
371714,
330254,
309700,
395745,
378305,
358494,
323715,
410982,
317182,
302088,
378839,
378098,
346152,
334683,
387387,
336086,
304004,
327321,
347458,
346633,
338474,
346852,
345079,
294086,
352127,
353864,
411440,
395464,
395360,
420169,
418291,
511183,
436275,
445209,
656392,
575337,
1207107,
577985,
590220,
442073,
537787,
542609,
756159,
1194606,
744050,
627419,
445659,
429204,
395684,
398105,
486457,
501008,
533887,
472853,
473385,
426022,
461803,
500456,
451213,
468435,
440903,
467996,
357939,
353162,
433483,
317172,
335177,
374969,
395053,
394465,
426082,
399839,
347983,
337600,
375561,
414266,
380393,
474926,
441650,
359324,
344692,
401966,
396800,
342165,
295551,
315111,
313151,
305143,
322248,
313584,
285907,
304275,
321269,
293012,
286201,
319631,
336180,
366503,
283462,
291153,
258760,
252357,
274358,
267071,
229167,
242720,
283566,
254186,
243463,
267161,
300014,
255528,
269258,
303232,
233235,
285130,
296931,
277288,
371855,
434418,
437144,
392856,
379740,
474902];

// redraw the line, and slide it to the left
  path
    .transition()
      .duration(40000)
      .ease("linear")
      .attr("transform", "translate("  +((800-(width*4)))  +  ",0)");
     
 
xaxis.transition()
.duration(40000)
.ease("linear")
.attr("transform", "translate(" + x(-293)+ "," + height + ")");
     
 
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

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