Created
February 13, 2016 23:00
-
-
Save iblind/5a51e5ac4ee2cf024e34 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment