D3 Examples - final exam question 2

final exam question 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>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see!
    var svg = d3.select("body").append("svg")
    $(function () {
​
            var data = [
                { "CountryName": "China", "Pop1990": 1141, "Pop2008": 1333, "Pop2025": 1458 },
                { "CountryName": "India", "Pop1990": 849, "Pop2008": 1140, "Pop2025": 1398 },
                { "CountryName": "United States", "Pop1990": 250, "Pop2008": 304, "Pop2025": 352 },
                { "CountryName": "Indonesia", "Pop1990": 178, "Pop2008": 228, "Pop2025": 273 },
                { "CountryName": "Brazil", "Pop1990": 150, "Pop2008": 192, "Pop2025": 223 }
            ];
​
            $("#chart").igPieChart({
                width: "435px",
                height: "435px",
                dataSource: data, //JSON data defined above
                valueMemberPath: "Pop2008",
                labelMemberPath: "CountryName",
                labelsPosition: "bestFit"
            });
​
        });
    svg.append("rect")
      .attr({x: 100, y: 10, width: 700, height: 480})
      .style({ fill: "#a72d1a"})
      .transition().duration(3000).ease("bounce")
      .style({ fill: "#5db9e3"})
​
    console.log("you are now rocking with d3", d3);
  </script>
</body>
​
    