rveciana - la-bella-italia-like-map-for-the-haiyan-typhoon-track

La Bella Italia like map for the Haiyan typhoon track

Open raw page in new tab

This example illustrates this GeoExamples blog entry.

The map is based on the Kartograph software example La Bella Italia, made by Gregor Aisch, and the D3js example La Belle France.

In this case, the filter giving style is better organized and explained in the blog. Basically, the filter stacks a blurred image, a eroded, blurred and substracted image, and the original image.

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

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


.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", "bellaItalia");

filter.append("feColorMatrix")
    .attr("in","SourceGraphic")
    .attr("type", "matrix")
    .attr("values", "0 0 0 0 0.6 0 0 0 0 0.5333333333333333 0 0 0 0 0.5333333333333333  0 0 0 1 0")
    .attr("result","f1coloredMask");
filter.append("feGaussianBlur")
  .attr("in", "f1coloredMask")
  .attr("stdDeviation", 15)
  .attr("result", "f1blur");

filter.append("feColorMatrix")
    .attr("in","SourceGraphic")
    .attr("type", "matrix")
    .attr("values", "0 0 0 0 0   0 0 0 0 0   0 0 0 0 0   0 0 0 500 0")
    .attr("result","f2mask");
filter.append("feMorphology")
    .attr("in","f2mask")
    .attr("radius","1")
    .attr("operator","erode")
    .attr("result","f2r1");
filter.append("feGaussianBlur")
    .attr("in","f2r1")
    .attr("stdDeviation","4")
    .attr("result","f2r2");
filter.append("feColorMatrix")
    .attr("in","f2r2")
    .attr("type", "matrix")
    .attr("values", "1 0 0 0 0.5803921568627451 0 1 0 0 0.3607843137254902 0 0 1 0 0.10588235294117647 0 0 0 -1 1")
    .attr("result","f2r3");
filter.append("feComposite")
    .attr("operator","in")
    .attr("in","f2r3")
    .attr("in2","f2mask")
    .attr("result","f2comp");

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

feMerge.append("feMergeNode")
    .attr("in", "f1blur");
feMerge.append("feMergeNode")
    .attr("in", "f2comp");
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("fill","#D1BEB0")
      .attr("d", path)
      .style("filter", "url(#bellaItalia)")
      .style("stroke", "#999")
      .style("stroke-width", 0.2);

    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>