introducing d3 chart, 2nd

Showing d3.chart extension

by iros

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3.chart/0.2.1/d3.chart.min.js"></script>
<div id="vis"></div>

JavaScript

d3.chart("CircleChart", {
  initialize : function() {
    this.xScale = d3.scale.linear();

    // setup some defaults
    this._width = this._width || this.base.attr("width") || 200;
    this._height = this._height || this.base.attr("height") || 100;
    this._radius = this._radius || 5;
    this._color = "red";
      
    // create a container in which the circles will live.
    var circleLayerBase = this.base.append("g")
      .classed("circles", true);

    // add our circle layer
    this.layer("circles", circleLayerBase, {

      // prepare your data for data binding, and return
      // the selection+data call
      dataBind: function(data) {
        var chart = this.chart();

        // assuming our data is sorted, set the domain of the
        // scale we're working with.
        chart.xScale.domain([data[0], data[data.length-1]]);

        return this.selectAll("circle")
          .data(data);
      },

      // append the actual expected elements and set the 
      // appropriate attributes that don't have to do with
      // data!
      insert: function() {
        var chart = this.chart();

        // append circles, set their radius to our fixed
        // chart radius, and set the height to the middle
        // of the chart.
        return this.append("circle")
          .attr("r", chart.radius())
          .attr("cy", chart.height()/2);
      },
      events: {
        // define what happens on these lifecycle events.
        // in our case, set the cx property of each circle
        // to the correct position based on our scale.
        enter: function() {
          var chart = this.chart();
          return this.attr("cx", function(d) {
              return chart.xScale(d)
          })
          .style("fill", chart.color());
        }
      }
    });
  },
    
  width: function(newWidth) {
    if (arguments.length === 0) {
        return this._width;
    }
    this._width = newWidth;
    this.base.attr("width", this._width);
   ...