data.csv

## data.csv

        
        ip
        timestamp
        value

        
        92.239.29.77
        1412132430000
        3190

        
        92.239.29.77
        1412142430000
        319011

        
        92.239.29.78
        1412128830000
        545568

        
        92.239.29.78
        1412130600000
        616409

        
        92.239.29.78
        1412132430000
        319087

        
        92.239.29.76
        1412130600000
        616409

        
        92.239.29.76
        1412132430000
        319087

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Pie Chart</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

<body>

</body>

<script type="text/javascript">
var width = 960,
    height = 500,
    radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var percentageFormat = d3.format("%");

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

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


d3.csv("data.csv", function(error, csv_data) {

            var data = d3.nest()
                .key(function(d) {
                    return d.ip;
                })
                .rollup(function(d) {
                    return d3.sum(d, function(g) {
                        return g.value;
                    });
                }).entries(csv_data);

            var tots = d3.sum(data, function(d) {
            	return d.values;
            });

            data.forEach(function(d) {
                d.percentage = d.values  / tots;
            });

console.log("data variable", data);
console.log("pie(data)", pie(data));

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

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

            g.append("text")
                .attr("transform", function(d) {
                    return "translate(" + arc.centroid(d) + ")";
                })
                .attr("dy", ".35em")
                .style("text-anchor", "middle")
                .text(function(d) {
                	console.log("d is", d);
                    return percentageFormat(d.data.percentage);
                });
            });
</script>

</html>