js_2.html

---
layout: default
title: Java Script
---



  <svg width="720" height="120">

  </svg>
<button id="start">Click</button>

<script>

var dataArray = [
  {"x": 40, "radius": 10, "color": "red"},
  {"x": 80, "radius": 20, "color": "green"},
  {"x": 120, "radius": 15, "color": "blue"},
  {"x": 200, "radius": 20, "color": "yellow"}
];

dataArray2 = [
  {"x": 40, "radius": 10, "color": "red"},
  {"x": 120, "radius": 15, "color": "blue"},
];





function draw(data) {
  var circle = d3.select("svg").selectAll("circle")
    .data(data, function(d){
      return d.color;
    });

  circle.enter().append("circle")
      .attr("cy", 60)
      .style("fill", function(d){
        return d.color;
      })
      .attr("r", 0);


  circle.transition().duration(1000)
    .attr("r", function(datapoint){
      return datapoint.radius;
    })

    .style("fill", function(d){
      return d.color;
    })
    .attr("cx", function(d){
      return d.x;
    });
    console.log("running");
  circle.exit().transition().duration(1000)
  .attr("r", 0).remove();
}

// draw(dataArray);
draw(dataArray);
d3.select("#start").on("click", function(){
  draw(dataArray2);
});





</script>