JSFiddle - React, Tailwind, and code Playground

by uedatakuya

HTML

<script src="http://d3js.org/d3.v2.min.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div id="canvas">
</div>
<button id="add-btn">Add</button>
<button id="move-btn">Move</button>

JavaScript

var w = 300;
var h = 300;
var svg = d3.select("#canvas").append("svg")
    .attr("width", w)
    .attr("height", h);
    
var circle = svg.selectAll("circle")
    .data([10, 20, 30]);


$("#add-btn").click(function(){
    var c = circle.enter().append("circle")
    .style("fill", "red")
    .attr("cx", function(d) {
         return (w - d) * Math.random() + d;
     })
     .attr("cy", function(d){
         return (h - d) * Math.random() + d;
     })
    .attr("r", function(d) {
        return d;
     });
});
$("#move-btn").click(function(){
    svg.selectAll("circle").transition()
        .attr("cx", function(d) {
            return (w - d) * Math.random() + d;
         })
        .attr("cy", function(d) {
            return (h - d) * Math.random() + d;
         });
});