Drawing a map with d3 and rough.js

Testing the new Rough.js with a map.

The multipolygons don't work properly, so I separated them into simple polygons.

The performance is very poor, so a topojson simplification should be done before using this.

forked from rveciana's block: Drawing a map with d3 and rough.js

<!DOCTYPE html>
<meta charset="utf-8">
<script src="//roughjs.com/builds/rough.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>

var projection = d3.geoAlbersUsa();
var mappath = d3.geoPath()
    .projection(projection);

var colorScale = d3.scaleOrdinal(d3.schemeCategory20);

d3.json("us.json", function(error, us) {

var features = topojson.feature(us, us.objects.states).features;
  features.forEach(function(d){
    d.geometry.coordinates.forEach(function(e){
      var subFeature = { type: "Feature",
      id: d.id,
      properties: {},
      geometry: {'type': 'Polygon', 'coordinates': e} };

var path = rough.path(mappath(subFeature));
      path.fill = colorScale(d.id);
      path.hachureAngle = 2*d.id;
      path.fillWeight = 6;

});

</script>

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://roughjs.com/builds/rough.min.js

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v1.min.js