title: Polymer & D3: How to send JSON from element attribute to template
body: <p>I'm new to polymer and I'm trying to integrate D3 with it. I modified an existing Gist but I'm a bit stumped. 
  I'm trying to pass some JSON from Polymer element attribute (<code>barData</code>) in HTML to the polymer template. The JSON is being passed as a <code>String</code> and parsed into a computed property (<code>data</code>). I've placed some default values into the <code>barData</code> property but want these overwritten each time a new element is created, with the <code>barData</code> attribute. This does not work. I created another attribute called <code>test</code> that just passes a string to a test property that is displayed in a paragraph. This works fine? Am i missing something obvious?</p>
  
  <p><code>index.HTML</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"&gt;&lt;/script&gt;
      &lt;link rel="import" href="elements/bar-chart2.html"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;!--creates chart but with template data set although the test attribute does work--&gt;
      &lt;bar-chart2 barData='[{"letter":"C","frequency":".76"},{"letter":"D","frequency":".03"}]' test="CHEEP"&gt;&lt;/bar-chart2&gt;
      &lt;!--creates chart but with template data set--&gt;
      &lt;!--&lt;bar-chart2 barData="http://codepen.io/superpikar/pen/kcJDf.js"&gt;&lt;/bar-chart2&gt;--&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><code>bar-chart2.html</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;link rel="import" href="../bower_components/polymer/polymer.html"&gt;
  &lt;link rel="import" href="../bower_components/iron-input/iron-input.html"&gt;
  &lt;script type="text/javascript" src="../bower_components/d3/d3.min.js"&gt;&lt;/script&gt;
  
  &lt;polymer-element name="bar-chart2" attributes="barData"&gt;
      &lt;template&gt;
          &lt;div id="chart" class="poly-bars"&gt;{{barData}}&lt;p&gt;{{test}}&lt;/p&gt;&lt;/div&gt;
  &lt;!--the chart will use the new data after input but I want it to happen on create --&gt;
          &lt;div&gt;
              &lt;input is="iron-input" bind-value="{{barData}}" placeholder="paste data here"&gt;
          &lt;/div&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
          function Bars(opts) {
              opts = opts || {};
              var margin = opts.margin || {
                top: 20,
                  right: 20,
                  bottom: 30,
                  left: 40
              };
              var width = 960 - margin.left - margin.right;
              var height = 500 - margin.top - margin.bottom;
              var title = opts.title || 'Bar Chart';
  
              var formatPercent = d3.format('.0%');
  
              var xValue = function(d) {
                      return d.letter;
                  }, // data -&gt; value
                  xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1), // value -&gt; display
                  xMap = function(d) {
                      return xScale(xValue(d));
                  }, // data -&gt; display
                  xAxis = d3.svg.axis().scale(xScale).orient('bottom');
  
              var yValue = function(d) {
                      return d.frequency;
                  }, // data -&gt; value
                  yScale = d3.scale.linear().range([height, 0]), // value -&gt; display
                  yMap = function(d) {
                      return yScale(yValue(d));
                  }, // data -&gt; display
                  yAxis = d3.svg.axis().scale(yScale).orient('left').tickFormat(formatPercent);
  
              function type(d) {
                  d.frequency = +d.frequency;
                  return d;
              }
  
              function bars(selection) {
                  selection.each(function(d, i) {
  
                      var el = d3.select(this);
  
                      el.selectAll('svg').remove();
  
                      var svg = el.append('svg')
                          .attr('title', title)
                          .attr('width', width + margin.left + margin.right)
                          .attr('height', height + margin.top + margin.bottom)
                          .append('g')
                          .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
  
                      xScale.domain(d.map(xValue));
                      yScale.domain([0, d3.max(d, yValue)]);
  
                      svg.append('g')
                          .attr('class', 'x axis')
                          .attr('transform', 'translate(0,' + height + ')')
                          .call(xAxis);
  
                      svg.append('g')
                          .attr('class', 'y axis')
                          .call(yAxis)
                          .append('text')
                          .attr('transform', 'rotate(-90)')
                          .attr('y', 6)
                          .attr('dy', '.71em')
                          .style('text-anchor', 'end')
                          .text('Frequency');
  
                      svg.selectAll('.bar')
                          .data(d)
                          .enter().append('rect')
                          .attr('class', 'bar')
                          .attr('x', xMap)
                          .attr('width', xScale.rangeBand)
                          .attr('y', yMap)
                          .attr('height', function(d) {
                              return height - yMap(d);
                          });
                  });
              }
  
              return bars;
          }
  
          Polymer({
              is: 'bar-chart2',
              properties: {
                  test: {
                      type: String,
                      value: "BOOM"
                  },
                  barData: {
                      type: String,
                      value: '[{"letter":"A","frequency":".08167"},{"letter":"B","frequency":".01492"}]',
                      reflect: true,
                      notify: true
                  },
                  width: Number,
                  height: {
                      type: Number,
                      value: 400
                  },
                  data: {
                      type: Array,
                      computed: '_parse(barData)'
                  }
              },
              _parse: JSON.parse,
  
              observers: [
                  'dataChanged(data)'
              ],
  
              created: function() {
                  this.bars = new Bars(this);
              },
  
              dataChanged: function() {
                  this._draw();
              },
  
              _draw: function() {
                  if (!this.data) {
                      return;
                  }
                  if (!this.elem) {
                      return;
                  }
  
                  d3.select(this.elem)
                      .datum(this.data).call(this.bars);
              },
  
              ready: function() {
                  this.elem = this.$.chart;
                  this._draw();
              }
          });
      &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>