D3 Examples - arc practice

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>
  /* var data = [
        {start: 0, size: 1, color: "red"},
        {start: 1, size: 2, color: "green"},
        {start: 3, size: 3, color: "blue"},
        ];*/
    
    d3.json("genes.json.txt", function(error, json) {
          if (error) return console.warn(error);
    var arc = d3.svg.arc()
            .innerRadius(40)
            .outerRadius(100)
            .startAngle(function(d, i){return d.start;})
            .endAngle(function(d, i){return d.stop;})
            ;
​
    var chart = d3.select("body").append("svg:svg")
            .attr("class", "chart")
            .attr("width", 420)
            .attr("height", 420).append("svg:g")
            .attr("transform", "translate(200,200)")
            ;
​
    chart.selectAll("path")
            .data(json)
            .enter().append("svg:path")
            .style("fill", function(d, i){ if (d.name%2==0)
                return "red";
            })
            .attr("d", arc)
            ;
;})
  </script>
</body>
​
    