bsr203/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<style>

.update {
  fill: blue;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>

var width = 960,
height = 500;

var dataA = [{Id:1, Coord: [100,100]}, {Id:2, Coord: [200,200]}]

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var circle = svg.selectAll("circle")
    .data(dataA, function(d){return d.Id;})
  .enter().append("circle")
    .attr("r", 20)
    .attr("cx", function(d){return d.Coord[0];})
    .attr("cy", function(d){return d.Coord[1];});

var dataB = [{Id:2, Details: "I am 2"}]

var update = svg.selectAll("circle")
    .data(dataB,function(d){return d.Id;})
    .attr("class", "update")
    //need to change d (data for current selection) to {Id:2, Coord: [200,200], Details: "I am 2"}

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style>

	.update {
	fill: blue;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script>

	var width = 960,
	height = 500;

	var dataA = [{Id:1, Coord: [100,100]}, {Id:2, Coord: [200,200]}]

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var circle = svg.selectAll("circle")
	.data(dataA, function(d){return d.Id;})
	.enter().append("circle")
	.attr("r", 20)
	.attr("cx", function(d){return d.Coord[0];})
	.attr("cy", function(d){return d.Coord[1];});

	var dataB = [{Id:2, Details: "I am 2"}]

	var update = svg.selectAll("circle")
	.data(dataB,function(d){return d.Id;})
	.attr("class", "update")
	//need to change d (data for current selection) to {Id:2, Coord: [200,200], Details: "I am 2"}

	</script>