mapsam/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This example shows how geometries with inner loops and outer loops build themselves in opposite direction using d3 and a stroke-dashoffset in a .transition() infinite loop. The outer loop (red) builds clockwise, while the inner loop (blue) builds counter-clockwise. This is important in order to confidently account for "holes" in polygons. Here's a good summary of the importance in winding order.

  
## donut.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              donut.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  fill: none;
  stroke-width: 2px;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}
.outer-loop {
  stroke: red;
}
.inner-loop {
  stroke: steelblue;
}

circle {
  fill: orange;
  stroke: #fff;
  stroke-width: 3px;
}

</style>

<body>
<div id="main"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>


var width = 960,
    height = 500;

var projection = d3.geo.albers()
    .center([0, 37.7])
    .scale(500);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("donut.json", function(error, polygon) {


  var data = topojson.feature(polygon, polygon.objects.donut).features[0].geometry.coordinates;
  var coordinatesOuter = data[0].map(projection);
  var coordinatesInner = data[1].map(projection);

  // begin string concat
  dOuter = 'M' + coordinatesOuter[0].join();
  dInner = 'M' + coordinatesInner[0].join();
  pathOuter = svg.append('path').attr('d', dOuter);
  pathInner = svg.append('path').attr('d', dInner);

  var count = 0;
  // start outer loop
  loopOuter();
  function loopOuter() {
    dOuter += 'L' + coordinatesOuter[count].join();
    pathOuter.attr("d", dOuter)
      .attr('class', 'outer-loop')
      .attr('stroke-dashoffset', 0)
      .transition()
        .duration(10)
        .attr("d", dOuter)
        .each("end", function(){
          count++;
          if (count < coordinatesOuter.length) loopOuter();
          else loopInner(); // run inner loop when outer loop finishes
        });
  }

  var innerCount = 0;
  function loopInner() {
    dInner += 'L' + coordinatesInner[innerCount].join();
    pathInner.attr("d", dInner)
      .attr('class', 'inner-loop')
      .transition()
        .duration(100)
        .attr('d', dInner)
        .each('end', function(){
          innerCount++;
          if (innerCount < coordinatesInner.length) loopInner();
          else doTheDash();
        });
  }

  function doTheDash() {
    outerDash(0, -13);
    function outerDash(start, offset) {
      console.log(start, offset)
      pathOuter
        .attr('stroke-dasharray', '10 3')
        .attr('stroke-dashoffset', start)
        .transition()
          .duration(1000)
          .ease('linear')
          .attr('stroke-dashoffset', offset)
          .each('end', function() {
            outerDash(start - 13, offset - 13);
          });
    }

    innerDash(0, -13);
    function innerDash(start, offset) {
      console.log(start, offset)
      pathInner
        .attr('stroke-dasharray', '10 3')
        .attr('stroke-dashoffset', start)
        .transition()
          .duration(1000)
          .ease('linear')
          .attr('stroke-dashoffset', offset)
          .each('end', function() {
            innerDash(start - 13, offset - 13);
          });
    }
  }

});


</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	path {
	fill: none;
	stroke-width: 2px;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
	}
	.outer-loop {
	stroke: red;
	}
	.inner-loop {
	stroke: steelblue;
	}

	circle {
	fill: orange;
	stroke: #fff;
	stroke-width: 3px;
	}

	</style>

	<body>
	<div id="main"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script>



	var width = 960,
	height = 500;

	var projection = d3.geo.albers()
	.center([0, 37.7])
	.scale(500);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	d3.json("donut.json", function(error, polygon) {


	var data = topojson.feature(polygon, polygon.objects.donut).features[0].geometry.coordinates;
	var coordinatesOuter = data[0].map(projection);
	var coordinatesInner = data[1].map(projection);

	// begin string concat
	dOuter = 'M' + coordinatesOuter[0].join();
	dInner = 'M' + coordinatesInner[0].join();
	pathOuter = svg.append('path').attr('d', dOuter);
	pathInner = svg.append('path').attr('d', dInner);

	var count = 0;
	// start outer loop
	loopOuter();
	function loopOuter() {
	dOuter += 'L' + coordinatesOuter[count].join();
	pathOuter.attr("d", dOuter)
	.attr('class', 'outer-loop')
	.attr('stroke-dashoffset', 0)
	.transition()
	.duration(10)
	.attr("d", dOuter)
	.each("end", function(){
	count++;
	if (count < coordinatesOuter.length) loopOuter();
	else loopInner(); // run inner loop when outer loop finishes
	});
	}

	var innerCount = 0;
	function loopInner() {
	dInner += 'L' + coordinatesInner[innerCount].join();
	pathInner.attr("d", dInner)
	.attr('class', 'inner-loop')
	.transition()
	.duration(100)
	.attr('d', dInner)
	.each('end', function(){
	innerCount++;
	if (innerCount < coordinatesInner.length) loopInner();
	else doTheDash();
	});
	}

	function doTheDash() {
	outerDash(0, -13);
	function outerDash(start, offset) {
	console.log(start, offset)
	pathOuter
	.attr('stroke-dasharray', '10 3')
	.attr('stroke-dashoffset', start)
	.transition()
	.duration(1000)
	.ease('linear')
	.attr('stroke-dashoffset', offset)
	.each('end', function() {
	outerDash(start - 13, offset - 13);
	});
	}

	innerDash(0, -13);
	function innerDash(start, offset) {
	console.log(start, offset)
	pathInner
	.attr('stroke-dasharray', '10 3')
	.attr('stroke-dashoffset', start)
	.transition()
	.duration(1000)
	.ease('linear')
	.attr('stroke-dashoffset', offset)
	.each('end', function() {
	innerDash(start - 13, offset - 13);
	});
	}
	}

	});


	</script>