block by rveciana cb60b88d5b42ab50a5073e09f78a960d

Coastal Vignette with D3js

Full Screen

This example shows how to genrate a Coastal Vignette from a simple topojson using the jsts library and D3js.

I took the idea from this tweet by John Nelson. The mapping style is taken from this other tutorial by William Knowles.

By playing with the number of lines and their color, distance, thickness, opacity and dashing, the possibilities to style the map are really nice.

Using the jsts library was the easiest way I found, altough the integration with d3js is not easy. Maybe using WKT instead of GeoJSON as an input would be nicer. Also, if your geometries cross the -180 meridian, the buffer lines go crazy. This should be fixed too.

index.html

land.topo.json