afonsomota/main.js

## main.js
var http = require('http'),
    five = require('johnny-five'),
    board = new five.Board(),
    server = http.createServer().listen(8000), //I donnot serve the file (YET), run the HTML file directly
    io = require('socket.io')(server);

var values = [];

board.on('ready',function(){
  console.log('ready');

  var lux = new five.Sensor('A0'),
  var i = 1;

  lux.on('data',function(){
    values.push({
      x: i++,
      y: lux.raw
    });
    io.emit('values',values.slice(-300)); //300 is the amount of last samples to see
  });
});

## plot.html
<html>
  <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <script src="http://localhost:8000/socket.io/socket.io.js"></script>
    <script src="plot.js"></script>
  </head>
  <body>
    <svg id="visualisation" width="1000" height="500"></svg>
  </body>
</html>

## plot.js
// Note: Due to d3 capabilities I know this to be a really hammered solution, but works and does not flicker much.
// I soon will edit the code to make it more efficient.
// The plot function is from Jay Raj in http://www.sitepoint.com/creating-simple-line-bar-charts-using-d3-js/

var values = [];

function plot(lineData){
  var lineData = values;
  console.log(lineData)
  document.getElementById('visualisation').innerHTML="";
  var vis = d3.select('#visualisation'),
  WIDTH = 1000,
  HEIGHT = 500,
  MARGINS = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 50
  },
  xRange = d3.scale
  .linear()
  .range([MARGINS.left, WIDTH - MARGINS.right])
  .domain([d3.min(lineData, function(d) {
    return d.x;
    }), d3.max(lineData, function(d) {
    return d.x;
  })]),
  yRange = d3.scale
  .linear()
  .range([HEIGHT - MARGINS.top, MARGINS.bottom])
  .domain([d3.min(lineData, function(d) {
    return d.y;
    }), d3.max(lineData, function(d) {
    return d.y;
  })]),
  xAxis = d3.svg.axis()
  .scale(xRange)
  .tickSize(5)
  .tickSubdivide(true),
  yAxis = d3.svg.axis()
  .scale(yRange)
  .tickSize(5)
  .orient('left')
  .tickSubdivide(true);

  vis.append('svg:g')
  .attr('class', 'x axis')
  .attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')')
  .call(xAxis);

  vis.append('svg:g')
  .attr('class', 'y axis')
  .attr('transform', 'translate(' + (MARGINS.left) + ',0)')
  .call(yAxis);


  var lineFunc = d3.svg.line()
  .x(function(d) {
    return xRange(d.x);
  })
  .y(function(d) {
    return yRange(d.y);
  })
  .interpolate('linear');

  vis.append('svg:path')
  .attr('d', lineFunc(lineData))
  .attr('stroke', 'blue')
  .attr('stroke-width', 2)
  .attr('fill', 'none');
}

var socket = io("http://localhost:8000");

socket.on('values',function(vals){
  values = vals;
  plot(values);
  console.log("updated");
});
	var http = require('http'),
	five = require('johnny-five'),
	board = new five.Board(),
	server = http.createServer().listen(8000), //I donnot serve the file (YET), run the HTML file directly
	io = require('socket.io')(server);

	var values = [];

	board.on('ready',function(){
	console.log('ready');

	var lux = new five.Sensor('A0'),
	var i = 1;

	lux.on('data',function(){
	values.push({
	x: i++,
	y: lux.raw
	});
	io.emit('values',values.slice(-300)); //300 is the amount of last samples to see
	});
	});
	<html>
	<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
	<script src="http://localhost:8000/socket.io/socket.io.js"></script>
	<script src="plot.js"></script>
	</head>
	<body>
	<svg id="visualisation" width="1000" height="500"></svg>
	</body>
	</html>
	// Note: Due to d3 capabilities I know this to be a really hammered solution, but works and does not flicker much.
	// I soon will edit the code to make it more efficient.
	// The plot function is from Jay Raj in http://www.sitepoint.com/creating-simple-line-bar-charts-using-d3-js/

	var values = [];

	function plot(lineData){
	var lineData = values;
	console.log(lineData)
	document.getElementById('visualisation').innerHTML="";
	var vis = d3.select('#visualisation'),
	WIDTH = 1000,
	HEIGHT = 500,
	MARGINS = {
	top: 20,
	right: 20,
	bottom: 20,
	left: 50
	},
	xRange = d3.scale
	.linear()
	.range([MARGINS.left, WIDTH - MARGINS.right])
	.domain([d3.min(lineData, function(d) {
	return d.x;
	}), d3.max(lineData, function(d) {
	return d.x;
	})]),
	yRange = d3.scale
	.linear()
	.range([HEIGHT - MARGINS.top, MARGINS.bottom])
	.domain([d3.min(lineData, function(d) {
	return d.y;
	}), d3.max(lineData, function(d) {
	return d.y;
	})]),
	xAxis = d3.svg.axis()
	.scale(xRange)
	.tickSize(5)
	.tickSubdivide(true),
	yAxis = d3.svg.axis()
	.scale(yRange)
	.tickSize(5)
	.orient('left')
	.tickSubdivide(true);

	vis.append('svg:g')
	.attr('class', 'x axis')
	.attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')')
	.call(xAxis);

	vis.append('svg:g')
	.attr('class', 'y axis')
	.attr('transform', 'translate(' + (MARGINS.left) + ',0)')
	.call(yAxis);


	var lineFunc = d3.svg.line()
	.x(function(d) {
	return xRange(d.x);
	})
	.y(function(d) {
	return yRange(d.y);
	})
	.interpolate('linear');

	vis.append('svg:path')
	.attr('d', lineFunc(lineData))
	.attr('stroke', 'blue')
	.attr('stroke-width', 2)
	.attr('fill', 'none');
	}

	var socket = io("http://localhost:8000");

	socket.on('values',function(vals){
	values = vals;
	plot(values);
	console.log("updated");
	});