BrieLewis/.block

## .block
license: mit

## data.json
[{"name": 1, "orientation": "forward", "start": 49, "stop": 250}, {"name": 2, "orientation": "forward", "start": 265, "stop": 305}, {"name": 3, "orientation": "reverse", "start": 361, "stop": 440}, {"name": 4, "orientation": "forward", "start": 500, "stop": 620}]

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
    .attr("width",1000)
    .attr('height',1000)

	 d3.json("data.json",function (error, data){
   d3.select("svg").selectAll("rect")
   	.data(data)
   	.enter()
   	.append("rect")
   	.attr("height", 50)
   	.attr("width",function(d){ return d.stop-d.start})
   	.attr('y',function(d)
          {if (d.orientation=="forward")
            {return 300}
          else
            {return 350}
          })
   	.attr("x",function(d){return d.start})
    .attr('fill', function(d)
          {if  (d.orientation=="forward")
          {return "aqua"}
          else
          {return "blue"}
            })


   });
  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	// Feel free to change or delete any of the code you see in this editor!
	var svg = d3.select("body").append("svg")
	.attr("width",1000)
	.attr('height',1000)

	d3.json("data.json",function (error, data){
	d3.select("svg").selectAll("rect")
	.data(data)
	.enter()
	.append("rect")
	.attr("height", 50)
	.attr("width",function(d){ return d.stop-d.start})
	.attr('y',function(d)
	{if (d.orientation=="forward")
	{return 300}
	else
	{return 350}
	})
	.attr("x",function(d){return d.start})
	.attr('fill', function(d)
	{if (d.orientation=="forward")
	{return "aqua"}
	else
	{return "blue"}
	})



	});
	</script>
	</body>