STUDY THIS!

http://stackoverflow.com/questions/28616948/d3-lines-and-circles-data#28618225

by Nivaldo

HTML

<a href="http://stackoverflow.com/questions/28616948/d3-lines-and-circles-data#28618225">SO Question</a>
<svg id="visualisation" width="1000" height="500"></svg>

JavaScript

var random = d3.random.normal(100, 100);
	setInterval(function() {
		var data = [];
		var row = [];
		for (var x = 0; x < (100 * Math.random()) + 100; x += 20) {
			row.push({ x: x, y: random() })
		}
		data.push(row);
		var row = [];
		for (var x = 0; x < (100 * Math.random()) + 100; x += 20) {
			row.push({ x: x, y: random() })
		}
		data.push(row);

		chart(data);
	}, 1000)
	  
	var svg = d3.select('#visualisation');
		
	var WIDTH = 1000;
	var HEIGHT = 500;
	
	var x = d3.scale.linear().range([0, WIDTH]);
	
	var y = d3.scale.linear().range([HEIGHT, 0]);
	
	var line = d3.svg.line()
	  .x(function(d) {
		return x(d.x);
	  })
	  .y(function(d) {
		return y(d.y);
	  });
	  
	function chart(lineData) {
		var merged = d3.merge(lineData);
		x = x.domain(d3.extent(merged, function(d) {
		  return d.x;
		})),
		y = y.domain(d3.extent(merged, function(d) {
		  return d.y;
		}));

		// Data join
		var join = svg.selectAll("g")
			.data(lineData);
		  
		// Enter
		join.enter()
			.append("g")
            .append("path")
			.attr('stroke', 'blue')
			.attr('stroke-width', 2)
			.attr('fill', 'none');

		// Update
		join.select("path")
			.attr('d', line);
        
        join.exit().remove();
		  
		var circles = join.selectAll("circle")
            .data(function(d) { return d; });
        
        circles.enter()
            .append('circle')
			.attr("r", 10)
			.attr('fill', 'blue');
        
        circles.attr("cx", function(d) { return x(d.x); })
			.attr("cy", function(d) { return y(d.y); });
        circles.exit().remove();
		
		// Exit
	  }