parryc/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Test for random colored pie chart!
Pie chart data from here

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.arc path {
  stroke: #fff;
}

</style>
<body>
    <div id="pie1">Hi.</div>
    <div id="pie2">TWO PIES</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://raw.github.com/bgrins/TinyColor/master/tinycolor.js"></script>
<script>

var data = [{"label" : "list 1", "value":500},
{"label" : "list 2", "value":300},
{"label" : "list 3", "value":400},
{"label" : "other", "value":200}];

var lists = 3;

var w = 960,
    h = 500,
    r = Math.min(w, h) / 2;

var colors = d3.scale.category20b().range();

var mainColorNum = Math.floor((Math.random()*5))*4+1;
var compColor = tinycolor.complement(colors[mainColorNum]);

var colorList = [];
for(var i = 0; i < lists; i++){
   colorList.push(colors[mainColorNum+i]);
}
colorList.push(compColor);

var color = d3.scale.ordinal().range(colorList);

 var vis = d3.select("#pie2")
        .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);

    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.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>


## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

	.arc path {
	stroke: #fff;
	}

	</style>
	<body>
	<div id="pie1">Hi.</div>
	<div id="pie2">TWO PIES</div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="https://raw.github.com/bgrins/TinyColor/master/tinycolor.js"></script>
	<script>

	var data = [{"label" : "list 1", "value":500},
	{"label" : "list 2", "value":300},
	{"label" : "list 3", "value":400},
	{"label" : "other", "value":200}];

	var lists = 3;

	var w = 960,
	h = 500,
	r = Math.min(w, h) / 2;

	var colors = d3.scale.category20b().range();

	var mainColorNum = Math.floor((Math.random()5))4+1;
	var compColor = tinycolor.complement(colors[mainColorNum]);

	var colorList = [];
	for(var i = 0; i < lists; i++){
	colorList.push(colors[mainColorNum+i]);
	}
	colorList.push(compColor);

	var color = d3.scale.ordinal().range(colorList);

	var vis = d3.select("#pie2")
	.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);

	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.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>