lindep/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
Access at  Blockbuilder 
Draw circle with multiple arcs around the circle.

  
## index.html
<!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%; }
      text.siteText {
        fill:black;
        font-size:20;
      }
    </style>
  </head>

  <body>
    <script>
      var margin = {top: 20, right: 10, bottom: 20, left: 10};
      var width = 960 - margin.left - margin.right;
      var height = 500 - margin.top - margin.bottom;

      var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom);

      svg.append("g")
        .attr("class","sitesClass")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var x=312,y=157;
      var rad=80;
      var angle=167;
      var arc = d3.svg.arc()
      .innerRadius(function(d) {
        return isNaN( d.innerRadius ) ? 0 : d.innerRadius;
      })
      .outerRadius(function(d) {
        return isNaN( d.outerRadius ) ? rad : d.outerRadius;
      })
      .startAngle( function(d) {
        return isNaN( d.startAngle ) ? 0 : d.startAngle;
      })
      .endAngle( function(d) {
        return isNaN( d.endAngle ) ? 0 : d.endAngle;
      });

      //.startAngle((angle-22)*(Math.PI/180)).endAngle((angle+22)*(Math.PI/180));
			//console.log(arc.centroid());

      var data = [
        {name:"obj1",x:210,y:127,r:10,records:[{azi:65,ir:10,r:80, n:2},{azi:170,ir:10,r:80},{azi:270,ir:10,r:80}]},
        {name:"obj2",x:96,y:127,r:10,records:[{azi:15,ir:10,r:80},{azi:200,ir:10,r:80},{azi:300,ir:10,r:80}]},
        {name:"obj3",x:96,y:260,r:10,records:[{azi:0,circle:1,ir:10,r:50}]}
        ];
      var scaleSecRadius = d3.scale.linear().domain([3,19]).range([5,17]);

			var sitesgroup = d3.selectAll('g.sitesClass')
      .datum(data)

      var sitegroup = sitesgroup.selectAll('g.siteClass')
      .data(function(d) {return d;});

      var site = sitegroup.enter()
      .append('svg:g')
      .attr("class","siteClass")
      .attr("transform", function(d) {
            return "translate("+d.x+","+d.y+")"
      });

      site.append('svg:circle')
      .attr('cx',0)
      .attr('cy',0)
      .attr('r',function(d) {return d.r;})
      .attr('fill','red')
      .attr('stroke','black')
      .attr('stroke-width',1);

      var sectorGroup = site.selectAll('g.secClass')
      .data(function(d) {
        return d.records;
      });

      // Create ref to sec group
      var secGroup = sectorGroup.enter()
      .append('svg:g')
      .attr("class","secGroup");

      // append to sec group ref
      // obj.startAngle = (d.azi-20)*(Math.PI/180);
      //  obj.endAngle = (d.azi+20)*(Math.PI/180);
      sectorGroup.append('svg:path')
      .attr('d',function(d) {
        console.log('this is d',d)
        var secSize = 40;
        var startAngle = d.circle ? 0 : (d.azi-(secSize/2))*(Math.PI/180);
        var endAngle = d.circle ? 360*(Math.PI/180) : (d.azi+(secSize/2))*(Math.PI/180);

        var obj = {};
        obj.innerRadius = d.ir*1.34368;
        obj.startAngle = startAngle;
        obj.endAngle = endAngle;
        obj.outerRadius = scaleSecRadius(d.r);
        return arc(obj);
      })
      .attr('fill','orange')
      .attr('stroke','black')
      .attr('stroke-width',1);

    site.append('svg:text')
      .text(function(d) {return d.name;})
      .attr("class","siteText")
      .attr("fill","pink")
      .attr("stroke","green")
      .attr("stroke-width",.5)
      .attr("font-size",15)
      .attr("transform","translate(0,26)")
      .attr("text-anchor","middle");

    var t_anchor = function(d) {
      return d.azi > 0 && d.azi < 180 ? "start" : "end";
    }

    sectorGroup
      .append('svg:text')
      .text(function(d) {
        return d.azi;
      })
      .attr("fill","black")
      .attr('stroke-width',.3)
      .attr("transform", function(d) {
        var obj = {};
        obj.innerRadius = 14;
        obj.startAngle = (d.azi-20)*(Math.PI/180);
        obj.endAngle = (d.azi+20)*(Math.PI/180);
        obj.outerRadius = d.r * 2 + 2;
        var center = arc.centroid(obj);
        return "translate(" +center+ ")";
      })
      .attr("font-size",8)
      .attr("text-anchor", t_anchor);

    </script>
  </body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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%; }
	text.siteText {
	fill:black;
	font-size:20;
	}
	</style>
	</head>

	<body>
	<script>
	var margin = {top: 20, right: 10, bottom: 20, left: 10};
	var width = 960 - margin.left - margin.right;
	var height = 500 - margin.top - margin.bottom;

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom);

	svg.append("g")
	.attr("class","sitesClass")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var x=312,y=157;
	var rad=80;
	var angle=167;
	var arc = d3.svg.arc()
	.innerRadius(function(d) {
	return isNaN( d.innerRadius ) ? 0 : d.innerRadius;
	})
	.outerRadius(function(d) {
	return isNaN( d.outerRadius ) ? rad : d.outerRadius;
	})
	.startAngle( function(d) {
	return isNaN( d.startAngle ) ? 0 : d.startAngle;
	})
	.endAngle( function(d) {
	return isNaN( d.endAngle ) ? 0 : d.endAngle;
	});

	//.startAngle((angle-22)(Math.PI/180)).endAngle((angle+22)(Math.PI/180));
	//console.log(arc.centroid());

	var data = [
	{name:"obj1",x:210,y:127,r:10,records:[{azi:65,ir:10,r:80, n:2},{azi:170,ir:10,r:80},{azi:270,ir:10,r:80}]},
	{name:"obj2",x:96,y:127,r:10,records:[{azi:15,ir:10,r:80},{azi:200,ir:10,r:80},{azi:300,ir:10,r:80}]},
	{name:"obj3",x:96,y:260,r:10,records:[{azi:0,circle:1,ir:10,r:50}]}
	];
	var scaleSecRadius = d3.scale.linear().domain([3,19]).range([5,17]);

	var sitesgroup = d3.selectAll('g.sitesClass')
	.datum(data)

	var sitegroup = sitesgroup.selectAll('g.siteClass')
	.data(function(d) {return d;});

	var site = sitegroup.enter()
	.append('svg:g')
	.attr("class","siteClass")
	.attr("transform", function(d) {
	return "translate("+d.x+","+d.y+")"
	});

	site.append('svg:circle')
	.attr('cx',0)
	.attr('cy',0)
	.attr('r',function(d) {return d.r;})
	.attr('fill','red')
	.attr('stroke','black')
	.attr('stroke-width',1);

	var sectorGroup = site.selectAll('g.secClass')
	.data(function(d) {
	return d.records;
	});

	// Create ref to sec group
	var secGroup = sectorGroup.enter()
	.append('svg:g')
	.attr("class","secGroup");

	// append to sec group ref
	// obj.startAngle = (d.azi-20)*(Math.PI/180);
	// obj.endAngle = (d.azi+20)*(Math.PI/180);
	sectorGroup.append('svg:path')
	.attr('d',function(d) {
	console.log('this is d',d)
	var secSize = 40;
	var startAngle = d.circle ? 0 : (d.azi-(secSize/2))*(Math.PI/180);
	var endAngle = d.circle ? 360(Math.PI/180) : (d.azi+(secSize/2))(Math.PI/180);

	var obj = {};
	obj.innerRadius = d.ir*1.34368;
	obj.startAngle = startAngle;
	obj.endAngle = endAngle;
	obj.outerRadius = scaleSecRadius(d.r);
	return arc(obj);
	})
	.attr('fill','orange')
	.attr('stroke','black')
	.attr('stroke-width',1);

	site.append('svg:text')
	.text(function(d) {return d.name;})
	.attr("class","siteText")
	.attr("fill","pink")
	.attr("stroke","green")
	.attr("stroke-width",.5)
	.attr("font-size",15)
	.attr("transform","translate(0,26)")
	.attr("text-anchor","middle");

	var t_anchor = function(d) {
	return d.azi > 0 && d.azi < 180 ? "start" : "end";
	}

	sectorGroup
	.append('svg:text')
	.text(function(d) {
	return d.azi;
	})
	.attr("fill","black")
	.attr('stroke-width',.3)
	.attr("transform", function(d) {
	var obj = {};
	obj.innerRadius = 14;
	obj.startAngle = (d.azi-20)*(Math.PI/180);
	obj.endAngle = (d.azi+20)*(Math.PI/180);
	obj.outerRadius = d.r * 2 + 2;
	var center = arc.centroid(obj);
	return "translate(" +center+ ")";
	})
	.attr("font-size",8)
	.attr("text-anchor", t_anchor);

	</script>
	</body>