/jsbin.pifulavu.html

## jsbin.pifulavu.html
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

   <h1>Test D3.js with Jasmine</h1>
   <button id="switch">Switch Data</button>
  <script>
    function barChart() {

        var that = {};
        var data = null;
        var margin = {
            top: 40,
            right: 0,
            bottom: 40,
            left: 40
        };
        var h = 500 - margin.top - margin.bottom, w = 500 - margin.top, x, y;

        var svg = d3.select('body').append('svg')
            .attr('height', '500')
            .attr('width', '500')
            .append('g')
            .attr("transform", "translate(" + margin.left + ", " + margin. top +")");

        // add axis
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + h + ")");

        svg.append("g")
            .attr("class", "y axis");

        that.setData = function(d) {
            data = d;
        };

        that.getData = function() {
            return data;
        };

        that.render = function() {
            if (! data) return;

            x = d3.scale.ordinal().rangeRoundBands([0, w], .05);
            x.domain(data.map(function(d) {
                return d.date;
            }));

            y = d3.scale.linear().range([h, 0]);
            y.domain([0, d3.max(data, function(d) {
                return d.value;
            })]);

            xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");

            yAxis = d3.svg.axis()
                .scale(y)
                .orient("left");


            this.updateBars();
            this.updateAxis();

        };

        that.updateBars = function() {
            // add bars
            var bars = svg.selectAll('.bar').data(this.getData());

            bars.enter().append('rect');

            bars.exit().transition()
                .duration(500)
                .attr("height", 0)
                .remove();

            bars
                .transition()
                .duration(500)
                .attr('class', 'bar')
                .attr("x", function(d) {
                    return x(d.date);
                })
                .attr("width", x.rangeBand())
                .attr("y", function(d) {
                    return y(d.value);
                })
                .attr("height", function(d) {
                    return h - y(d.value);
                });
        };

        that.updateAxis = function() {
            svg.selectAll("g.x.axis")
                .call(xAxis);

            svg.selectAll("g.y.axis")
                .call(yAxis);
        };

        return that;
    }

    var oldData =  [{ date: '04', value: 100}, { date: '02', value: 70}, {date: '03', value: 80}];
    var newData = [{ date : '09', value : 40}, { date : '04', value : 120} ];
    var switched = false;

    d3.select('#switch').on('click', function() {
      var data = switched? oldData : newData;
      c.setData(data);
      c.render();
      switched = !switched;
    });

    c = barChart();
    c.setData(oldData);
    c.render();

  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>

	<h1>Test D3.js with Jasmine</h1>
	<button id="switch">Switch Data</button>
	<script>
	function barChart() {

	var that = {};
	var data = null;
	var margin = {
	top: 40,
	right: 0,
	bottom: 40,
	left: 40
	};
	var h = 500 - margin.top - margin.bottom, w = 500 - margin.top, x, y;

	var svg = d3.select('body').append('svg')
	.attr('height', '500')
	.attr('width', '500')
	.append('g')
	.attr("transform", "translate(" + margin.left + ", " + margin. top +")");

	// add axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + h + ")");

	svg.append("g")
	.attr("class", "y axis");

	that.setData = function(d) {
	data = d;
	};

	that.getData = function() {
	return data;
	};

	that.render = function() {
	if (! data) return;

	x = d3.scale.ordinal().rangeRoundBands([0, w], .05);
	x.domain(data.map(function(d) {
	return d.date;
	}));

	y = d3.scale.linear().range([h, 0]);
	y.domain([0, d3.max(data, function(d) {
	return d.value;
	})]);

	xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");


	this.updateBars();
	this.updateAxis();

	};

	that.updateBars = function() {
	// add bars
	var bars = svg.selectAll('.bar').data(this.getData());

	bars.enter().append('rect');

	bars.exit().transition()
	.duration(500)
	.attr("height", 0)
	.remove();

	bars
	.transition()
	.duration(500)
	.attr('class', 'bar')
	.attr("x", function(d) {
	return x(d.date);
	})
	.attr("width", x.rangeBand())
	.attr("y", function(d) {
	return y(d.value);
	})
	.attr("height", function(d) {
	return h - y(d.value);
	});
	};

	that.updateAxis = function() {
	svg.selectAll("g.x.axis")
	.call(xAxis);

	svg.selectAll("g.y.axis")
	.call(yAxis);
	};

	return that;
	}

	var oldData = [{ date: '04', value: 100}, { date: '02', value: 70}, {date: '03', value: 80}];
	var newData = [{ date : '09', value : 40}, { date : '04', value : 120} ];
	var switched = false;

	d3.select('#switch').on('click', function() {
	var data = switched? oldData : newData;
	c.setData(data);
	c.render();
	switched = !switched;
	});

	c = barChart();
	c.setData(oldData);
	c.render();

	</script>
	</body>
	</html>