j-chimienti/d3-template.html

## d3-template.html
<!DOCTYPE html>
<html>
<head>
<title>d3 update</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
</head>
<body>
<script>
var margin = { top: 50, right: 50, bottom: 50, left: 50 };
var data = [ 5, 30, 10, 25, 7];
var width = 200,
	height = 100;
var svg = d3.select('body').append('svg')
	.attr('width', width)
	.attr('height', height)
	.attr('class', 'svg')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var g = svg.append('g');
function update(){
	var circle = g.selectAll('circle')
		.data(data);

	circle.enter().append('circle')
	.attr('r', 5)
	.attr('cx', function(d, i ){
		return i * 35;
	})
	.attr('cy', function(d, i){
		return d
	})
	.on('click', function(d, i){
		data.splice(i, 1)
		update();
	});
	circle.exit().remove();
}
update();
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>d3 update</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	</head>
	<body>
	<script>
	var margin = { top: 50, right: 50, bottom: 50, left: 50 };
	var data = [ 5, 30, 10, 25, 7];
	var width = 200,
	height = 100;
	var svg = d3.select('body').append('svg')
	.attr('width', width)
	.attr('height', height)
	.attr('class', 'svg')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
	var g = svg.append('g');
	function update(){
	var circle = g.selectAll('circle')
	.data(data);

	circle.enter().append('circle')
	.attr('r', 5)
	.attr('cx', function(d, i ){
	return i * 35;
	})
	.attr('cy', function(d, i){
	return d
	})
	.on('click', function(d, i){
	data.splice(i, 1)
	update();
	});
	circle.exit().remove();
	}
	update();
	</script>

	</body>
	</html>