| 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.
forked from rveciana's block: Drawing a map with d3 and rough.js [UNLISTED]
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <script src="https://roughjs.com/builds/rough.min.js"></script> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://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.schemeCategory10); | |
| 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 = d.id; | |
| path.fillWeight = 1; | |
| }); | |
| }); | |
| }); | |
| </script> |