arc practice

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

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js