Trying for a pencil/watercolor sort of effect. Each state is blurred and clipped to itself to create a stroke that bleeds inward. Turbulence and displacement filters muss the borders a little, and some line interpolation rounds the corners.
Chrome, Firefox, and Safari each apply the filters very differently!
See also: Pencil sketch, Colorized atlas style
US TopoJSON via Mike Bostock
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| path { | |
| stroke-width: 2px; | |
| fill: none; | |
| } | |
| .mesh path { | |
| stroke: #555; | |
| opacity: 0.8; | |
| stroke-width: 1.5px; | |
| stroke-linejoin: round; | |
| } | |
| rect { | |
| stroke: none; | |
| fill: rgba(224,186,148,0.3); | |
| } | |
| </style> | |
| <body> | |
| <svg> | |
| <defs> | |
| <filter id="tint"> | |
| <feColorMatrix values="1.1 0 0 0 0 0 1.1 0 0 0 0 0 0.9 0 0 0 0 0 1 0" /> | |
| </filter> | |
| <filter id="splotch"> | |
| <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="4" /> | |
| <feColorMatrix values="0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -0.9 1.2" result="texture" /> | |
| <feComposite in="SourceGraphic" in2="texture" operator="in" /> | |
| <feGaussianBlur stdDeviation="3.5" /> | |
| </filter> | |
| <filter id="pencil"> | |
| <feTurbulence baseFrequency="0.03" numOctaves="6" type="fractalNoise" /> | |
| <feDisplacementMap scale="4" in="SourceGraphic" xChannelSelector="R" yChannelSelector="G" /> | |
| <feGaussianBlur stdDeviation="0.5" /> | |
| </filter> | |
| </defs> | |
| </svg> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| var projection = d3.geo.albers() | |
| .rotate([96, 0]) | |
| .parallels([29.5, 45.5]) | |
| .center([-0.62, 38.65]) | |
| .scale(1065) | |
| .translate([width / 2, height / 2]) | |
| .precision(.1); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var svg = d3.select("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("filter", "url(#tint)"); | |
| var defs = d3.select("defs"); | |
| svg.append("rect") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var line = d3.svg.line() | |
| .interpolate("cardinal") | |
| .tension(0.75); | |
| var colors = ["#00c65e", "#c60084", "#c6c600", "#09a3bd", "#b15313"]; | |
| d3.json("us.json", function(err, us) { | |
| var neighbors = topojson.neighbors(us.objects.states.geometries), | |
| mesh = topojson.mesh(us,us.objects.states), | |
| features = topojson.feature(us, us.objects.states).features; | |
| features.forEach(function(d,i){ | |
| // Greedy color selection | |
| d.properties.color = colors.filter(function(c){ | |
| return neighbors[i].map(function(n){ | |
| return features[n].properties.color; | |
| }).indexOf(c) === -1; | |
| })[0]; | |
| // Mix it up a bit, get fifth color in | |
| colors.push(colors.shift()); | |
| // circular <use> doesn't work in FF | |
| defs.append("clipPath") | |
| .attr("id", "clip" + i) | |
| .append("path") | |
| .attr("d", path(d)); | |
| }); | |
| svg.selectAll(".state") | |
| .data(features) | |
| .enter() | |
| .append("path") | |
| .attr("class", "state") | |
| .attr("d", path) | |
| .style("fill", function(d){ | |
| return transparent(d.properties.color, 0.3); | |
| }) | |
| .style("stroke", function(d,i){ | |
| return d.properties.color; | |
| }) | |
| .attr("clip-path", function(d,i){ | |
| return "url(#clip" + i + ")"; | |
| }) | |
| .attr("filter", "url(#splotch)"); | |
| svg.append("g") | |
| .attr("class", "mesh") | |
| .attr("filter", "url(#pencil)") | |
| .selectAll(".path") | |
| .data(mesh.coordinates) | |
| .enter() | |
| .append("path") | |
| .attr("d", function(d){ | |
| return line(d.map(projection)); | |
| }); | |
| }); | |
| function transparent(color, alpha) { | |
| var rgb = d3.rgb(color); | |
| return "rgba(" + [rgb.r, rgb.g, rgb.b, alpha].join(",") + ")"; | |
| } | |
| </script> |
