“Bring Up State” animation effect with D3

*Check out our What’s Your Vote Worth? map to see this effect.

Tired of falling down into web maps? Zooming, zooming, and zooming in from outer space all the way 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?

In this JavaScript code sample written with D3, called “Bring Up State”, we show how to serve (provide, give, deliver, etc.) a state polygon that has been clicked on to give it full focus. This is, perhaps, the exact opposite from expecting and assuming that your audience will freely zoom in as with traditional web map experiences. Our sample goes one step further to fade away the remaining states in the background to alleviate visual clutter and bring all 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.

screenshot of D3 code sample

Check out the code and live demo for this D3 block.

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 in January 2017 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.

Flow Mapping Bezier Curves onto the HTML Canvas

*This post was written in February 2017. It was the first collaborative geovisual project between Jacob and myself. We have since presented this mapping method at the North American Cartographic Information Society annual conference in Montreal, Quebec in October 2017.

This post presents our Canvas-Flowmap-Layer, an extension of the ArcGIS API for JavaScript (Esri JSAPI) for the purpose of mapping the flow of objects from an origin point to a destination point by using a Bezier curve. Collaboration with friend and colleague, Jacob Wasilkowski, was precisely the push I needed to finally (re)begin releasing some (non-work-related) mapping and dataviz projects into the wild. It is imperative to note that much of the responsibility for this repo rests on Jacob’s shoulders, even though it is under my name.

Flow maps, academically speaking

In Bernhard Jenny et al.’s recent article Design principles for origin-destination flow maps(2016) flow maps are defined as maps that “visualize movement using a static image and demonstrate not only which places have been affected by movement but also the direction and volume of movement” (p 1). Jenny et al.’s article points out the lack of empirical user studies for flow map design, stating that “Design principles for flow maps are largely based on expert intuition and aesthetic considerations” (p. 1). I am the type of cartographer who finds extreme liberation in these two aforementioned points, which I will restate below:

The lack of empirically based cartographic design principles results in the freedom of relying on intuition and aesthetics.

So for all the mappers out there reading this, I hope you find extreme freedom in knowing that this Canvas-Flowmap-Layer is only one of many ways to map the journey of phenomenon from one spot on Earth to another. It is one method that we are quite comfortable in presenting, and have successfully implemented versions of the Canvas-Flowmap-Layer in a few real world scenarios.

Curves with Rules

Common solutions for dynamic flow mapping include using straight lines and geodesic lines, both of which have immediate visual limitations. Using a Bezier curve for flow map lines, where each curve on the map is created with the same formula benefits mappers twofold:

  1. While straight lines are not inherently ugly, an overlapping or convergence of them across a global dataset can be. A series of Bezier curves created with the same formula, even when displaying an over-abundance, has a mathematically congruent flow that greatly improves the map’s aesthetics.

2. The single formula that is used to draw each of the Bezier curves means that map readers can immediately know the direction of the line without having to add animation (explained below).

RULE DEFINED

Ultimately, the flow line’s direction from the origin is the order of the bend (a northwest direction’s curve bends north-then-west)

  • northwest from the origin, the curvature will bend northward-then-west
  • southwest from the origin, the curvature will bend southward-then-west
  • northeast from the origin, the curvature will bend northward-then-east
  • southeast from the origin, the curvature will bend southward-then-east

As you can see from the image below, if the end point is due north (or south, east, or west) of the origin, the resulting curve is a straight line.

THE POINTS

Each point is added to the map twice – the first instance of each point is an invisible “ghost” Esri graphic with associated attribute data, geometry, etc. We call these “ghost” graphics since the symbology has no outline or fill color. These ghost graphics are required for 1) having a to- and from- point from which to connect the Bezier curve, and 2) allowing the points to provide functionality and interactivity that developers and users are familiar with.

The second instance of the points is what you actually see on the map. Each one of these points has the same radius as their ghost counterparts that lie directly beneath them, but are created by finding the screen coordinates of the ghost graphic and then placing them onto the HTML canvas. By doing this, we are able to draw the curved lines that connect the points onto the canvas.

THE LINES

I was drafting Bezier curves onto prototypes before this became an actual interactive map layer. Once it came time to add the curves to the map canvas there was no shortage of resources for figuring it out. Here is one of the many useful out there. The lines are added to the HTML canvas by finding the screen coordinates of the points, and then using those coordinates in the .bezierCurveTo() canvas method.

LINE ANIMATION

The convexity or concavity of the curve does convey the direction of the flow line, but the directionality won’t be easily intuited due to its novelty. In the event that this mapping technique catches like wildfire, we can delete the second part of the previous sentence. In the meantime, we’ve added line animations, similar to the “ants marching” effect, with a nice easing effect inspired by this Kirupa post. The Canvas-Flowmap-Layer uses two separate lines when animation is added, although two lines are not required to achieve animation. The first line is the solid static Bezier curve, and the second line is the dotted or hashed animated Bezier curve that sits on top of the first line. Those animated traveling dots are actually a curved line with really a  big gap setting in the hash pattern.

 

 

Demos and code

You’ll find out a lot more about how the Canvas-Flowmap-Layer was constructed by diving into the code, and checking out the comparison and main demos.

Limitations

Projection – This is not a limitation, just a bit of information. This particular instance of using a single formula Bezier curve for flow mapping onto the canvas was implemented with Web Mercator projection. This cartographic method is not limited Web Mercator, provided that you are mapping a projected map and grabbing the correct screen coordinates from your start and end points.

Connection vs. route – The Canvas-Flowmap-Layer is ideal for the flow of things, where the route can be abstracted to a simple conveyance of start point connected to end point. Our data did not contain route information. When mapping thematically for things like the flow of ideas, phone calls, or even the logistical flow of things that – while they do take an actual route – can be reduced to its mere start-end connectivity. (In fact, oftentimes adding actual routes can clutter the map with chart junk). There are things to note, though, when giving precedence to connectivity over actual route. Namely, for example, when you have things from Seattle being shipped to Tokyo, but the flowline travels across Europe, Kazakhstan, and China on its way to Tokyo, when the shipment might have actually traveled across the Pacific Ocean. Jacob has cleverly built in a cool feature where the flowline updates as you pan the map so that most/all of each flowline can be viewed (at the small scales). It is totally feasible to add this sort of directional information to your data (where true direction matters). It might be pretty prudent to restrict users to your dataset’s minimum and maximum extent as much as possible. We didn’t add that restriction to our sample maps.

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: