Skip to content

Instantly share code, notes, and snippets.

@rveciana
Last active February 11, 2018 12:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save rveciana/8254549 to your computer and use it in GitHub Desktop.
Save rveciana/8254549 to your computer and use it in GitHub Desktop.
La Bella Italia like map for the Haiyan typhoon track
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment