Without modifying the information in genes.json, use D3 to construct a pie chart that shows the relative fraction of genes in the forward and reverse directions. Your code must dynamically generate the pie chart from the data. In other words, if I modify the genes.json data file, the pie chart must update automatically. (15 points)
forked from scresawn's block: final exam question 2 attempt 2
| [{ | |
| "phagename": "D29", | |
| "genes": [{ | |
| "name": 1, | |
| "pham": "4858 (107)", | |
| "start": 50, | |
| "stop": 2000, | |
| "direction": "forward" | |
| }, | |
| { | |
| "name": 2, | |
| "pham": "a2", | |
| "start": 2150, | |
| "stop": 2900, | |
| "direction": "reverse" | |
| }, | |
| { | |
| "name": 3, | |
| "pham": "a3", | |
| "start": 3000, | |
| "stop": 4550, | |
| "direction": "reverse" | |
| }, | |
| { | |
| "name": 4, | |
| "pham": "a4", | |
| "start": 4700, | |
| "stop": 7550, | |
| "direction": "reverse" | |
| }], | |
| "genomelength": 15000 | |
| }] |
| <!DOCTYPE html> | |
| <body> | |
| <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> //JQuery | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> //D3 | |
| <script> | |
| var width = 550; | |
| var height = 350; | |
| radius = Math.min(width, height) / 2; | |
| var color = d3.scale.category20b(); //builtin range of colors | |
| var svg = d3.select('#pie_chart').append('svg').attr('width', width).attr('height', height).append('g').attr('transform', 'translate(' + (width / 2) +',' + (height / 2) + ')'); | |
| var arc = d3.svg.arc().outerRadius(radius); | |
| var pie = d3.layout.pie().value(function(d,i) { return pie_data[i]; }).sort(null); | |
| var path = svg.selectAll('path') | |
| .data(pie(data)) | |
| .enter() | |
| .append('path') | |
| .attr('d', arc) | |
| .attr('fill', | |
| function(d, i) { | |
| return data[i].color; | |
| }); | |
| d3.json("genes.json", type, function(error, data) { | |
| if (error) throw error}); | |
| </script> | |
| </body> |