d3chart HistChart

by ramnathv

HTML

<script src="https://rawgithub.com/misoproject/d3.chart/master/d3.chart.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<link rel="stylesheet" href="http://rawgithub.com/Caged/d3-tip/master/examples/example-styles.css">
<div id="viz"></div>
<div id="viz2"></div>

CSS

.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
.axis text{
  font-family: Helvetica;
  font-size: 12px;
  fill: #7e97a6;
}

.d3-tip{
  font-size: 14px;
  font-family: Consolas;
}

JavaScript

d3.chart('BaseChart', {
  initialize: function() {

    // setup some reasonable defaults
    this._margin = {top: 10, right: 30, bottom: 30, left: 40};
    this._width  = this.base.attr('width') ? this.base.attr('width') - this._margin.left - this._margin.right : 200;
    this._height = this.base.attr('height') ? this.base.attr('height') - this._margin.top - this._margin.bottom : 200;

    // make sure container height and width are set.
    this.updateContainerWidth();
    this.updateContainerHeight();

    // Adjust the margins
    this.base.append('g').attr('transform', 'translate(' + this._margin.left + ',' + this._margin.top + ')');
  },

  updateContainerWidth: function() { this.base.attr('width', this._width + this._margin.left + this._margin.right); },

  updateContainerHeight: function() { this.base.attr('height', this._height + this._margin.top + this._margin.bottom); },

  width: function(newWidth) {
    if (arguments.length === 0) {
      return this._width;
    }

    // only if the width actually changed:
    if (this._width !== newWidth) {

      var oldWidth = this._width;

      this._width = newWidth;

      // set higher container width
      this.updateContainerWidth();

      // trigger a change event
      this.trigger('change:width', newWidth, oldWidth);
    }

    // always return the chart, for chaining magic.
    return this;
  },

  height: function(newHeight) {
    if (arguments.length === 0) {
      return this._height;
    }

    var oldHeight = this._height;

    this._height = newHeight;

    if (this._height !== oldHeight) {

      this.updateContainerHeight();

      this.trigger('change:height', newHeight, oldHeight);
    }

    return this;
  },

  margin: function(newMargin) {
    if (arguments.length === 0) {
      return this._margin;
    }

    this._margin = newMargin;

    return this;
  }
});

d3.chart('BaseChart').extend('HistChart', {
  initialize : function() {
    var chart = this;

    chart.xScale = ...