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="chart"></div>

JavaScript

(function(){
  d3.chart('ScatterChart', {
    initialize: function(){
      this.xScale = d3.scale.linear()
      this.yScale = d3.scale.linear()
      this._color = d3.scale.category10()
      
      this._width = this._width || this.base.attr('width') || 200
      this._height = this._height || this.base.attr('height') || 100
      
      var circlesLayerBase = this.base.append('g')
        .classed('circles', true)
      
      this.layer('circles', circlesLayerBase, {
        dataBind: function(data) {
          var chart = this.chart()
          
          //update the x-scale
          chart.xScale.domain(data.map(function(d){return d.x}))
          
          //update the y-scale
          chart.yScale.domain([
            d3.min(data, function(d) { return d.y; }),
            d3.max(data, function(d) { return d.y; })
          ]);
        
          return this.selectAll('.circle')
           .data(data)
        },
          
        insert: function() {
          var chart = this.chart()
          return this.append('circle')
            .attr('fill', 'blue')
            .attr('r', 5)              
        },
          
        events: {
              
              
        }
      })
        
    }
    
}())

        insert: function() {
          var chart = this.chart();

          // Append the bars
          return this.append('rect')
            .attr('fill', 'blue')
            .attr('width', chart.xScale.rangeBand());
        },

        events: {
          enter: function() {
            var chart = this.chart();

            return this
              .attr('x', function(d) { return chart.xScale(d.name); })
              .attr('y', function(d) { return chart.yScale(d3.max([0, d.value])); })
              .attr('height', function(d) { return Math.abs(chart.yScale(d.value) - chart.yScale(0)); })
              .attr('fill', function(d) {return chart._color(d.name);})
              ;
          }
        }

      });
    },

    width:...