clip map layers to mask

Community Help
1

Hi,

Sorry if this is redundant. I have not found an example of what I am envisioning.

This might be partly because it has been tried and looks bad, and also because for one-off examples this would be fairly easy as a post-code step in Illustrator. Still, the concept is simple and I may be thinking about the implementation unhelpfully, so I want to run it by smarter people.

Say I am displaying traffic data (AADT) on a map base layer (Openstreetmap, Google, USGS etc). These are the components I have now, but I may want to add more complex elements later (AADT source measurements if I can get them) and maybe drone imagery (again, if available).

I have LineString GIS data for only a small subset of roads, a displaying them on a rectangular map is getting monotonous.

I want to be able to clip-mask the entire plot/map area to an arbitrary polygon like a municipal boundary, or (as I experiment to get the look I want) more complex polygon-unions to show busy roads entering urban areas.

Some reasons I want to do this procedurally, rather than in Illustrator:

  1. I do not currently have Adobe stuff and that’s what I know
  2. I want to share this idea and implementation with other people who may lack those tools also
  3. I need to experiment to get the result I want. I am expecting many iterations will not look great. The aim here is visual clarity to aid local advocacy (bike infrastructure/walkability/accessibility).
  4. I often want to show a time dimension—if only to highlight paucity of data—so I want to keep each frame as clear as possible. I am trying to communicate some thoughts about traffic volume from a pedestrian perspective to a car-centric audience.

Hope this makes sense. I will try to add images later. Thanks for any advice.

2

Depending on the tool you’ll use there will be various ways to clip a result with a polygon. This can be done by adding a (svg) clip mask to the projected path, by clipping the projection, or even by clipping features to polygons before you project them. These are different approaches that all have merits and drawbacks.

Here are a few examples to start:

3 Likes
3

Thanks @Fil! This is a great list. I will try to narrow down what combo is closest to what I need and mark a solution.

Not to impose on your generosity, but since you are thoughtful about these things, I’ll mention an intersecting issue.

Delaware has dangerous roads and is relatively flat, but does have hilly areas in the northern ‘crown’ of the state that are perceptually significant to drivers and for traffic engineering.

I am trying to think about how to show these contexts in a way that ‘pops.’ Scope is important—maybe I need to show just one road/intersection at a time—but thinking about how to “use the Z-axis” effectively is the specific issues I want to run by you. Do any interesting experiments or examples come to mind?

4

Nope, sorry! Please let us know if you find a solution?

5

Shade by elevation, perhaps? Of course, the mechanics of doing (or anything else, really) that depend on the tools you’re using.

6

thanks @fil and @mcmcclur. This is a hobby thing and will probably take me a while but I will report back if I come up with anything of interest. I am still quite slow in D3 and am I not really here enough to get very fluent.

I will likely shape by elevation in some fashion but when I plot regional topography, sometimes the impact on a screen is a bit underwhelming compared to the experience of driving or walking along a particular road. I am looking for a ribbony aesthetic, along the lines of Roller Coasts Tycoon. I would like to show municipalities a bitt like you might see a little video same world, all distractions removed and viewable from any angle.

I want to take a reasonable degree of inspiration from higher-level visuals like below but my main focus is to come up with ways to talk about what we are measuring and not measuring in terms of road dangers.