okwolf/d3-fullscreen-live-chart.html

## d3-fullscreen-live-chart.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no" />
  <title></title>
  <style>

  * {
    margin: 0;
    padding: 0;
  }

  html, body {
    overflow-x: hidden;
  }

  body {
    position: relative
  }

  svg {
    font: .75em sans-serif;
  }

  .line {
    fill: none;
    stroke: #000;
    stroke-width: .15em;
  }

  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

  </style>
</head>
<body>

<script src="//d3js.org/d3.v3.min.js"></script>

<script>(function(d3, window) {

var n = 50,
  duration = 500,
  now = new Date(Date.now() - duration),
  data = d3.range(n).map(function() {
    return 0;
  }),
  random = d3.random.normal(100, 50),
  aspectRadio = 16 / 9,
  margin = {
    top: 5,
    right: 35,
    bottom: 15,
    left: 0
  };

function redraw() {
  // redraw the line
  svg.select(".line")
    .attr("d", line)
    .attr("transform", null);

  // update axes
  xAxis.call(x.axis);
  yAxis.call(y.axis);
}

function updateDimensions() {
  var svgParent = svg.node().parentElement;
  width = svgParent.offsetWidth - margin.left - margin.right - 1;
  var maxHeight = window.innerHeight - margin.top - margin.bottom,
    ratioHeight = width / aspectRadio;
  height = maxHeight;

  svg.attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .style("margin-left", -margin.left)
    .style("margin-top", -margin.top);
  svg.select("defs").remove();
  svg.append("defs").append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("width", width)
    .attr("height", height);

  // update axes
  x.range([0, width]);
  y.range([height, 0]);
  x.axis.ticks(d3.time.second, Math.ceil(width / -100 + 15));
  xAxis.attr("transform", "translate(0," + height + ")");
  yAxis.attr("transform", "translate(" + width + ",0)");

  redraw();
}

var width, height,
  svg = d3.select("body").append("p").append("svg"),
  x = d3.time.scale().domain([now - (n - 2) * duration, now - duration]),
  y = d3.scale.linear().domain([0, 0]);

var line = d3.svg.line()
  .interpolate("basis")
  .x(function(d, i) {
    return x(now - (n - 1 - i) * duration);
  })
  .y(function(d, i) {
    return y(d);
  });

var xAxis = svg.append("g")
  .attr("class", "x axis")
  .call(x.axis = d3.svg.axis().scale(x).orient("bottom"));

var yAxis = svg.append("g")
  .attr("class", "y axis")
  .call(y.axis = d3.svg.axis().scale(y).orient("right"));

var path = svg.append("g")
  .attr("clip-path", "url(#clip)")
  .append("path")
  .datum(data)
  .attr("class", "line");

var transition = d3.select({}).transition()
  .duration(duration)
  .ease("linear");

window.addEventListener('resize', updateDimensions);

(function tick() {
  transition = transition.each(function() {

    // update the domains
    now = new Date();
    x.domain([now - (n - 2) * duration, now - duration]);
    y.domain([0, d3.max(data)]);

    // push the next random value
    var nextValue = Math.ceil(random());
    data.push(nextValue);

    updateDimensions();

    // animate line move
    path.transition()
      .attr("transform", "translate(" + x(now - (n - 1) * duration) + ")");

    // pop the old data point off the front
    data.shift();

  }).transition().each("start", tick);
})();

})(d3, window)

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no" />
	<title></title>
	<style>

	* {
	margin: 0;
	padding: 0;
	}

	html, body {
	overflow-x: hidden;
	}

	body {
	position: relative
	}

	svg {
	font: .75em sans-serif;
	}

	.line {
	fill: none;
	stroke: #000;
	stroke-width: .15em;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	</style>
	</head>
	<body>

	<script src="//d3js.org/d3.v3.min.js"></script>

	<script>(function(d3, window) {

	var n = 50,
	duration = 500,
	now = new Date(Date.now() - duration),
	data = d3.range(n).map(function() {
	return 0;
	}),
	random = d3.random.normal(100, 50),
	aspectRadio = 16 / 9,
	margin = {
	top: 5,
	right: 35,
	bottom: 15,
	left: 0
	};

	function redraw() {
	// redraw the line
	svg.select(".line")
	.attr("d", line)
	.attr("transform", null);

	// update axes
	xAxis.call(x.axis);
	yAxis.call(y.axis);
	}

	function updateDimensions() {
	var svgParent = svg.node().parentElement;
	width = svgParent.offsetWidth - margin.left - margin.right - 1;
	var maxHeight = window.innerHeight - margin.top - margin.bottom,
	ratioHeight = width / aspectRadio;
	height = maxHeight;

	svg.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.style("margin-left", -margin.left)
	.style("margin-top", -margin.top);
	svg.select("defs").remove();
	svg.append("defs").append("clipPath")
	.attr("id", "clip")
	.append("rect")
	.attr("width", width)
	.attr("height", height);

	// update axes
	x.range([0, width]);
	y.range([height, 0]);
	x.axis.ticks(d3.time.second, Math.ceil(width / -100 + 15));
	xAxis.attr("transform", "translate(0," + height + ")");
	yAxis.attr("transform", "translate(" + width + ",0)");

	redraw();
	}

	var width, height,
	svg = d3.select("body").append("p").append("svg"),
	x = d3.time.scale().domain([now - (n - 2) * duration, now - duration]),
	y = d3.scale.linear().domain([0, 0]);

	var line = d3.svg.line()
	.interpolate("basis")
	.x(function(d, i) {
	return x(now - (n - 1 - i) * duration);
	})
	.y(function(d, i) {
	return y(d);
	});

	var xAxis = svg.append("g")
	.attr("class", "x axis")
	.call(x.axis = d3.svg.axis().scale(x).orient("bottom"));

	var yAxis = svg.append("g")
	.attr("class", "y axis")
	.call(y.axis = d3.svg.axis().scale(y).orient("right"));

	var path = svg.append("g")
	.attr("clip-path", "url(#clip)")
	.append("path")
	.datum(data)
	.attr("class", "line");

	var transition = d3.select({}).transition()
	.duration(duration)
	.ease("linear");

	window.addEventListener('resize', updateDimensions);

	(function tick() {
	transition = transition.each(function() {

	// update the domains
	now = new Date();
	x.domain([now - (n - 2) * duration, now - duration]);
	y.domain([0, d3.max(data)]);

	// push the next random value
	var nextValue = Math.ceil(random());
	data.push(nextValue);

	updateDimensions();

	// animate line move
	path.transition()
	.attr("transform", "translate(" + x(now - (n - 1) * duration) + ")");

	// pop the old data point off the front
	data.shift();

	}).transition().each("start", tick);
	})();

	})(d3, window)

	</script>

	</body>
	</html>