polymer 1.0 d3 bar chart

gistfile1.js

<link rel="import"
      href="//www.polymer-project.org/1.0/samples/components/polymer/polymer.html">

<dom-module id="bar-chart">
	<style>
		.content-container > ::content .axis path,
		.content-container > ::content .axis line {
		  fill: none;
		  stroke: #000;
		  shape-rendering: crispEdges;
		}

		.content-container > ::content .bar {
		  fill: steelblue;
		}

		.content-container > ::content .x.axis path {
		  display: none;
		}
	</style>
	<template>
		<div class="content-container">
			<content>
				<div id="chart" class="poly-bars">
				</div>
			</content>
		</div>
	</template>
	<script>

		function Bars(opts) {
		  opts = opts || {};

		  var margin = opts.margin || {top: 20, right: 20, bottom: 30, left: 40},
		    width = 960 - margin.left - margin.right,
		    height = 500 - margin.top - margin.bottom,
		    title = opts.title || 'Bar Chart';

		  var formatPercent = d3.format('.0%');

		  var xValue = function(d) { return d.letter; }, // data -> value
		    xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1), // value -> display
		    xMap = function(d) { return xScale(xValue(d)); }, // data -> display
		    xAxis = d3.svg.axis().scale(xScale).orient('bottom');

		  var yValue = function(d) { return d.frequency; }, // data -> value
		    yScale = d3.scale.linear().range([height, 0]), // value -> display
		    yMap = function(d) { return yScale(yValue(d)); }, // data -> 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-chart',

			properties: {
				barData: {
					Type: String,
					notify: true
				},
				width: Number,
				height: {
					type: Number,
					value: 400
				},
				data: {
					computed: '_parse(barData)'
				}
			},

			observers: [
		    'dataChanged(data)'
		  ],

			created: function() {
				this.bars = new Bars(this);
			},

			_parse: JSON.parse,

			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();
			}
		});
	</script>
</dom-module>

Apologies for the noobie question but, how/where does the barData initially get specified?
I've tried passing it from an input in the tamplate using bind-value="{{barData}}" but can't seem to get it to work. I'm new to both polymer and D3.