JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="https://rawgithub.com/misoproject/d3.chart/master/d3.chart.min.js"></script>
<div id="viz"></div>
<div id="viz2"></div>

JavaScript

var data = [1,4,6,9,12,13,30]

viz2 = d3.select("#viz2")
  .append("svg")
  .attr("width", 400)
  .attr("height", 30)

viz2.append("g")
  .selectAll("circle").data(data)
  .enter()
  .append("circle")
    .attr("cx", function(d){return d * 10})
    .attr("cy", 10)
    .attr("r", 0)
    .style("fill", "red")
  .transition()
    .delay(500)
    .attr("r", 5)
    .style("fill", "orange")
// define a new chart type: a circle chart
d3.chart("CircleChart", {

  initialize: function() {
    // create a layer of circles that will go into
    // a new group element on the base of the chart
    this.layer("circles", this.base.append("g"), {

      // select the elements we wish to bind to and
      // bind the data to them.
      dataBind: function(data) {
        return this.selectAll("circle")
          .data(data);
      },

      // insert actual circles
      insert: function() {
        return this.append("circle");
      },

      // define lifecycle events
      events: {

        // paint new elements, but set their radius to 0
        // and make them red
        "enter": function() {
          this.attr("cx", function(d) {
            return d * 10;
          })
          .attr("cy", 10)
          .attr("r", 0)
          .style("fill", "red");
        },
        // then transition them to a radius of 5 and change
        // their fill to blue
        "enter:transition": function() {
          var chart = this.chart();
          this.delay(500)
            .attr("r", chart.size() || 5)
            .style("fill", chart.color());
        }
      }
    });
  },

  // set/get the color to use for the circles as they are
  // rendered.
  color: function(newColor) {
    if (arguments.length === 0) {
      return this._color;
    }
    this._color = newColor;
    return this;
  },
  size: function(newSize) {
    if (arguments.length === 0) {
      return this._size;
    }
    this._size = newSize;
    return this;
  }
});

// create an instance of the chart on a d3...