Skip to content

Instantly share code, notes, and snippets.

@rveciana
Last active March 3, 2017 23:50
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rveciana/181f41663ae9cef7c00ad80cd085f413 to your computer and use it in GitHub Desktop.
Save rveciana/181f41663ae9cef7c00ad80cd085f413 to your computer and use it in GitHub Desktop.
Drawing a map with d3 and rough.js
licence: mit

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.

<!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>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<canvas id="myCanvas"></canvas>
<script>
var rough = new RoughCanvas(document.getElementById('myCanvas'), 900, 500);
rough.strokeWidth = 2;
rough.fill = "rgba(255,0,0,0.2)";
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>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment