Tag Archives map

Earth at Night, Mountains of Light

What if Earth’s terrain was created by nighttime lights?

Japan at night

Recently I worked on a 3D JavaScript mapping experiment where the luminance of light emissions captured in satellite imagery raises and sculpts new mountain ranges across the globe.  Brighter areas become high peaks, while darker regions flatten into valleys and plains.

Note: This post could have been written in puns alone, but I’m going to hold myself back from that and try to be a good person.  But I mean if you want me to shed some *light* on the situation and step out of the *shadows*, this wasn’t a *night*mare to make…

Another note: I believe Sarah coined the term “mountains of light“.  I like it, thanks!

Here’s the general workflow of how the code works:

  1. Create a custom elevation layer with the ArcGIS API for JavaScript.
  2. Get that elevation layer wired up to Nasa’s nighttime lights satellite imagery server.
    1. Ok fine, if you really want to geek out with me, it comes from the Suomi-NPP VIIRS sensor.
    2. The polished and cleaned up pixels are called “Black Marble” and provide a 500m image resolution.
    3. This isn’t live data but rather a static composite of images taken at different times.  Joshua Stevens and Rob Simmons helped me get a better understanding of the hard work that went in to creating and cleaning up this raw imagery into a beautiful worldwide dataset.
  3. Back to the code: for every nighttime light pixel, convert the visual color ramp that goes from dark blue/black to yellow/white into a simple 0-1 number range.  For this I used the chroma.js “luminance” calculation.
  4. Take the 0-1 number value and multiply it by some huge number!  We don’t want 1 meter tall mounds, we want wild and exaggerated mountains reaching high into the sky.
  5. Drape anything you want on top of this fake terrain.  In this case it made sense to also put the nighttime lights imagery on top of the terrain that it generated.

This is a view of northern India, the Himalaya, Nepal, Bhutan, and the Tibetan plateau with our fake mountains at night.

Earth at Night: Himalaya night

If we drape daytime satellite imagery over this synthetic terrain it is hard not to notice something is a bit off with the Himalaya.  Viewing the Earth this way wasn’t the original intent of the app, but it is fun to look at if you don’t mind the headache.

Earth at Night: Himalaya day

Not gonna lie, I’m also pretty damn hyped that this JavaScript dataviz experiment made it on to Kenneth Field’s “Favourite maps from 2018” and was also featured on Nathan Yau’s FlowingData and John Metcalfe‘s Washington Post article.  Thank you all very much!

And here’s a bunch of other links to keep you going down the rabbit hole.

Visit the app here: https://jwasilgeo.github.io/esri-experiments/earth-at-night/

Drawing Hillshade: A tutorial (with time lapse videos)

Introduction

Welcome to my tutorial on drawing hillshade. This post is for people who want to draw map hillshade (shaded relief) with pencil/graphite. I have just posted another *new* tutorial for drawing hillshade in COLOR. This post you are reading now is a tutorial for drawing with your graphite pencils, and it serves as the foundation for the colored-pencil hillshade maps. I’ll present some fundamental steps that should get you on your way to being a pro hand-drawing hillshader.

A friendly recommendation to all you graphite art enthusiasts: Drawing at your best requires getting into the flow. Reading through this post, and then doing some warm-ups (some listed at the end of this post) is a great way to get into the flow of drawing hillshade. Warming up will help you get acquainted with the paper and graphite you’re using. Music helps too!

The description of each step is accompanied by a time-lapse video of me demoing the step. In the videos, you can follow along as I sketch the area around Mount Everest captured in Imhof’s hillshade. I also incorporated photos of my sketch of a ridge along the Knik Glacier in Alaska, showing the static results of each step. Below, you’ll find a extended video of this Alaska drawing as the second-to-last item in this post. The reference for this second video comes from a digital hillshade image that I created from a DEM using GIS software. In Step 1, (Choose a Reference Photo) you can download this image as a reference photo, along with some others if you like.

The Materials

  1. Pencils. If you’re incorporating hillshade into a map with other information (labels, cities, etc.), you might want to use pencils on the lighter end of the scale. When drawing just the hillshade, I like to use any pencil ranging from 2B to 6B on the the HB graphite scale (sometimes up to 8B if I’m feeling super shady). I’ve drawn entire hillshade landscapes using only the 2B, but the 3B to 6B are so great for blending the smoother areas. Faber-Castell is my go-to pencil brand. I find them to be quite smooth. Staedtler pencils are also good.
  2. Paper: Get a good sketch pad. Get a few with various weights and textures, in fact. Always experiment with the paper to which you are committing your final project. Graphite blends differently on various paper types.
  3. Blending Stump(s) and tortillon. Everyone is going to have a different drawing style. When I draw, I use the tortillon a lot. You’ll find it really useful for the gradients when your drawing hillshade.  While there is a difference between blending stumps and tortillons, this post will use them interchangeably and let you choose which you want to use (both the term and the tool). While you will vary the pressure, I use medium-to-slightly heavy constant pressure when using the blending stump (and tortillon). The thicker the paper, the more pressure I usually use.
  4. Erasers. I use a high polymer eraser and a kneaded eraser. The high polymer gives a nice clean slate in the spots you’re erasing, and the kneaded eraser is great for smudging off graphite to lighten up spots without removing all the graphite. Kneaded erasers can also be formed into narrow shapes for erasing small areas and finer lines. Sometimes, I will use an exacto knife to slice off a narrow piece of high polymer eraser for these fine-line erase jobs too.

To trace or draw freehand?

When practicing this technique, I like to draw freehand. It’s really great practice for getting accustomed to drawing from real-life references. Freehand also helps train your mind for how to draw from the imagination. However, when it comes to final drafts of real landscapes, for example a map of a real space that I want to put out into the world, I will likely perform Step 1 by tracing the ridges on a light pad, light box, or on a computer screen (super gingerly to protect the screen!) So, while you’ll see me drawing freehand in the videos, just know that you don’t have to do this. In fact, Step 1 for the Alaska hillshade that I demonstrate was traced from my computer screen.

BUT! All other steps after sketching the ridgelines do not need to be traced. In fact, it is recommended that you do all other steps by freehand while using an image as the reference. Paper over a light pad is going to hide all of the luscious nuances of light values. You’ll never be able to capture the landscape’s drama by tracing your whole way through it.

Sarah Bell tracing the North Cascades

If you’re tracing, only do so as you initially sketch the ridges and valleys. Here I am tracing the area around Ross Lake, in the North Cascades National Park

The Preparation Steps

(Actual drawing begins Step 1, Sketch the Ridgelines)

Pre-Step  1 – Choose a Reference Photo

If this is your first time drawing hillshade, I recommend starting from an actual reference. This will be help you understand how the light plays on the landscape. But where do you find a reference photo of hillshade? Here are a few ideas:

*Note – If you are using an image made from a DEM as your reference image, remember that these can oftentimes show a lot of extra data in the landscape. It is ok to generalize to the predominant gradients and values along the landscape where DEMs may have a little too much detail.

It can be helpful to start your shaded relief drawing journey with a great reference photo of a steep area that has some significant relief (a lot of elevation difference between the peaks and valleys). The reason I find this helpful in the beginning, is that steep areas allow for a lot of shade, so they will have a lot of different light and dark values you can work with. A scale of 1:100,000 or larger (larger scales: closer to the Earth) is a little easier to start with as well. The smaller the scale (farther from the Earth) the more ridges and valleys you’ll have on your page. It’s nice to start with something less challenging, but I also know how fun a good challenge can be! Remember, you don’t have to start by drawing the entire landscape in the photo; you can focus on a few ridges as a warmup.

Here are three magnificent maps with gorgeous hillshade. Each of them has areas of distinguishable relief, which makes the lighter and darker areas easy to identify.

From L to R: Imhof's Everest map; S. F. Emmon's Topographical Map of Mosquito Range; Imhof's hypsometric & hillshade map of Rheinwaldhor-Biasca, 1963

From L to R: Imhof’s Everest map; S. F. Emmon’s Topographical Map of Mosquito Range; Imhof’s hypsometric & hillshade map of Rheinwaldhor-Biasca, 1963. You can find the entire PDF of this atlas here.

Pre-Step 1.a – De-saturate: Black-and-White

This step is optional, but it’s a nice trick when you’re just practicing: De-saturate all the color from your reference photo. My approach when starting with hand drawn shaded relief was to use a black-and-white image as my reference photo. The reason is that all shaded relief really is is the difference between light and dark values on a page or screen to give the illusion of elevation relief. When making graphite art, the appropriate use of light and dark values is what makes a drawing realistic. It sounds like an oversimplification, but it’s true! You can get the right values in a variety of ways: pencil pressure, erasing, smudging, smearing, blending, hatching, scribbling – really any style you want to use to make the brighter areas brighter, and the darker areas darker. Back to the original point of this paragraph – Black-and-White reference images. When beginning this journey of hand-drawn hillshade, I found it a lot easier to see the difference between light and dark values in my reference photo if I was using an image without color. Luckily, on page 339 of Imhof’s Cartographic Relief Presentation (2007. Esri Press), there’s an image of just shaded relief for his Everest map, which I’ve included below this paragraph. This is the same area from the map above-left.  Take a moment to study this photo. It is a beautiful placement of light and dark values to give the impression of mountains and glacial valleys. There are no harsh lines. The ‘lines’ you see along the ridges are just an illusion provided by darker slopes’ adjacency to lighter slopes. Understanding that key point is fundamental in drawing hillshade.

E. Imhoff Shaded Relief Everest

E. Imhof’s shaded relief for his Everest map, 1967-1972 (photo from Cartographic Relief Presentation, Esri Press 2007)

Notice how dark those southeast facing slopes are! The richness of this particular image is the reason I was so drawn to it for one of my first hillshade sketches. If I were to draw a hillshade as part of a map with other information, like labels, buildings, glaciers, lakes, I might want to ease off on the darkness so that the other information could show up well.

Pre-Step 2 – Identify the light source

It really is about the lights and darks! It’s implicit the name, really: hillshade; shaded relief. You’re basically creating an impression of elevation by adding shade to the areas where less light can reach. Take a moment to identify the direction the light is shining in your reference image.

The light source on almost every shaded relief that you’ll see comes from the upper-left/northwest. In fact, there’s this weird phenomenon that happens when you switch the light source from upper-left to lower-right – or of you rotate a shaded relief image 180 degrees – the high areas look inverted. The two following shaded relief images of Mount Saint Helens are identical. The one on the left was rotated 180 degrees so that north is at the bottom of the image, while the image on the right has north at the top. Notice how the stratovolcano on the left image appears to be sinking into the earth instead of rising out of it, like the image on the right. Also, the left image’s valleys look more like ridge tops. It’s a neat optical illusion. Check it out! These images are identical. I promise.

These are identical shaded relief images of Mt. Saint Helens. On the left, the image has been rotated 180 degrees so that the light source is at the lower-right. Notice this orientation gives the image an inverted look - as if the mountains sink into the earth like canyons. On the right, north is at the top of the image.

These are identical shaded relief images of Mt. Saint Helens. On the left, the image has been rotated 180 degrees so that south is at the top of the image, and the light source is at the lower-right. Notice this orientation gives the image an inverted look – as if the mountains sink into the earth like canyons. On the right, north is at the top of the image.

With the light source in mind, investigate all the nooks and crannies of your reference photo. This is a sort of warm-up I like to do when drawing hillshade. Sometimes we draw what we think should be there instead of what the still life, landscape, model, or any other reference is telling us. Where do the darkest shadows collect? Where do the brightest parts of the slopes shine? Also check out the gullys, valleys and plateaus. Understanding the light’s behavior along the landscape you’re about to draw is key to getting a great impression of what’s really there. And yes! It is an impression. So 100% perfection is not required. But your peaks, valleys, rolling hills should correspond extremely closely with your reference, especially if you’re making a map to be used or viewed in the wild. Although, I’m also a fan and creator of fake maps, fantasy maps, and maps inspired by – but not based in – reality. And hillshade in those maps are rooted partially or fully in the imagination. But you’ll even need to account for the light’s behavior – albeit imaginary – in those landscapes to make them look like mountains.

The Drawing Steps

Step 1 – Sketch the Ridgelines

Purpose of this step – In this step, you’re basically drawing the framework upon which the subsequent steps will be based. These sketched lines will “disappear” soon, as the image starts to take a more physical form while you continue to sketch and blend.

Pressure and Pencil Choice – After investigating the light source on your reference photo, the next step is to lightly sketch the ridgelines – or divides. I like to use a #3B or 4B or higher pencil. Since you will eventually blend this sketched line with your stump, you’ll want to sketch lightly. The #2B is nice for blending, but I find that the increased softness in the #3 makes this a little easier. You could use a #4B or darker, but just know that it is always easier to go darker later on, and more difficult to go lighter.

Sketch the ridgelines & divides. Start with the most prominent ones.

Sketch the ridges & divides. Start with the most prominent ones.

In this time lapse video below, I’m sketching most of the prominent ridges from Imhof’s shaded relief image. While I’m doing so, I’m keeping in mind that these ridges are going to simply serve as guidelines which will divide light and dark values – that is to say these ridgelines are not the drawing, but rather they set up the framework by which you will shade.  So, the pencil pressure should be very light. I’m also faintly sketching in some of the lines where the dark and light values diverge in the valleys, but mostly this step focuses on the ridges.

Hillshade Step 3 Alaska

The ridge along Knick glacier after I sketched the ridges via tracing. This will be the only step that tracing will occur (if at all); the remaining steps are freehand. This image also includes some lightly shaded areas I did while sketching the ridgelines. More shade added in the next step.

Notice how faint the sketched ridges are.  Although the images in this tutorial each have prominent ridges, the concept holds true for gentler landscapes as well: Draw a faint line along the highest crest that follows the length of your hills, mountains, and cliffs. Note that in gentler more rounded landscapes, you’ll eventually blend this sketched line, so draw faintly.

Step 2 – Shade the Shadows

Purpose of this step – The objective for Step 2 is to get some graphite on your page so that you can blend with your blending stump in Step 3. This shading step will start to give your drawing some depth as you add graphite to the general areas where the predominant shadows fall. As explained below, the shading for this step should be kept pretty tight against the ridges and features where the shade/shadows begin, since this is usually where shadows are darkest in shaded relief (or so I have found).

Pencil choice & pressure – Using a pencil ranging from the #3B-#6B start lightly shading in the landscape you just sketched on the sides of the ridgelines and hills where the shadows are cast. The pressure should still be pretty light. Tilting the pencil to use the broader edge (as opposed to using the tip of the pencil) will make the graphite easier to blend.

Technique – As previously stated, you’re shading pretty tightly close to those ridgelines for now (see video below). You’ll fill in the rest of the shadow along the slopes gradually. This is also an opportunity to sketch in some of the less prominent ridges that you may have left off from the previous step. In fact, I sketch a lot of minor ridges later on in the process once the drawing is beginning to take form. Here’s a time lapse video showing me doing Step 2:

Alaska shaded relief: A closeup view of Step 2 (Shade the Shadows), prior to blending. The pencil pressure was pretty light, and was done with a 4B Faber-Castell. This combination of medium-to-light pressure with a softer pencil will make it easy to blend.

Now we have a nice sketch going! Don’t be frustrated that what you have doesn’t look like a shaded relief yet. It will soon. You’re doing it right!

Step 3 – Blend!

Technique – This step is so rewarding because it is the one where your sketch starts to take the form of a true hillshade drawing. Take one of your blending stump tools (I’m actually using a Tortillon for all the drawings you see here) and start blending the graphite you just shaded in the last step away from the ridge in the direction that the shadow falls. If you’re doing a deep canyon, this is still the same, except you’d be blending away from the rim instead of the ridgeline. You will essentially be drawing with your stump by moving around the graphite. I blend in tiny little circle motions. You can scribble, drag, or back-and-forth, whichever works for you. Remember to be consulting your reference photo occasionally.

Pressure – Test with various pressures. I find that I use a medium-to-heavy pressure when I blend. Don’t be shy when you blend; you can tilt the tool to get broader coverage. Now is also a good time to mention that I spend the majority of time using the blending stump/tortillon when I draw hillshade. It’s true. I’m blending or drawing with the blending tool more than I’m using a pencil.

Remember to consult your reference image throughout this process. Try not to blend into the lighter side of the ridges, especially if the ridges in the reference photo indicate a sharp edge versus a gradual slope. If you do, you can easily erase it. In this video, I’m taking the blending stump and just blending those areas I shaded.

Soft ridgeline drawing (Nifty Trick) –  Much of my time drawing hillshade is with the blending tool.  After you’ve been blending this dark graphite for a few minutes, you’ll notice that it will build up in your blending tool. This is GREAT! You can use the extra graphite that accumulates on the blending stump to draw in some of the minor ridgelines on the brighter slopes of the mountains.  This is useful since brighter slopes’ ridges have a softer appearance, and drawing with the blending tool has an instant softness to it. Notice how far the blending stump can take that graphite you just put down in the previous step!

The landscape is now taking form on the page.

Alaska Hillshade step 4

My Alaska hillshade sketch after the first blending phase. Although it isn’t complete here, it’s starting to gain some depth.

Step 4 – Shade Again

Purposes of this step – This step is a lot like Step 2, but now you will focus on more details in your reference image, and transfer them to your drawing by shading. Take a good look at your reference photo. Where is it the darkest? How dark are those dark values? Pretty dark! I usually find that my drawings really start coming to life when I start getting dark. This doesn’t mean use a ton of pressure. But you want to try to increase the pressure ever-so-slightly. I use a light-to-medium pressure. Choose a #3B to #6B pencil. Maybe even a #7B or #8B if you’re feeling it. I used a #5B in the following video. Remember that you will blend all of this graphite. After studying your reference photo, start shading in the darkest areas where light has a hard time reaching. This will likely be against the ridges. You will also use this step to begin shading in some of the minor ridges and the valleys that haven’t been added yet.

In the video below, you’ll see me add a lot of new ridges that didn’t get added when I did Step 1 (Sketch the Ridgelines). I’m adding these as I frequently consult my reference photo.

Getting these darker areas into the drawing really makes the higher areas begin to pop. Now get ready for some more blending.

Step 5 – Blend Again

In Step 4, you just put down some more graphite on your paper with a pretty soft blend-able pencil. Now it’s time to blend it. Following the same principle from Step 3, use your Tortillon to blend all that graphite you just put down. Remember you can also draw with your Tortillion with all that extra graphite that you’re picking up as you blend. You can also continue to add those ridges on the sunnier slopes, where the shadows aren’t as harsh.

Notice in the video above, I did a lot of drawing with my Tortillon on those sunnier slopes. I also used the extra graphite on the stump to fill in the valley floors.

Step 6 – Create the Highlights

With all that shading and blending that you’re doing (nice work!), you’ll find that some areas need to be brightened along the way. You’ll use the eraser to do this. Consult the reference image and compare it with your drawing to identify some ridges and slopes that might need to be illuminated.

If it is a narrow spot, make sure you’re using a narrow polymer eraser or a narrowly formed part of your kneaded eraser. I didn’t get a long recording of myself erasing for highlights; this video was recorded as a time lapse, and then slowed down; the result is a little choppy. However, slowing it back down was necessary to show the technique more clearly.

Step 7 – Repeat until you’re happy with it

Now just keep shading and blending while still consulting your reference photo, paying attention to the light source, values, and forms of the ridges. The key throughout this process is to remain confident, and not get frustrated. Oftentimes the drawing doesn’t start looking like the landscape in your reference image until you’re well into the process. Drawing hillshade takes practice, and with each iteration you will learn more tricks and your own personal drawing style will emerge. Skip to the warm-ups below to get the hang of it.

Below is my Alaska hillshade video, which pieces the steps together:

Remember to check out my tutorial on colored-pencil hillshade too!

Hillshade Warm-ups

Draw simple shapes like the following, and test out the steps. Consider the imaginary upper-left light source as well.

Sketch the ridgelines. Using simple shapes like this is a good way to warm up.

Sketch the ridgelines. Using simple shapes like this is a good way to warm up.

Lightly shade in the shadier slopes along the divides.

Lightly shade in the shadier slopes along the divides.

Blend in the graphite on the shady sides

Blend in the graphite on the shady sides

Repeat until complete

Repeat until complete

The Making of a Stacked and Animated Map

Remember that time when we mapped and animated the 2018 Formula 1 racing circuits?

You know, it had that wild, neon pink, retro color scheme…

Formula 1 screenshot

I promised to “walk through how D3 and flubber were used to make all this come together”.  Well then, we’ve arrived here, and along the way we looked at how to begin making web maps in D3 followed by how to wrap your mind around web map projections.  Be sure to check out those posts, too.  The concepts build on top of each other in the hopes of making this one easier to digest.

Getting to the main point:

How do you stack and animate geographical features that are located in different places?

Map projections play an important role in this technique.  I chose to project the Formula 1 circuits using the Mercator projection because it is good at maintaining the shapes of small features, specifically when rotated to each feature’s centroid and zoomed in closely.  Mercator thus is “conformal” in projection terminology.  And since it can be a pain to remember: zooming in closely on a map means using a large, local map scale.

I’ve broken out the inner workings of the stacking and animating technique into 3 separate parts which are very much alive and kicking in the CodePen demos below.  Each Formula 1 circuit is first translated from geographic coordinates to SVG space (projected) by rotating and scaling the Mercator projection to every one of these circuit features.  This is what fundamentally makes them appear stacked because they now occupy the same area of the SVG element.  Finally, instead of showing all of them at once, we only show one circuit’s shape at a time and animate to the shape of the next circuit in the stack.

Part 1: A two-dimensional globe is drawn with an orthographic projection to show how projections can be rotated to specific locations on Earth.  In the bottom area of this demo–using the Mercator projection with a large map scale–we also rotate to each circuit’s centroid location and then add the circuit to the stack.

See the Pen Stacking & Animating Formula 1 Circuits in D3 (Part 1) by Jacob Wasilkowski (@jwasilgeo) on CodePen.

Part 2: Skip the leisurely world tour and immediately make a stack of circuits.  Again, each circuit is drawn as an SVG <path> element with the assistance of a uniquely rotated Mercator map projection.

See the Pen Stacking & Animating Formula 1 Circuits in D3 (Part 2) by Jacob Wasilkowski (@jwasilgeo) on CodePen.

Part 3: By now we know how to quickly create a stack of disparate geographic features. The focus in this final demo is on the animation that morphs between all the circuits’ shapes using the flubber JavaScript library.

See the Pen Stacking & Animating Formula 1 Circuits in D3 (Part 3) by Jacob Wasilkowski (@jwasilgeo) on CodePen.

Map Projections on the Web

Following our tutorial on creating maps in the browser–Get Started Creating D3 Maps–I thought it would be fun to explore map projections on the web with JavaScript.  D3 in particular gives us the opportunity to be very creative in how we render geospatial data with the ability to choose from and customize many different projections.

See the Pen D3 Projected Halftone Pattern by Jacob Wasilkowski (@jwasilgeo) on CodePen.


Reduce those dimensions

Locations of our geospatial data exist somewhere on our three-dimensional planet, but we have to make two-dimensional maps for our flat electronic screens (or pieces of paper!).  Deciding which map projection to use is an exercise in telling your data how it needs to bend, twist, rip, and transform from a three-dimensional reality to a two-dimensional medium.

Different map projections exist for different reasons and any choice made is a trade-off for which property you’d like to preserve from your original data, including area, shape, angle, or distance.  For example, if you need to maintain the correct areas of countries, then you may have to give up caring about their shapes becoming distorted.  (This would be called an equal-area projection, by the way.)  There is no perfect map projection to fit all situations.

Center or rotate a web map?

Most of the web maps we interact with use some variation of the Mercator projection. It is known as a conformal projection and nearly always is rotated in a way that is visually very familiar and comfortable to us: north is up, south is down, and land masses closer to the poles are distorted in area and appear much bigger than they actually are.

Moving around on this kind of web map changes the center location, which is similar to shifting a paper map around on a table.  When you navigate up to view Greenland in a web map, it would be like moving a paper map down, right?  Greenland’s area is still distorted and bloated.

But when you interact with a globe in real life you rotate it.  The same is actually possible for all map projections, and in D3 we can rotate along 3 different axes.  If the world’s landmasses look unfamiliar when rotating a map’s projection it doesn’t mean we are doing something wrong.  Perhaps unconventional, but not necessarily wrong.  Our three-dimensional data is simply being instructed how to reshape itself onto a two-dimensional map.  If we were to rotate the same example web map to Greenland its area would be much more accurate, but at the cost of other landmass areas becoming distorted.

Here’s a demo showing the differences between centering and rotating.  The top row uses the Mercator projection while the bottom uses the Orthographic projection which resembles a globe (but a flat globe in 2-D).

See the Pen D3 Map Projections: Centering vs. Rotating by Jacob Wasilkowski (@jwasilgeo) on CodePen.

Circles, circles everywhere

What if we were gods and could sculpt perfectly circular islands of the same size and then place them evenly around the planet?  I suppose even on our best days we don’t have this power–sorry–but we can at least draw them on a map.  These regularly spaced circles, called Tissot’s indicatrices, show the unique distortions of each projection by stretching, warping, and also moving the circles around.

The regions in the next demo that contain evenly distributed, small circles exhibit very little or no distortion.  But as the circles grow, morph into other shapes, or move away or closer together, we are given visual cues about how the distortions of a projection affect the sizes, angles, and distances between geographical features throughout the map.

See the Pen D3 Map Projections by Jacob Wasilkowski (@jwasilgeo) on CodePen.

Which one is your favorite?  Are any of these cool enough to be a tattoo?

Go make some maps

If you want to experiment with map projections, visit Get Started Creating D3 Maps and start making changes to the Canvas demo or SVG demo.

Look for the JavaScript code block starting with var projection = d3.geoMercator() and replace it with another projection documented at d3-geo, d3-geo-projection, or perhaps d3-geo-polygon.

Learn more

Have fun distorting the shape of the world!

“Bring Up State” Animation Effect with D3

*Check out our What’s Your Vote Worth? data viz storytelling to see this effect in action.

Tired of falling down into web maps?

Zooming in, zooming in, and zooming in from outer space down to the Earth’s surface got you feeling sad?

Here’s another idea: demand that geographic features come up to you. Web maps typically require you to zoom in and may give the sensation of “falling down” or “diving in” towards the Earth’s surface. Why not make this everyday interaction become more user-focused?

Click on a state to get started.

See the Pen Bring Up State – D3 by Jacob Wasilkowski (@jwasilgeo) on CodePen.

In this JavaScript code sample written with D3js, called “Bring Up State”, we serve—provide, give, deliver—a state polygon that has been clicked on to give it full focus. This is the opposite from expecting your audience to freely zoom in as with traditional web map experiences. This sample goes one step further by fading away the remaining states in the background to alleviate visual clutter and bring attention to the current state. Take a look at the code to see how it is all glued together.

Just click—no need to fly down closer to the Earth—and the visualization will do the heavy lifting of bringing up the geographical feature directly to you.

Creating a Satin Waterbody Effect in Adobe Illustrator (tl;dr: inner glow!)

Each style decision a cartographer makes on their maps’ features will contribute to the holistic ambience of the map. For example, a map’s tone can change in an instant just by switching typefaces. You might have even had one of those revelatory moments when a typeface gets changed accidentally in flash of serendipity, and suddenly your map has an updated fresh style and direction.

Color choices, amount of colors, graphic design effects, line weight, and a lot of other things in addition to typeface choices are among the decisions that a cartographer makes to achieve – or discover – a particular ambience in their maps. Cartographic water styling is one of these effective ways to achieve a map’s overall mood. In this post, I’m going to give some quick steps to achieve a satin waterbody look in Adobe Illustrator. It’s super easy and fun, and I’ve been doing it for so long that I sort of took it for granted. However, in the few years that I’ve been sharing my maps publicly (I’ve presented on my tendency to be a hermit of sorts) people have asked “How did you do that water effect?” It is invariable that at least one person will ask this question after I’ve presented or posted a map that has this waterbody effect. It’s also a guarantee that I will be excited to chat about it since it is likely that I will also learn from the questioner while sharing with them this water technique.

A small snapshot of an in-progress map I’m making that uses this waterbody technique

There are so many layers with their visibility turned off in this map because it is only about 40% complete. Sharing still, because this map is the one that the Skype call stems from.

Due to the combination of taking this water effect for granted and having some hermit propensities, I had almost convinced myself that it wasn’t worthy of posting about this technique. But after scheduling a Skype meeting last week to discuss this very technique after someone saw a map I shared on Instagram, I decided, “Why not?” So here are some simple steps to get a satiny water look for your maps in Adobe Illustrator. This post focuses on open water, or water that is not fully inside the map extent (i.e. the waterbody is a very large part of the overall map, and is cut off by the edge(s))

Some of these steps will not be necessary depending on your map’s water data.

*TIP! If you are not dealing with open water in your map, but rather your map has waterbodies that are fully inside your map’s extent, like the lakes in my map above, then you can SKIP TO STEP 4. tl;dr: It’s the Inner Glow Effect!

1. Ensuring your land and water polygons are well aligned

A map’s land data doesn’t always align perfectly with water data shoreline. The cause for the mismatch could be that the data sources are different, or that they were created for different scales. Whatever the cause, it doesn’t matter, because you can fix the misaligned polygons with Adobe Illustrator’s Pathfinder tools. In the interest of brevity, I’ll just focus on the most common scenario that I encounter with mismatched land/water polygons.

In the AI file below, I have a Land layer and a World Ocean layer. However, the World Ocean layer was created for a much smaller scale than my Land layer, so it has way less detail, and the mismatch is pretty atrocious.

Check out Orcas Island (large island in the center of the image below), and the white gaps around it indicating the difference between the water and land layers. The detail of the World Ocean layer is so much less than the detail of the Land layer that the World Ocean layer doesn’t even include Waldron Island to the northwest of Orcas. For the best results of the satiny open water look, I like to have all the land details including these tinier features like small islands in the effect at first. If somewhere in the process, these smaller features become an issue to the aesthetic, they are easy to remove.

Small scale ocean data with large scale land data

Orcas Island: Small scale ocean data with large scale land data

2. Creating your own Open Water!

If your open water polygons are perfectly aligned with your land polygons, then this step will not be necessary, but the next step will.

Because my land and open water polygons are not well aligned, I’m going to create my own open water polygon inside of Illustrator. In fact, I’m just going to delete my World Ocean layer, but hang onto your original water layer if you think you might need it for reference later on.

To create a new layer in Adobe Illustrator, just click the “Create New Layer” icon at the bottom of your Layers panel. Drag this new Layer beneath the land layer, and name it whatever is appropriate. I’m going to name mine “Salish Sea” since this is the encompassing term for all the inlets, channels, bays, and sounds that make up this water body.

Now you’re going to want to draw a rectangle in your new waterbody layer that is larger than the land that makes up the shoreline. So click the Rectangle tool, or type the letter “M” for the keyboard shortcut to get the Illustrator Rectangle tool, and draw your polygon. See the video below for how to do this.

Creating the new waterbody

 

3. Clip your new Waterbody to the Land

Ah, the joy of Illustrator Pathfinder tools. Before you clip your waterbody to the main land layer, you’ll have to make sure that all your land is in one path. To do this, you’re going to use the Unite Pathfinder tool. If you have only one polygon (closed path in AI) then you should be ok. Since my land from which I want the satin waterbody effect to emanate is comprised of several islands, a mainland USA polygon, and a mainland Canada polygon, I know for certain that I need to Unite my land shapes. These shapes must be closed paths! Double check this before moving forward.

3A – Unite the land polygons

First duplicate  all the land polygons layer(s) – there could be multiple – that you want to use for the satin waterbody effect. If there happens to be more than one layer that you are duplicating, make sure to put all the artwork from the duplicated layers into one single layer before uniting. With all the closed paths selected in this new duplicated layer, click on the Unite Pathfinder tool. If all your paths are closed, this will cause polygons that are touching to be merged into one single closed path, and will put all the paths, including islands, into one discrete clipping path. Check out the video below (*note that after clicking the hamburger menu, the “Duplicate Layer” option was not visible, but that is what you will choose).

Uniting your land polygons with the Unite Pathfinder tool

3B – Subtracting land area from waterbody

This easy part in bullet form. Here we go!

  • Unlock the waterbody layer
  • Hold the Shift key to select the artwork in the duplicated land layer and the artwork in the waterbody layer simultaneously.
  • Click on the Minus Front Pathfinder tool. This will punch a hole – or several holes – in your waterbody rectangle that are the same shape as your land.
  • Since all the paths from this action will be brought up to the top, drag the artwork down into your waterbody layer, and delete the empty layer that once held your duplicated land path.s

Watch this video for the quick version:

Subtract land from waterbody path

4. Adding an “Inner Glow” effect

I’m not quite sure why I used quotations around ‘inner glow’ because that is exactly what it is called in Illustrator. This is the actual step where you create a satiny look. However, steps 1-3 are usually necessary when you’re dealing with open water in your map. Again, in bullets, followed by a video:

  • Lock your land layer
  • Select the artwork in your waterbody layer, and go to Effect –> Stylize –> Inner Glow
  • Set Mode to Normal, and check the Preview box.
  • Then just play around with the glow color, opacity, blur until you’re satisfied.

Video:

Creating a satin waterbody look with the Inner Glow effect in Illustrator

Your map. Your style.

The great thing about this satin waterbody effect is that it doesn’t tie you into one particular style. It is used by many cartographers in a variety of design styles. In addition to my map in the intro for this post, here are some maps I’ve made that use this satin waterbody effect that each have a very different ambience: Mid-Century; Art Deco, and somewhat of a play on Victorian era styles.

Mid Century style Minneapolis coaster map

Minneapolis, Minnesota square map

Simple square mid-century style map created for NACIS 2015 demo, Minneapolis, Minnesota. Most of the artwork in this map is very flat. The water has a slight application of inner glow to give it more of a satiny feel.

Art deco buildings in Montreal in an art deco style

Map created for NACIS 2017 presentation showing all the Art Deco buildings near the conference. I really wanted to capture the saturated and deepness of what Art Deco styles make me feel.

University of Washington brewery map (also uses concentric shorelines effect)

University of Washington demo map. For the water color here, it is actually a pale bone color, and any blue in the water is coming from the color I applied while adding the inner glow (step 4).

What Your Personal Geography Means to Your Voting Power. Interactive Map.

This post presents the What’s Your Vote Worth? map. This map began as an exploration of the U.S. Electoral College, and grew into a broader examination of voting in the United States. Our intent was to present America’s proven capacity to improve Equal Access for its voters, but also probe some areas where disparity still exists in the American voting system.

Over the past twenty-five years, half of the U.S. Presidents were initially elected without a majority of the popular vote despite winning the Electoral College. Because of the varying population sizes between American states, the Electoral College simply cannot be equally allocated among these populations. This means that sometimes the winner in a general election does not always reflect the majority of Americans’ votes. This also means that for a state like Texas, with a population of nearly 28 million, it would take 3.21 voters in a general election to equal just one Wyoming voter (Wyoming’s population is roughly 585 thousand). This is just one of the many ways that your geographic location impacts your rights when it comes to voting in America.

Your geographic location impacts your rights when it comes to voting in America.

 

Gerrymandering is another way in which we can experience the geographical influence on our voting power. Our congressional district boundaries are drawn by the political parties in our state that hold power. When these boundaries are drawn to favor one party over another, we call this Gerrymandering.

Preview What’s Your Vote Worth? map

 

Other ways that our geographic location impacts our voting access are: the amount of time we have to vote; the way we can – or cannot – cast our ballots; whether or not we need an ID to vote, and more, as discussed and explored in our What’s Your Vote Worth? map.

We also discuss race, gender, and how the United States has demonstrated the capacity to progress in order to increase voting access, and at times move closer toward the intent of the Equal Protection Clause and its stated “equal protection of the laws.” It is in this spirit that we created the What’s Your Vote Worth? map.

Voting Window by state, as viewed in desktop version

Due to the depth and complexity of the American voting system, we had to eventually limit the analysis of this map to a few select examinations. Each one of this map’s sections could be an entire application in itself. We also had to make decisions on which topics to include, and which to explore in a later application. For example, this map only touches upon Voter ID laws, when in fact, Voter ID laws are a very serious hindrance to equal voting access in America. Throughout the entire process of this map’s construction, we made great efforts to ensure our map contains well-researched factual information.

We invite discourse that this map may inspire, in hopes that it remains respectful and productive.

6 (Really 3) steps to Create an Antique-looking Concentric Shoreline Effect in Adobe Illustrator

6 (Really 3) steps to Create an Antique-looking Concentric Shoreline Effect in Adobe Illustrator

*This is a re-post from my former site*

I’m currently working on a map that I’m intending to incorporate Victorian (and maybe a little bit of steampunk) visual influences. For inspiration, I was initially looking at a lot of beautiful Victorian-era (roughly 1830s-1900, some say a little later) sketches of contraptions, including some diagrams of intricate devices that went nowhere.  Then I started to investigate common styling techniques used in maps that were made during the Victorian era. The USGS Historical Topo Map Explorer was a great resource for this investigation. I really wanted to incorporate the sort of concentric shoreline effect that was evident in all the earliest USGS topos, and elsewhere. Check out these cool mid-late 1800s maps in the slideshow that use this effect: