psealock/data.csv

## data.csv

          
            id
            type
            amount

            
              01
              Restaurant
              100

            
              02
              Entertainment
              100

            
              03
              Rent
              200

            
              04
              Groceries
              250

## 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="http://d3js.org/d3.v3.min.js"></script>
  <link rel="import" href="pie-chart.html">
</head>
<body>

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

</body>

## 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>
id	type	amount
01	Restaurant	100
02	Entertainment	100
03	Rent	200
04	Groceries	250
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.5.0/polymer.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<link rel="import" href="pie-chart.html">
	</head>
	<body>

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

	</body>
	<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>