Tributary inlet

_.md

[ Launch: Tributary inlet ] de93dc352da97129abbf by rickdg

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true}

index.html

<div id="vis"></div>

inlet.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)
            });
        }
      }
    });
  },
    
  width: function(newWidth) {
    if (arguments.length === 0) {
        return this._width;
    }
    this._width = newWidth;
    this.base.attr("width", this._width);
    this.xScale.range([this.radius(), this._width - this.radius()]);
    return this;
  },
  
  height: function(newHeight) {
    if (arguments.length === 0) {
        return this._height;
    } 
    this._height = newHeight;
    this.base.attr("height", this._height);
    return this;
  },
  
  radius: function(newRadius) {
    if (arguments.length === 0) {
        return this._radius;
    }
    this._radius = newRadius;
    return this;
  }   
});

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", "");
      });
    });
  }
});

// create an instance of the chart on a d3 selection
var circleChart = d3.select("div#vis")
  .append("svg")
  .chart("HoverableCircleChart")
  .width(200)
  .height(50)
  .radius(5);

// render it with some data
circleChart.draw([1,4,6,9,12,13,30]);