rveciana/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This example illustrates this GeoExamples blog entry.
The map uses the base from the first example, but adding "drop shadow" filter as explained in this gist by Charl P. Botha.

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

.graticule {
  fill: none;
  stroke: #777;
  stroke-opacity: .5;
  stroke-width: .5px;
}

.land {
  fill: #999;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}


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

var width = 600,
    height = 500;

var projection = d3.geo.mercator()
    .scale(5*(width + 1) / 2 / Math.PI)
    .translate([width / 2, height / 2])
    .rotate([-125, -15, 0])
    .precision(.1);

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

var graticule = d3.geo.graticule();

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

var filter = svg.append("defs")
  .append("filter")
  .attr("id", "drop-shadow")
  .attr("height", "130%");
filter.append("feGaussianBlur")
.attr("in", "SourceAlpha")
.attr("stdDeviation", 5)
.attr("result", "blur");

 filter.append("feOffset")
    .attr("in", "blur")
    .attr("dx", 5)
    .attr("dy", 5)
    .attr("result", "offsetBlur");

var feMerge = filter.append("feMerge");

feMerge.append("feMergeNode")
    .attr("in", "offsetBlur")
feMerge.append("feMergeNode")
    .attr("in", "SourceGraphic");

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);
d3.json("/mbostock/raw/4090846/world-50m.json", function(error, world) {
    svg.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path)
      .style("filter", "url(#drop-shadow)");

    svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);

});


d3.select(self.frameElement).style("height", height + "px");

</script>

## thumbnail.png

      
    Raw
  

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

	.graticule {
	fill: none;
	stroke: #777;
	stroke-opacity: .5;
	stroke-width: .5px;
	}

	.land {
	fill: #999;
	}

	.boundary {
	fill: none;
	stroke: #fff;
	stroke-width: .5px;
	}


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

	var width = 600,
	height = 500;

	var projection = d3.geo.mercator()
	.scale(5*(width + 1) / 2 / Math.PI)
	.translate([width / 2, height / 2])
	.rotate([-125, -15, 0])
	.precision(.1);

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

	var graticule = d3.geo.graticule();

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

	var filter = svg.append("defs")
	.append("filter")
	.attr("id", "drop-shadow")
	.attr("height", "130%");
	filter.append("feGaussianBlur")
	.attr("in", "SourceAlpha")
	.attr("stdDeviation", 5)
	.attr("result", "blur");

	filter.append("feOffset")
	.attr("in", "blur")
	.attr("dx", 5)
	.attr("dy", 5)
	.attr("result", "offsetBlur");

	var feMerge = filter.append("feMerge");

	feMerge.append("feMergeNode")
	.attr("in", "offsetBlur")
	feMerge.append("feMergeNode")
	.attr("in", "SourceGraphic");

	svg.append("path")
	.datum(graticule)
	.attr("class", "graticule")
	.attr("d", path);
	d3.json("/mbostock/raw/4090846/world-50m.json", function(error, world) {
	svg.insert("path", ".graticule")
	.datum(topojson.feature(world, world.objects.land))
	.attr("class", "land")
	.attr("d", path)
	.style("filter", "url(#drop-shadow)");

	svg.insert("path", ".graticule")
	.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
	.attr("class", "boundary")
	.attr("d", path);

	});



	d3.select(self.frameElement).style("height", height + "px");

	</script>