Skip to content

Instantly share code, notes, and snippets.

@danharr

danharr/index.html

Last active August 29, 2015 13:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danharr/9938594 to your computer and use it in GitHub Desktop.
Save danharr/9938594 to your computer and use it in GitHub Desktop.
Download ZIP
Introduce chart left to right demo
Raw
index.html
<!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="http://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];
var margin = {top: 20, right: 60, bottom: 20, left: 120},
width = 1200 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var mindate = new Date(2013,0,1),
maxdate = new Date(2013,10,31);
var x = d3.scale.linear()
.domain([0, 364])
.range([0, width*4]);
var x2 = d3.time.scale()
.domain([mindate, maxdate])
.range([0, width*4]);
var y = d3.scale.linear()
.domain([0, 1200000])
.range([height, 0]);
var line = d3.svg.line()
.interpolate("basis")
.x(function(d, i) { return x(i); })
.y(function(d, i) { return y(d); });
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("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
svg.append("g")
.attr("class", "y axis")
.call(d3.svg.axis().scale(y).orient("left").ticks(8));
var xaxis = svg.append("g")
.attr("class", "x axis")
.call(d3.svg.axis().scale(x2).orient("bottom").ticks(52))
.attr("transform", "translate(0," + height + ")");
var path = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line)
.attr("transform", "translate(" + x2(mindate) + ",0)");
// 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment