Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers