Ember SVG Example

app.js

App = Ember.Application.create();

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return DATA;
  }
});

App.PieChartComponent = Ember.Component.extend({
  tagName: 'svg',
  width: 200,
  height: 200,
  attributeBindings: ['width', 'height'],
  
  arcs: function() {
    var d = this.get('data'),
        w = this.get('width'),
        h = this.get('height'),
        cx = w / 2,
        cy = w / 2,
        r = cx,
        e = 0;

    return d.map(function(item) {
      var a = e;
      e += 360 * parseFloat(item.value);

      return {
        d: describeArc(cx, cy, r, a, e),
        fill: item.fill
      };
    });
  }.property('[email protected]', '[email protected]', 'width', 'height')
});

var DATA = [{
  fill: '#cc6666',
  value: 0.45
}, {
  fill: '#66cc66',
  value: 0.2
}, {
  fill: '#6666cc',
  value: 0.35
}];

function describeArc(x, y, radius, startAngle, endAngle){
  var start = polarToCartesian(x, y, radius, endAngle);
  var end = polarToCartesian(x, y, radius, startAngle);

  var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";

  var d = [
    "M", x, y,
    "L", start.x, start.y, 
    "A", radius, radius, 0, arcSweep, 0, end.x, end.y
  ].join(" ");

  return d;
}

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

style.css

body {
  padding: 1em;
}

nav .active {
  font-weight: bold;
}

templates.html

<script type="text/x-handlebars">
  <table>
    <thead>
      <tr>
        <th>Value</th>
        <th>Fill</th>
      </tr>
    </thead>
    <tbody>
      {{#each}}
        <tr>
          <td>{{input value=value}}</td>
          <td>{{input value=fill type="color"}}</td>
        </tr>
      {{/each}}
    </tbody>
  </table>
  
  <p>{{pie-chart data=model}}</p>
</script>

<script type="text/x-handlebars" id="components/pie-chart">
  {{#each arcs}}
    <path {{bindAttr d=d fill=fill}} />
  {{/each}}
</script>