JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="http://misoproject.com/js/d3.chart.js"></script>
<div id="vis"></div>

JavaScript

d3.chart("Circles", {
  initialize: function() {
    this._radius = 5
    this._height = 50
    this.setAccessors(["color", "radius", "height"])
    var circleBase;
    this.xScale = d3.scale.linear();
    circleBase = this.base.append("g").classed("circles", true).attr({
      height: this._height,
      width: this.w
    });
    return this.layer("circles", circleBase, {
      dataBind: function(data) {
        this.chart().xScale.domain(d3.extent(data));
        return this.selectAll("circle").data(data);
      },
      insert: function() {
        var chart;
        chart = this.chart();
        chart.xScale.range([chart.radius(), chart.w - chart.radius()]);
        return this.append("circle").classed("circle", true).style("fill", chart.color()).attr({
          cy: chart.height() / 2,
          r: chart.radius()
        });
      },
      events: {
        enter: function() {
          var chart;
          chart = this.chart();
          return this.attr({
            cx: function(d) {
              return chart.xScale(d);
            }
          });
        }
      }
    });
  },
  width: function(_) {
    if (arguments.length === 0) {
      return this.w;
    }
    this.w = _;
    return this;
  },
  setAccessors: function(args) {
    return args.forEach((function(_this) {
      return function(arg) {
        return _this[arg] = function(_) {
          if (arguments.length === 0) {
            return _this["_" + arg];
          }
          _this["_" + arg] = _;
          return _this;
        };
      };
    })(this));
  }
});



var data = [1,3,4,6,10];

var chart = d3.select("#vis")
  .append("svg")
  .chart("Circles")
    .width(100)
    //.height(50)
    //.radius(5)
    .color('darkred')

chart.draw(data);