A #d3js sketch-style map based on Daniel P. Huffman's Times Approximate Linework, using d3.sketchy and a fill adaptation by Elijah Meeks.
xxxxxxxxxx
<html>
<head>
<title>Sketchy Map with D3</title>
<meta charset="utf-8" />
<script src="https://d3js.org/d3.v3.min.js" type="text/JavaScript"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.9/d3.geo.projection.min.js"></script>
<script src="d3.sketchy.js"></script>
</head>
<style>
svg {
height: 500px;
width: 600px;
}
.countries {
fill: #e2e3e3;
stroke: none;
}
</style>
<body>
<div id="viz">
<svg>
</svg>
</div>
<div id="controls" />
<script>
d3.json("admin1_polygons_topo.json", createMap);
var colorScale = d3.scale.ordinal()
.range(["#F8E1A5", "#4F4D42", "#A38869", "#D7DECF", "#8D927F", "#CFBE99", "#DCE9BD"]);
function createMap(conus) {
var countries = topojson.feature(conus, conus.objects.admin1);
var neighbors = topojson.neighbors(conus.objects.admin1.geometries);
var projection = d3.geo.albers()
.scale(800)
.translate([300, 200])
var geoPath = d3.geo.path()
.projection(projection);
var svg = d3.select("svg");
var defs = svg.append("defs");
var sketchy = d3sketchy();
var line = d3.svg.line()
.x(function(d) {
return d.x;
})
.y(function(d) {
return d.y;
});
d3.select("svg")
.append("g")
.attr("class", "bg");
d3.select("svg")
.append("g")
.attr("class", "fill");
d3.select("svg")
.append("g")
.attr("class", "border");
d3.select("g.bg")
.selectAll("path")
.data(countries.features)
.enter()
.append("path")
.attr("d", geoPath)
.attr("class", "countries")
.each(function(d, i) {
d.color = d3.max(neighbors[i], function(n) {
return countries.features[n].color;
}) + 1 | 0;
var originalNode = this;
d.geometry.coordinates.forEach(function(p) {
if (p.length < 2) {
p = p[0];
}
var projectedArea = [];
p.forEach(function(coordinate) {
var proj = projection(coordinate);
projectedArea.push({
x: proj[0],
y: proj[1]
});
})
d3.select("g.fill")
.insert("path", "path")
.attr("class", "sketchy-fill")
.style("fill", "none")
.style("stroke-width", "2px")
.style("stroke-linecap", "round")
.attr("stroke", colorScale(d.color))
.attr("d", cheapSketchy(originalNode));
sketchy.pathStroke({
svg: d3.select("g.border"),
path: projectedArea,
density: 1,
sketch: 1
});
})
})
}
function tweenDash() {
var l = this.getTotalLength(),
i = d3.interpolateString("0," + l, l + "," + l);
return function(t) {
return i(t);
};
}
function cheapSketchy(path) {
var length = path.getTotalLength();
var drawCode = "";
var x = 0;
var step = 2.5;
while (x < length / 2) {
var start = path.getPointAtLength(x);
var end = path.getPointAtLength(length - x);
drawCode += " M" + (start.x + (Math.random() * step - step / 2)) + " " + (start.y + (Math.random() * step - step / 2)) + "L" + (end.x + (Math.random() *
step - step / 2)) + " " + (end.y + (Math.random() * step - step / 2));
x += step + (Math.random() * step);
}
return drawCode;
}
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://d3js.org/topojson.v1.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://d3js.org/topojson.v1.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.9/d3.geo.projection.min.js