D3 Examples - final exam question 2 attempt 2

final exam question 2 attempt 2

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)

xxxxxxxxxx
 
<!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>
    