denisemauldin/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
      #svg1 {
         border: thin solid red;
      }
      .circles {
              fill: red;
      }
     </style>
  </head>
  <body>
    <svg id="svg1" width="60" height="60"></svg>
    <button id="update" type="text/button">Update</button>
    <button id="reset" type="text/button">Reset</button>
    <script>
      let inputData = [
    { id: 1, x: 10, y: 10 },
    { id: 2, x: 30, y: 30 },
    { id: 3, x: 50, y: 50 },
      ];

function join1(data) {
    // select the container elements
    let containers = d3.select("#svg1")
                      .selectAll('.container')
                      .data(data);

    // select entering elements and append a g element
    let enterSel = containers.enter()
                      .append("g")
                      .attr("class", "container");

     // select exiting elements
     let exitSel = containers.exit();

     // select elements that remain
     let mergeSel = containers.merge(enterSel);

    // add a text label to each container
    enterSel.append("text").attr("text", "label");
    // add a circle to each container
    let circlesEnter = enterSel.append("circle");

    // add styles and data to new and remaining elements
    let circlesMerge = mergeSel
            .select("circle")
            .attr("class", "circles")
            .attr("r", d => 10)
            .attr("cx", d => d.x)
            .attr("cy", d => d.y);

     // remove exiting elements
     exitSel.remove();
  }

  join1(inputData);

  d3.select("#reset").on("click", function() {
    d3.select("#svg1").selectAll("g").remove();
    inputData = [
      { id: 1, x: 10, y: 10 },
      { id: 2, x: 30, y: 30 },
      { id: 3, x: 50, y: 50 },
    ];
    join1(inputData);
  });

  d3.select("#update").on("click", function() {
   inputData = [
    { id: 1, x: 10, y: 10 },
    { id: 2, x: 40, y: 40 },
    { id: 3, x: 10, y: 50 },
    { id: 4, x: 50, y: 10 },
  ];
  join1(inputData);
});


    </script>
  </body>
</html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<html>
	<head>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	#svg1 {
	border: thin solid red;
	}
	.circles {
	fill: red;
	}
	</style>
	</head>
	<body>
	<svg id="svg1" width="60" height="60"></svg>
	<button id="update" type="text/button">Update</button>
	<button id="reset" type="text/button">Reset</button>
	<script>
	let inputData = [
	{ id: 1, x: 10, y: 10 },
	{ id: 2, x: 30, y: 30 },
	{ id: 3, x: 50, y: 50 },
	];

	function join1(data) {
	// select the container elements
	let containers = d3.select("#svg1")
	.selectAll('.container')
	.data(data);

	// select entering elements and append a g element
	let enterSel = containers.enter()
	.append("g")
	.attr("class", "container");

	// select exiting elements
	let exitSel = containers.exit();

	// select elements that remain
	let mergeSel = containers.merge(enterSel);

	// add a text label to each container
	enterSel.append("text").attr("text", "label");
	// add a circle to each container
	let circlesEnter = enterSel.append("circle");

	// add styles and data to new and remaining elements
	let circlesMerge = mergeSel
	.select("circle")
	.attr("class", "circles")
	.attr("r", d => 10)
	.attr("cx", d => d.x)
	.attr("cy", d => d.y);

	// remove exiting elements
	exitSel.remove();
	}

	join1(inputData);

	d3.select("#reset").on("click", function() {
	d3.select("#svg1").selectAll("g").remove();
	inputData = [
	{ id: 1, x: 10, y: 10 },
	{ id: 2, x: 30, y: 30 },
	{ id: 3, x: 50, y: 50 },
	];
	join1(inputData);
	});

	d3.select("#update").on("click", function() {
	inputData = [
	{ id: 1, x: 10, y: 10 },
	{ id: 2, x: 40, y: 40 },
	{ id: 3, x: 10, y: 50 },
	{ id: 4, x: 50, y: 10 },
	];
	join1(inputData);
	});


	</script>
	</body>
	</html>