andrewhassan/bar_chart.js

## bar_chart.js
/*jslint nomen: true*/
/*global window, console, d3, _*/

var BarChart = window.BarChart = (function () {
  'use strict';

  function BarChart(options) {
    // Validate/set options
    if (!options) {
      options = {};
    }

    options.height = options.height || 200;
    options.width = options.width || 400;
    options.margins = options.margins || {
      top: 20,
      right: 100,
      bottom: 30,
      left: 40
    };
    options.element = options.element || 'body';

    var data = options.data || [];

    // Save instance variables
    this.options = options;
    this.data = data;
    this.drawn = false;

    this.draw();
  }

  BarChart.prototype.draw = function () {
    if (this.drawn) {
      return console.log('BarChart: draw called on already rendered chart');
    }

    this.x = d3.scale.ordinal()
      .rangeRoundBands([0, this.options.width], 0.05);

    this.y = d3.scale.linear()
      .rangeRound([this.options.height, 0]);

    this.color = d3.scale.ordinal();

    this.y.domain([
      0,
      parseFloat(
        _.reduce(this.data, function(max, d) {
          var sub_max = _.reduce(_.values(d), function(sum, i) {
            return sum += parseFloat(i);
          }, 0);

          if (sub_max > max) {
            max = sub_max;
          }

          return max;
        }, 0)
      )
    ]);

    this.x_axis = d3.svg.axis()
      .scale(this.x)
      .orient('bottom')
      .tickSize(0, 0, 0)
      .tickFormat(function(i) {
        return DAYS[i];
      })
      .tickPadding(6);

    this.y_axis = d3.svg.axis()
      .scale(this.y)
      .orient('left')
      .tickSize(0, 0, 0)
      .tickPadding(-1);

    this.svg = d3.select(this.options.element)
      .append('svg')
      .attr('width', this.options.width + this.options.margins.left + this.options.margins.right)
      .attr('height', this.options.height + this.options.margins.top + this.options.margins.bottom)
      .append('g')
      .attr('transform', 'translate(' + this.options.margins.left + ',' + this.options.margins.top + ')');

    this.categories = d3.keys(this.data[0]).filter(function (key) {
      return key !== 'Sample';
    });

    this.color.domain(this.categories);
    // color.range(...)

    this.data.forEach(function(d) {
      var y0 = 0;
      d.genes = this.color.domain().map(function(name) {
        // name is site ID
        return {
          name: name,
          y0: y0,
          y1: y0 += +d[name]
        };
      });
    }.bind(this));

    this.x.domain(this.data.map(function(d) {
      return d.Sample;
    }));

    this.svg.append('g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0,' + this.options.height + ')')
      .call(this.x_axis);

    this.svg.append('g')
      .attr('class', 'y axis')
      .call(this.y_axis);

    this.sample = this.svg.selectAll('.sample')
      .data(this.data)
      .enter().append('g')
      attr('transform', function(d) {
        return 'translate(' + this.x(d.Sample) + ',0)';
      }.bind(this));


  };

  BarChart.prototype.update = function (new_data) {
    if (!this.drawn) {
      return console.log('BarChart: Update called before draw');
    }
  };

  BarChart.prototype.destroy = function () {

  };

  return BarChart;
}());

function generateData(sites) {
  'use strict';
  var result = [];
  sites = sites || 10;

  for (var i = 0; i < 7; i++) {
    var data = {
      Sample: i
    };

    // j represents the site ID
    for(var j = 0; j < sites; j++) {
      data[j] = 70 * Math.random();
    }

    result.push(data);
  }

  return result;
}

var bar_chart = new BarChart({
  data: generateData(5)
});

## index.html
<html>
    <head>
        <title>Stacked Bar Chart</title>
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
        <script src="bar_chart.js"></script>
    </body>
</html>
	/jslint nomen: true/
	/global window, console, d3, _/

	var BarChart = window.BarChart = (function () {
	'use strict';

	function BarChart(options) {
	// Validate/set options
	if (!options) {
	options = {};
	}

	options.height = options.height \|\| 200;
	options.width = options.width \|\| 400;
	options.margins = options.margins \|\| {
	top: 20,
	right: 100,
	bottom: 30,
	left: 40
	};
	options.element = options.element \|\| 'body';

	var data = options.data \|\| [];

	// Save instance variables
	this.options = options;
	this.data = data;
	this.drawn = false;

	this.draw();
	}

	BarChart.prototype.draw = function () {
	if (this.drawn) {
	return console.log('BarChart: draw called on already rendered chart');
	}

	this.x = d3.scale.ordinal()
	.rangeRoundBands([0, this.options.width], 0.05);

	this.y = d3.scale.linear()
	.rangeRound([this.options.height, 0]);

	this.color = d3.scale.ordinal();

	this.y.domain([
	0,
	parseFloat(
	_.reduce(this.data, function(max, d) {
	var sub_max = _.reduce(_.values(d), function(sum, i) {
	return sum += parseFloat(i);
	}, 0);

	if (sub_max > max) {
	max = sub_max;
	}

	return max;
	}, 0)
	)
	]);

	this.x_axis = d3.svg.axis()
	.scale(this.x)
	.orient('bottom')
	.tickSize(0, 0, 0)
	.tickFormat(function(i) {
	return DAYS[i];
	})
	.tickPadding(6);

	this.y_axis = d3.svg.axis()
	.scale(this.y)
	.orient('left')
	.tickSize(0, 0, 0)
	.tickPadding(-1);

	this.svg = d3.select(this.options.element)
	.append('svg')
	.attr('width', this.options.width + this.options.margins.left + this.options.margins.right)
	.attr('height', this.options.height + this.options.margins.top + this.options.margins.bottom)
	.append('g')
	.attr('transform', 'translate(' + this.options.margins.left + ',' + this.options.margins.top + ')');

	this.categories = d3.keys(this.data[0]).filter(function (key) {
	return key !== 'Sample';
	});

	this.color.domain(this.categories);
	// color.range(...)

	this.data.forEach(function(d) {
	var y0 = 0;
	d.genes = this.color.domain().map(function(name) {
	// name is site ID
	return {
	name: name,
	y0: y0,
	y1: y0 += +d[name]
	};
	});
	}.bind(this));

	this.x.domain(this.data.map(function(d) {
	return d.Sample;
	}));

	this.svg.append('g')
	.attr('class', 'x axis')
	.attr('transform', 'translate(0,' + this.options.height + ')')
	.call(this.x_axis);

	this.svg.append('g')
	.attr('class', 'y axis')
	.call(this.y_axis);

	this.sample = this.svg.selectAll('.sample')
	.data(this.data)
	.enter().append('g')
	attr('transform', function(d) {
	return 'translate(' + this.x(d.Sample) + ',0)';
	}.bind(this));




	};

	BarChart.prototype.update = function (new_data) {
	if (!this.drawn) {
	return console.log('BarChart: Update called before draw');
	}
	};

	BarChart.prototype.destroy = function () {

	};

	return BarChart;
	}());

	function generateData(sites) {
	'use strict';
	var result = [];
	sites = sites \|\| 10;

	for (var i = 0; i < 7; i++) {
	var data = {
	Sample: i
	};

	// j represents the site ID
	for(var j = 0; j < sites; j++) {
	data[j] = 70 * Math.random();
	}

	result.push(data);
	}

	return result;
	}

	var bar_chart = new BarChart({
	data: generateData(5)
	});
	<html>
	<head>
	<title>Stacked Bar Chart</title>
	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
	<script src="bar_chart.js"></script>
	</body>
	</html>