D3.js and Polymer bar-chart element

<!DOCTYPE html>
<html>

<head>
  <script data-require="polymer@0.1.2" data-semver="0.1.2" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.1.2/platform.js"></script>
  <script data-require="polymer@0.1.2" data-semver="0.1.2" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.1.2/polymer.js"></script>
  <script data-require="d3@3.4.6" data-semver="3.4.6" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <h2>&lt;bar-chart&gt; Example</h2>
  <bar-chart originalData='[{"date":"04","value":"100"}, {"date":"05","value":"144"}, {"date":"06","value":"123"}]' switchData='[{"date":"03","value":"100"}, {"date":"09","value":"124"}, {"date":"11","value":"189"}]'>
  </bar-chart>

  <polymer-element name="bar-chart" attributes="originalData switchData">
    <style>
      bar-chart::shadow .bar {
        fill: green;
      }
      bar-chart::shadow .axis {
        fill: #888;
      }
    </style>
    <template>
      <span class="bar-chart-example">
       <svg id="barchart" width="{{width}}" height="{{height}}"></svg>
      </span>
      <div>
        <button class="btn" id="clickable">Flip Data</button>
      </div>
    </template>
    <script>
      function barChart(element) {
        var data = [];
        var that = {};
        var margin = {
          top: 40,
          right: 0,
          bottom: 40,
          left: 40
        };
        var h = 400 - margin.top - margin.bottom,
          w = 400 - margin.top,
          x, y;

        var svg = d3.select(element)
          .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.render = function(data) {
          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(data);
          this.updateAxis();

        };

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

          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;

      }

      Polymer('bar-chart', {
        width: 400,
        height: 400,

        created: function() {
          this.data = this.data || [];
          this.other = this.other || [];
        },
        ready: function() {
          var that = this;
          this.switched = false;
          this.data = JSON.parse(this.originalData);
          this.other = JSON.parse(this.switchData);
          this.elem = this.$.barchart;
          this.c = barChart(this.elem);
          this.c.render(this.data);
          this.btn = this.$.clickable;
          this.btn.hidden = !this.other;
          d3.select(this.btn).on('click', function() {
            var data = that.switched ? that.data : that.other;
            that.c.render(data);
            that.switched = !that.switched;
          });
        }
      });
    </script>
  </polymer-element>

</body>

</html>

// Code goes here

h2 {
  font-family: arial, helvetica, sans-serif;
}