Cartoon maps

A quick visualization experiment to create an informal / cartoonish map reminiscent of the game of Risk. The watercolor country border style is achieved by drawing a wide stroke around each country in the same color as the semi-transparent fill, then applying Gaussian blur to smudge the border while clipping to the original outline leaving a sharp boundary.

This was originally a gist hosted at bl.ocks.org, which seems dead now. This clone might still work.

See page source for the full details, but the key pieces are these:

.country {
  /* wide rounded stroke as the basis for blur */
  stroke-width: 8;
  stroke-linejoin: round;
  /* semi-transparent fill */
  fill-opacity: 0.33;
}

// blur that we'll apply to each region
svg.append("filter")
    .attr("id", "blur")
    .append("feGaussianBlur")
    .attr("in", "SourceGraphic")
    .attr("stdDeviation", 4);
...
// use predeclared path for each country to draw the region for stroke and fill as well as clipping
svg.append('g')
    .attr("class", "countries")
    .selectAll('.country')
    .data(countries)
  .enter().append('g')
    .attr("class", "country")
    .append("use")
    .attr("xlink:href", d => "#" + d.properties.adm0_a3)
    .attr("clip-path", d => `url(#inside-${d.properties.adm0_a3})`)
    .attr("filter", "url(#blur)")
    .style("stroke", countrycolor)
    .style("fill", countrycolor);