D3.chart Intro Post

01.instantiate.js

var data = [1,4,6,9,12,13,30];
var circleChart = d3.select("div#vis")
  .append("svg")
  .chart("CircleChart")
  .width(200)
  .height(100)
  .radius(3);

// render it with some data
circleChart.draw(data);

02.define.js

d3.chart("ChartTypeName", {

});

03.initialize.js

d3.chart("CircleChart", {
  initialize : function() {
    // create a scale that we will use to position our circles
    // along the xAxis.
    this.xScale = d3.scale.linear();

    // setup some defaults for the height/width/radius variables
    this._width = this._width || this.base.attr("width") || 200;
    this._height = this._height || this.base.attr("height") || 100;
    this._radius = this._radius || 5;
  }
});

04.configuration.js

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;
  },
    
  width: function(newWidth) {
    if (arguments.length === 0) {
        return this._width;
    }
    this._width = newWidth;
    
    // if the width changed, update the width of the
    // base container.
    this.base.attr("width", this._width);
    
    // if the width changed, we need to update the range of our
    // x-scale
    this.xScale.range([this.radius(), this._width - this.radius()]);
    return this;
  },
  
  height: function(newHeight) {
    if (arguments.length === 0) {
        return this._height;
    } 
    this._height = newHeight;
    // If the height changed, we need to update the height
    // of our base container
    this.base.attr("height", this._height);
    return this;
  },
  
  radius: function(newRadius) {
    if (arguments.length === 0) {
        return this._radius;
    }
    this._radius = newRadius;
    return this;
  }   
});

05.layer.js

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;
      
    // 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, {

    });
  }
  // configuration functions omitted for brevity
});
  

06.commonpattern.js

circles.selectAll("circle")
  .data(data)
  .enter()
    .append("circle")
    .classed("circle", true)
    .style("fill", "red")
    .attr("r", r)
    .attr("cy", height/2)
    .attr("cx", function(d) {
      return xScale(d);
    });
    // other lifecycle events here

07.fulllayer.js

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;
      
    // 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)
            });
        }
      }
    });
  }
  // configuration functions omitted for brevity
});

08.extended.js

d3.chart("CircleChart").extend("HoverableCircleChart", {
  initialize: function() {

    // add a new behavior on the `enter` lifecycle event.
    // note that this doesn't overwrite the previous `enter`
    // behavior! It just adds additional behavior to it.
    this.layer("circles").on("enter", function() {

      var chart = this.chart();

      // add a mouseover listener to our circles
      // and change their color and broadcast a chart
      // brush event to any listeners.
      this.on("mouseover", function() {
        var el = d3.select(this);
        el.style("fill", "blue");
        chart.trigger("brush", this);

      }).on("mouseout", function() {
        var el = d3.select(this);
        el.style("fill", "");
      });
    });
  }
});

Am I right, that you ment

// render it with some data
circleChart.draw(data);

instead of

// render it with some data
circleChart.draw(draw);

in 01.instantiate.js...?

But anyway... thanks. Will probably implement it in my current project. exactly what I was looking for!