D3js and Polymer Web Components by curran

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.5.0/polymer.js"></script>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <link rel="import" href="pie-chart.html">
</head>
<body>

<pie-chart 
url="data.csv"></pie-chart>

</body>

data.csv

id,type,amount
01,Restaurant,100
02,Entertainment,100
03,Rent,200
04,Groceries,250

pie-chart.html

<polymer-element name="pie-chart" attributes="url">
    <template>
         <style>
            :host {
                display: block;
                height: 400px;
            }
            text {
              fill: white;
            }
            .controls {
              display: inline-block;
              margin: 0 0 0 20px;
            }
            svg {
              float: right;
              margin: 0 20px 0 0;
            }
            .arc path {
              stroke: #fff;
            }
        </style>
        <div class="controls">
          <template repeat="{{d in data}}">
            <p><label for="input">{{d.type}}: </label>
            <input id="input"
            type="range"
            value="{{d.amount}}"
            min="0" max="500"
            on-input="{{refreshChart}}"> ${{d.amount}}</p>
          </template>
        </div>
        <svg id="svg"></svg>
    </template>
    <script>
        Polymer({
            createElements: function () {
              var width = 500,
                  height = 500,
                  radius = Math.min(width, height) / 2;

              this.color = d3.scale.ordinal()
                  .range(["green", "orange", "blue", "red"]);

              this.arc = d3.svg.arc()
                  .outerRadius(radius - 10)
                  .innerRadius(0);

              this.pie = d3.layout.pie()
                  .sort(null)
                  .value(function(d) { return d.amount; });

              this.svg = d3.select(this.$.svg)
                  .attr("width", width)
                  .attr("height", height)
                .append("g")
                  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
            },
            drawChart: function () {
              var me = this;

              me.data.forEach(function(d) {
                d.amount = +d.amount;
              });

              me.g = me.svg.selectAll(".arc")
                  .data(me.pie(me.data))
                .enter().append("g")
                  .attr("class", "arc");

              me.g.append("path")
                  .attr("d", me.arc)
                  .style("fill", function(d) { return me.color(d.data.type); });

              me.g.append("text")
                  .attr("transform", function(d) { return "translate(" + me.arc.centroid(d) + ")"; })
                  .attr("dy", ".35em")
                  .style("text-anchor", "middle")
                  .text(function(d) { return d.data.type; });
            },
            refreshChart: function () {
              var me = this;

              me.g.data(me.pie(me.data))
                .select("path").attr("d", me.arc);

              me.g.select("text")
                .attr("transform", function(d) { return "translate(" + me.arc.centroid(d) + ")"; });
            },
            getData: function () {
              var me = this;
              d3.csv(me.url, function (error, data) {
                me.data = data;
                me.drawChart();
              });
            },
            domReady: function () {
              this.createElements();
              this.getData();
            },
            urlChanged: function (oldValue, newValue) {
              if(newValue && oldValue) {
                this.getData();
              }
            }
        });
    </script>
</polymer-element>

D3js and Polymer Web Components

hello world

index.html

data.csv

pie-chart.html