rveciana/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Another experiment, this time using an erode filter to make the coastline more visible

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>

<script>


var width = 600,
    height = 500;

var projection = d3.geo.orthographic()
    .scale(2800)
    .translate([width / 2, height / 2])
    .rotate([-3, -46.5, 5])
    .clipAngle(90)
    .precision(.1);


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

var context = canvas.node().getContext("2d");

var path = d3.geo.path()
  .projection(projection);


d3.json("https://cdn.rawgit.com/rveciana/7711139/raw/c1dcabdd8ecb142c0f6c50cba5530df7a8f68916/data.json", function(error, data) {

 var land = topojson.object(data, data.objects.land);

  context.beginPath();
  context.fillStyle='#D1BEB0';
  context.strokeStyle = '#D1BEB0';

  path.context(context)(land);

  //context.stroke();
  context.fill();


  var canvas_filter = document.createElement('canvas');

  canvas_filter.width = width;
  canvas_filter.height = height;
  var context_filter = canvas_filter.getContext("2d");

  context_filter.beginPath();
  context_filter.fillStyle='#f4efec';
  context_filter.strokeStyle = '#f4efec';
  path.context(context_filter)(land);


  //context_filter.stroke();
  context_filter.fill();


  var pixels = context_filter.getImageData(0,0,width,height);

  var weights = [ 0, 1/5,  0,
           1/5,  1/5, 1/5,
            0, 1/5,  0];

  var weights = [ 0,    1/21, 1/21, 1/21, 0,
                  1/21, 1/21, 1/21, 1/21, 1/21,
                  1/21, 1/21, 1/21, 1/21, 1/21,
                  1/21, 1/21, 1/21, 1/21, 1/21,
                  0   , 1/21, 1/21, 1/21, 0];
  var side = Math.round(Math.sqrt(weights.length));
  var halfSide = Math.floor(side/2);
  var opaque = false;
  var src = pixels.data;
  var w = pixels.width;
  var h = pixels.height;
  var alphaFac = opaque ? 1 : 0;

  var output = context_filter.getImageData(0,0,w,h);
  output.width = w;
  output.height = h;


  var dst = output.data;


  for (var y=0; y<h; y++) {
    for (var x=0; x<w; x++) {
      var sy = y;
      var sx = x;
      var dstOff = (y*w+x)*4;

      var r=1000, g=1000, b=1000, a=1000;
      for (var cy=0; cy<side; cy++) {
        for (var cx=0; cx<side; cx++) {
          var scy = sy + cy - halfSide;
          var scx = sx + cx - halfSide;
          if (scy >= 0 && scy < h && scx >= 0 && scx < w) {
            var srcOff = (scy*w+scx)*4;
            var wt = weights[cy*side+cx];
            if (wt > 0 && src[srcOff+3] < a){
              r = src[srcOff];
              g = src[srcOff+1];
              b = src[srcOff+2];
              a = src[srcOff+3];
            }
          }

        }
      }

      dst[dstOff] = r;
      dst[dstOff+1] = g;
      dst[dstOff+2] = b;
      dst[dstOff+3] = a + alphaFac*(255-a);

    }
  }

  context_filter.putImageData(output, 0, 0);

  context.drawImage(canvas_filter, 0, 0);

});

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">

	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v0.min.js"></script>

	<script>


	var width = 600,
	height = 500;

	var projection = d3.geo.orthographic()
	.scale(2800)
	.translate([width / 2, height / 2])
	.rotate([-3, -46.5, 5])
	.clipAngle(90)
	.precision(.1);



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

	var context = canvas.node().getContext("2d");

	var path = d3.geo.path()
	.projection(projection);




	d3.json("https://cdn.rawgit.com/rveciana/7711139/raw/c1dcabdd8ecb142c0f6c50cba5530df7a8f68916/data.json", function(error, data) {

	var land = topojson.object(data, data.objects.land);

	context.beginPath();
	context.fillStyle='#D1BEB0';
	context.strokeStyle = '#D1BEB0';

	path.context(context)(land);

	//context.stroke();
	context.fill();


	var canvas_filter = document.createElement('canvas');

	canvas_filter.width = width;
	canvas_filter.height = height;
	var context_filter = canvas_filter.getContext("2d");

	context_filter.beginPath();
	context_filter.fillStyle='#f4efec';
	context_filter.strokeStyle = '#f4efec';
	path.context(context_filter)(land);


	//context_filter.stroke();
	context_filter.fill();





	var pixels = context_filter.getImageData(0,0,width,height);

	var weights = [ 0, 1/5, 0,
	1/5, 1/5, 1/5,
	0, 1/5, 0];

	var weights = [ 0, 1/21, 1/21, 1/21, 0,
	1/21, 1/21, 1/21, 1/21, 1/21,
	1/21, 1/21, 1/21, 1/21, 1/21,
	1/21, 1/21, 1/21, 1/21, 1/21,
	0 , 1/21, 1/21, 1/21, 0];
	var side = Math.round(Math.sqrt(weights.length));
	var halfSide = Math.floor(side/2);
	var opaque = false;
	var src = pixels.data;
	var w = pixels.width;
	var h = pixels.height;
	var alphaFac = opaque ? 1 : 0;

	var output = context_filter.getImageData(0,0,w,h);
	output.width = w;
	output.height = h;


	var dst = output.data;



	for (var y=0; y<h; y++) {
	for (var x=0; x<w; x++) {
	var sy = y;
	var sx = x;
	var dstOff = (yw+x)4;

	var r=1000, g=1000, b=1000, a=1000;
	for (var cy=0; cy<side; cy++) {
	for (var cx=0; cx<side; cx++) {
	var scy = sy + cy - halfSide;
	var scx = sx + cx - halfSide;
	if (scy >= 0 && scy < h && scx >= 0 && scx < w) {
	var srcOff = (scyw+scx)4;
	var wt = weights[cy*side+cx];
	if (wt > 0 && src[srcOff+3] < a){
	r = src[srcOff];
	g = src[srcOff+1];
	b = src[srcOff+2];
	a = src[srcOff+3];
	}
	}

	}
	}

	dst[dstOff] = r;
	dst[dstOff+1] = g;
	dst[dstOff+2] = b;
	dst[dstOff+3] = a + alphaFac*(255-a);

	}
	}

	context_filter.putImageData(output, 0, 0);

	context.drawImage(canvas_filter, 0, 0);

	});

	</script>