daramcq/pie.html

## pie.html
<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<title>Testing Pie Chart</title>
<script type="text/javascript" src="js/d3.v3.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<style type="text/css">

    .label {
    font-size: 12pt;
    font-family: sans-serif;
    }

</style>

</head>

<body>
    <script type="text/javascript">


        var w = 300, //width
        h = 300, //height
        r = 100, //radius
        color = d3.scale.category20c(); //builtin range of colors


        data = [{"source":"Income Tax", "value":15175, "breakdown":{X:10000,Y:5175}},{"source":"VAT", "value":10170},{"source":"Excise", "value":4707},
                {"source":"Corporation Tax","value":4215},{"source":"Stamps","value":1428},{"source":"Capital Gains Tax","value":414},{"source":"Capital Acquisitions Tax","value":282},
                {"source":"Customs","value":250}, {"source":"Levies","value":1}];


        var vis = d3.select("body")
        .append("svg:svg") //create the SVG element inside the <body>
        .data([data]) //associate our data with the document
        .attr("width", w) //set the width and height of our visualization (these will be attributes of the <svg> tag
        .attr("height", h)
        .append("svg:g") //make a group to hold our pie chart
        .attr("transform", "translate(" + r + "," + r + ")") //move the center of the pie chart from 0, 0 to radius, radius


        var arc = d3.svg.arc() //this will create <path> elements for us using arc data
        .outerRadius(r).innerRadius(r-40);

        var arcOver = d3.svg.arc()
        .outerRadius(r + 10).innerRadius(r-50);

        var pie = d3.layout.pie() //this will create arc data for us given a list of values
        .value(function(d) { return d.value; }); //we must tell it out to access the value of each element in our data array

        var arcs = vis.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet)
        .data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties)
        .enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
        .append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
        .attr("class", "slice"); //allow us to style things in the slices (like text)

        arcs.append("svg:path")
        .attr("fill", function(d, i) { return color(i); } ) //set the color for each slice to be chosen from the color function defined above
        .attr("d", arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing function

        arcs.on('mouseover',function(d){
            d3.select(this).select('path').attr("fill","orange");
            $('#source').html(d.data.source+ ": e"+d.data.value+ "m")
        });
        arcs.on('mouseout',function(d,i){
            d3.select(this).select('path').attr("fill", color(i));
            $('#source').html('');
        });


        function drawSegment(d){
            console.log(d.breakdown.X);
            var segment=vis.selectAll("rect")
            .data(function(){
                for (a in d.breakdown)
                    return d.breakdown.a;
            })
            .enter().append("rect");
            console.log(d.breakdown.X);
            segment.attr("x",60)
            .attr("y",60)
            .attr("width",60)
            .attr("height",60);

            segment.on('click',function(d){console.log(d.breakdown)});

        }


        arcs.on('click', function(d){
            drawSegment(d.data);
        });
        /*arcs.append("svg:text") //add a label to each slice
        .attr("transform", function(d) { //set the label's origin to the center of the arc
        //we have to make sure to set these before calling arc.centroid
            d.innerRadius = 0;
            d.outerRadius = r;
            return "translate(" + arc.centroid(d) + ")"; //this gives us a pair of coordinates like [50, 50]
        })
        .attr("text-anchor", "middle") //center the text on it's origin
        .text(function(d, i) { return data[i].label; }); //get the label from our original data array
    */

    </script>
<p id="source" class="label"></p>
</body>

</html>
	<!DOCTYPE html>

	<html>

	<head>

	<meta http-equiv="Content-type" content="text/html; charset=utf-8">

	<title>Testing Pie Chart</title>
	<script type="text/javascript" src="js/d3.v3.min.js"></script>
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

	<style type="text/css">

	.label {
	font-size: 12pt;
	font-family: sans-serif;
	}

	</style>

	</head>

	<body>
	<script type="text/javascript">





	var w = 300, //width
	h = 300, //height
	r = 100, //radius
	color = d3.scale.category20c(); //builtin range of colors



	data = [{"source":"Income Tax", "value":15175, "breakdown":{X:10000,Y:5175}},{"source":"VAT", "value":10170},{"source":"Excise", "value":4707},
	{"source":"Corporation Tax","value":4215},{"source":"Stamps","value":1428},{"source":"Capital Gains Tax","value":414},{"source":"Capital Acquisitions Tax","value":282},
	{"source":"Customs","value":250}, {"source":"Levies","value":1}];



	var vis = d3.select("body")
	.append("svg:svg") //create the SVG element inside the <body>
	.data([data]) //associate our data with the document
	.attr("width", w) //set the width and height of our visualization (these will be attributes of the <svg> tag
	.attr("height", h)
	.append("svg:g") //make a group to hold our pie chart
	.attr("transform", "translate(" + r + "," + r + ")") //move the center of the pie chart from 0, 0 to radius, radius


	var arc = d3.svg.arc() //this will create <path> elements for us using arc data
	.outerRadius(r).innerRadius(r-40);

	var arcOver = d3.svg.arc()
	.outerRadius(r + 10).innerRadius(r-50);

	var pie = d3.layout.pie() //this will create arc data for us given a list of values
	.value(function(d) { return d.value; }); //we must tell it out to access the value of each element in our data array

	var arcs = vis.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet)
	.data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties)
	.enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
	.append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
	.attr("class", "slice"); //allow us to style things in the slices (like text)

	arcs.append("svg:path")
	.attr("fill", function(d, i) { return color(i); } ) //set the color for each slice to be chosen from the color function defined above
	.attr("d", arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing function

	arcs.on('mouseover',function(d){
	d3.select(this).select('path').attr("fill","orange");
	$('#source').html(d.data.source+ ": e"+d.data.value+ "m")
	});
	arcs.on('mouseout',function(d,i){
	d3.select(this).select('path').attr("fill", color(i));
	$('#source').html('');
	});


	function drawSegment(d){
	console.log(d.breakdown.X);
	var segment=vis.selectAll("rect")
	.data(function(){
	for (a in d.breakdown)
	return d.breakdown.a;
	})
	.enter().append("rect");
	console.log(d.breakdown.X);
	segment.attr("x",60)
	.attr("y",60)
	.attr("width",60)
	.attr("height",60);

	segment.on('click',function(d){console.log(d.breakdown)});

	}


	arcs.on('click', function(d){
	drawSegment(d.data);
	});
	/*arcs.append("svg:text") //add a label to each slice
	.attr("transform", function(d) { //set the label's origin to the center of the arc
	//we have to make sure to set these before calling arc.centroid
	d.innerRadius = 0;
	d.outerRadius = r;
	return "translate(" + arc.centroid(d) + ")"; //this gives us a pair of coordinates like [50, 50]
	})
	.attr("text-anchor", "middle") //center the text on it's origin
	.text(function(d, i) { return data[i].label; }); //get the label from our original data array
	*/

	</script>
	<p id="source" class="label"></p>
	</body>

	</html>