JSFiddle - React, Tailwind, and code Playground

by shirleyxueyangwu

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<title>D3.js + Backbone.js</title>
<svg xmlns="http://www.w3.org/2000/svg">
</svg>

CSS

svg {
  border: 1px solid black;
}

circle {
  fill: #08c;
  opacity: 0.5;
}

JavaScript

var CircleView = Backbone.View.extend({
  initialize: function() {
    this.d3 = d3.select(this.el);
  },
  render: function() {
    // randomly make up numbers for cx, cy, and r
    var cx = Math.random() * 200,
        cy = Math.random() * 200,
        r = Math.random() * 50;
    
    this.d3.attr("cx", cx)
      .attr("cy", cy)
      .attr("r", r);
  }
});

var SVGView = Backbone.View.extend({
  el: "svg",
  initialize: function() {
    this.d3 = d3.select(this.el);
  },
  events: {
    "click": "makeCircle" 
  },
  makeCircle: function() {
    var circ = this.d3.append("circle"),
        view = new CircleView({el: circ[0]});
    view.render();
  }
});

var svgView = new SVGView();