iblind/data.csv

## data.csv

          
            count_1
            count_2

            
              4.39
              1.64

            
              0.4894
              0.0413

            
              32.661
              11.343

            
              24.61
              100.0875

            
              1.969142857
              0.505642857

            
              6.186428571
              3.160357143

            
              0.604761905
              3.774738095

            
              6.0212
              2.4136

            
              1.2275
              0.2935

            
              1.1012
              1.0771

            
              5.605666667
              19.395

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

body {
  text-align: center;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script>

// Define the data as a two-dimensional array of numbers. If you had other
// data to associate with each number, replace each number with an object, e.g.,
// `{key: "value"}`.

d3.csv("data.csv", type, function(error, data) {
  if (error) throw error;

  var dataset1 = data

console.log(dataset1)


var dataset2 = [
[4.39,1.64],
[0.4894,0.0413],
[32.661,11.343],
[24.61,100.0875],
[1.969142857,0.505642857],
[6.186428571,3.160357143],
[0.604761905,3.774738095],
[6.0212,2.4136],
[1.2275,0.2935],
[1.1012,1.0771],
[5.605666667,19.395],
];

console.log(dataset2)


// Define the margin, radius, and color scale. The color scale will be
// assigned by index, but if you define your data using objects, you could pass
// in a named field from the data object instead, such as `d.name`. Colors
// are assigned lazily, so if you want deterministic behavior, define a domain
// for the color scale.
var m = 10,
    r = 100,
    z = d3.scale.ordinal()
                    .domain([function(d) { return d.right;}, function(d) { return d.wrong;}])
					.range(["e7969c","9ecae1"])

// Insert an svg element (with margin) for each row in our dataset. A child g
// element translates the origin to the pie center.
var svg = d3.select("body").selectAll("svg")
    .data(data)
  .enter().append("svg")
    .attr("width", (r + m) * 2)
    .attr("height", (r + m) * 2)
  .append("g")
    .attr("transform", "translate(" + (r + m) + "," + (r + m) + ")");//translate from corner of svg

// The data for each svg element is a row of numbers (an array). We pass that to
// d3.layout.pie to compute the angles for each arc. These start and end angles
// are passed to d3.svg.arc to draw arcs! Note that the arc radius is specified
// on the arc, not the layout.
svg.selectAll("path")
    .data(d3.layout.pie())
  .enter().append("path")
    .attr("d", d3.svg.arc()
        .innerRadius(r / 2)
        .outerRadius(r))
    .style("fill", function(d, i) { return z(i); });

});


function type(d) {
  d.right = +d.count_1;
  d.wrong= +d.count_2;
  return d;
}

</script>
</body>
</html>
	count_1	count_2
	4.39	1.64
	0.4894	0.0413
	32.661	11.343
	24.61	100.0875
	1.969142857	0.505642857
	6.186428571	3.160357143
	0.604761905	3.774738095
	6.0212	2.4136
	1.2275	0.2935
	1.1012	1.0771
	5.605666667	19.395
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<style>

	body {
	text-align: center;
	}
	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
	<script>

	// Define the data as a two-dimensional array of numbers. If you had other
	// data to associate with each number, replace each number with an object, e.g.,
	// `{key: "value"}`.

	d3.csv("data.csv", type, function(error, data) {
	if (error) throw error;

	var dataset1 = data

	console.log(dataset1)



	var dataset2 = [
	[4.39,1.64],
	[0.4894,0.0413],
	[32.661,11.343],
	[24.61,100.0875],
	[1.969142857,0.505642857],
	[6.186428571,3.160357143],
	[0.604761905,3.774738095],
	[6.0212,2.4136],
	[1.2275,0.2935],
	[1.1012,1.0771],
	[5.605666667,19.395],
	];

	console.log(dataset2)



	// Define the margin, radius, and color scale. The color scale will be
	// assigned by index, but if you define your data using objects, you could pass
	// in a named field from the data object instead, such as `d.name`. Colors
	// are assigned lazily, so if you want deterministic behavior, define a domain
	// for the color scale.
	var m = 10,
	r = 100,
	z = d3.scale.ordinal()
	.domain([function(d) { return d.right;}, function(d) { return d.wrong;}])
	.range(["e7969c","9ecae1"])

	// Insert an svg element (with margin) for each row in our dataset. A child g
	// element translates the origin to the pie center.
	var svg = d3.select("body").selectAll("svg")
	.data(data)
	.enter().append("svg")
	.attr("width", (r + m) * 2)
	.attr("height", (r + m) * 2)
	.append("g")
	.attr("transform", "translate(" + (r + m) + "," + (r + m) + ")");//translate from corner of svg

	// The data for each svg element is a row of numbers (an array). We pass that to
	// d3.layout.pie to compute the angles for each arc. These start and end angles
	// are passed to d3.svg.arc to draw arcs! Note that the arc radius is specified
	// on the arc, not the layout.
	svg.selectAll("path")
	.data(d3.layout.pie())
	.enter().append("path")
	.attr("d", d3.svg.arc()
	.innerRadius(r / 2)
	.outerRadius(r))
	.style("fill", function(d, i) { return z(i); });

	});


	function type(d) {
	d.right = +d.count_1;
	d.wrong= +d.count_2;
	return d;
	}

	</script>
	</body>
	</html>