arigesher/sector_highlights.html

## sector_highlights.html
<html>
<head>
<body style='align: center'>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class='content' style='margin: auto'>
  </div>
  <script>
  var data =
  [
    {
      sectorName: "sector0",
      innerRadius: 25,
      outerRadius: 75,
      startAngle: 0,
      endAngle: Math.PI / 2,
      fill: 'blue'
    },
    {
      sectorName: "sector1",
      innerRadius: 25,
      outerRadius: 75,
      startAngle: Math.PI / 2,
      endAngle: Math.PI,
      fill: 'red'
    },
    {
      sectorName: "sector2",
      innerRadius: 25,
      outerRadius: 75,
      startAngle: Math.PI,
      endAngle: 3 * Math.PI / 2,
      fill: 'green'
    },
    {
      sectorName: "sector3",
      innerRadius: 25,
      outerRadius: 75,
      startAngle: 3 * Math.PI / 2,
      endAngle: 2 * Math.PI,
      fill: 'black'
    }
    ];
  var div = d3.select('.content');
  var svg = div.append('svg').style('position', 'absolute').style('width', '500px').style('height','500px');
  // the selectAll here is the trick - first, you have to select the elements you want to create
  // (even though they don't yet exist), then bind data to them, and finally, specify how they are created
  // with the .enter() selection
  var enter_selection = svg.selectAll('path').data(data).enter()
  var g = enter_selection.append("g").attr("transform","translate(250,250)")
      .style('position', 'absolute')
      .style('top', '250px')
      .style('left', '250px');


    // svg z-indexing

    g.append("path")
      .attr("d",d3.svg.arc())
      .style('fill', function(d) { return "#2E3843"; })
      .style('opacity', '0.6')
      .on('mouseover', function(d){
        d3.select(this).style('opacity', '1');
        d3.select(".notch-" + d.sectorName).style('opacity','1');
      })
      .on('mouseout', function(d){
        d3.select(this).style('opacity', '0.6');
        d3.select(".notch-" + d.sectorName).style('opacity','0');
      });

  // create the notch for the sectors as a function of the sector itself
  var notch_arc = d3.svg.arc();
  notch_arc.innerRadius(function(d) {
    return d.outerRadius - 6;
  });
  notch_arc.outerRadius(function(d) {
    return d.outerRadius - 2;
  });
  notch_arc.startAngle(function(d){
    var arc_length = d.endAngle - d.startAngle;
    var notch_length = .99 * arc_length;
    return d.startAngle + (arc_length - notch_length) / 2;
  });
  notch_arc.endAngle(function(d){
    var arc_length = d.endAngle - d.startAngle;
    var notch_length = .99 * arc_length;
    return d.endAngle - (arc_length - notch_length) / 2;
  });

  g.append("path")
    .attr("class",function(d) { return "notch-" + d.sectorName;})
    .style('fill','#2169A8')
    .style('opacity','0')
    .style('z-index','1')
    .attr("d",notch_arc);


  </script>
</body>
	<html>
	<head>
	<body style='align: center'>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<div class='content' style='margin: auto'>
	</div>
	<script>
	var data =
	[
	{
	sectorName: "sector0",
	innerRadius: 25,
	outerRadius: 75,
	startAngle: 0,
	endAngle: Math.PI / 2,
	fill: 'blue'
	},
	{
	sectorName: "sector1",
	innerRadius: 25,
	outerRadius: 75,
	startAngle: Math.PI / 2,
	endAngle: Math.PI,
	fill: 'red'
	},
	{
	sectorName: "sector2",
	innerRadius: 25,
	outerRadius: 75,
	startAngle: Math.PI,
	endAngle: 3 * Math.PI / 2,
	fill: 'green'
	},
	{
	sectorName: "sector3",
	innerRadius: 25,
	outerRadius: 75,
	startAngle: 3 * Math.PI / 2,
	endAngle: 2 * Math.PI,
	fill: 'black'
	}
	];
	var div = d3.select('.content');
	var svg = div.append('svg').style('position', 'absolute').style('width', '500px').style('height','500px');
	// the selectAll here is the trick - first, you have to select the elements you want to create
	// (even though they don't yet exist), then bind data to them, and finally, specify how they are created
	// with the .enter() selection
	var enter_selection = svg.selectAll('path').data(data).enter()
	var g = enter_selection.append("g").attr("transform","translate(250,250)")
	.style('position', 'absolute')
	.style('top', '250px')
	.style('left', '250px');


	// svg z-indexing

	g.append("path")
	.attr("d",d3.svg.arc())
	.style('fill', function(d) { return "#2E3843"; })
	.style('opacity', '0.6')
	.on('mouseover', function(d){
	d3.select(this).style('opacity', '1');
	d3.select(".notch-" + d.sectorName).style('opacity','1');
	})
	.on('mouseout', function(d){
	d3.select(this).style('opacity', '0.6');
	d3.select(".notch-" + d.sectorName).style('opacity','0');
	});

	// create the notch for the sectors as a function of the sector itself
	var notch_arc = d3.svg.arc();
	notch_arc.innerRadius(function(d) {
	return d.outerRadius - 6;
	});
	notch_arc.outerRadius(function(d) {
	return d.outerRadius - 2;
	});
	notch_arc.startAngle(function(d){
	var arc_length = d.endAngle - d.startAngle;
	var notch_length = .99 * arc_length;
	return d.startAngle + (arc_length - notch_length) / 2;
	});
	notch_arc.endAngle(function(d){
	var arc_length = d.endAngle - d.startAngle;
	var notch_length = .99 * arc_length;
	return d.endAngle - (arc_length - notch_length) / 2;
	});

	g.append("path")
	.attr("class",function(d) { return "notch-" + d.sectorName;})
	.style('fill','#2169A8')
	.style('opacity','0')
	.style('z-index','1')
	.attr("d",notch_arc);


	</script>
	</body>