Get Started Creating D3 Maps

JavaScript is fun, and D3 is great.

At Petrichor Studio we like to use D3 for our interactive, web-based visualizations.

As I promised recently, we’ll spend time talking about making maps with this wildly popular JavaScript visualization library.

D3 is sometimes known for imposing a learning curve on dataviz folks and JavaScript developers, but I am convinced that once you’ve tried it out several times–regardless of success or failure–familiar patterns will start emerging in the code.  There are plenty of wonderful resources and blogs that were crucial in helping me begin to understand how to harness D3, and I have included some links at the end of this post in case they might help you out, too.

Below are a couple code samples to help you get started making a simple world map in your browser.  One approach shows you how to render GeoJSON data in your browser as graphics using SVG, while the other approach uses Canvas.  They can be compared side-by-side and I encourage you to identify their similarities and differences.

The overall pattern goes like this:

  1. Set up the element where you want to render the graphics of your map: choose <svg> or <canvas> and give it an initial width and height.
  2. Establish the map projection.  We want to make a two-dimensional map, but it is typical for locations to be stored as spherical coordinates on our three-dimensional planet.  We’re going from longitude/latitude coordinates to a flat map.  D3 needs to know how we want that to happen.
  3. Create a D3 geographic path generator and tell it about the map projection.  This is the workhorse that instructs SVG or Canvas how to create two-dimensional graphics out of GeoJSON data.
  4. Load your spatial data.  These samples use a network request to load publicly available world country geometries in the TopoJSON format.  TopoJSON is more or less a special format of GeoJSON.  It just makes us take 1 extra step to convert from TopoJSON to regular GeoJSON.  No big deal.
  5. Finally, tell the geographic path generator to convert the longitude/latitude coordinates to graphics in the <svg> or <canvas>.

Simple D3 Map using SVG

See the Pen Simple D3 Map using SVG by Jacob Wasilkowski (@jwasilgeo) on CodePen.

Simple D3 Map using Canvas

See the Pen Simple D3 Map using Canvas by Jacob Wasilkowski (@jwasilgeo) on CodePen.

If you are just getting started with D3 the best advice I can give is simply what worked for me: read other people’s tutorials and code samples, all while experimenting on your own until perceived failures become replaced with tiny successes. The tiny successes will become bigger over time and failures won’t seem so scary or annoying anymore.

And some helpful resources:

Good luck! We’ll revisit these topics in more depth later with a focus on the mapping and animations of Formula 1 World Circuits.

Formula 1 World Circuits

It’s time to go retro racer in 2018.

Formula 1 screenshot

Check out this animated map of Formula 1 World Circuits!

Even though it is already May, the college basketball excitement and hype of March Madness inspired me to do a sports-related data visualization or mapping project.  It was a lot of fun working with animations for the gerrymandering topic in What’s Your Vote Worth?, and it eventually crossed my mind to explore Formula 1 circuits.

What we do here is stack all the circuits on top of each other, like misshapen pancakes, and show you only 1 at a time.  Even though they’re scattered throughout several continents, here they share the same space and the same map scale.  Then, we continually move on to another circuit by morphing between the current shape and the next shape in the pancake stack.  The world reference map is also updated to provide geographical context.

An argument for doing this (other than just because I can) would be that you can directly compare the circuits’ shapes, sizes, and orientations, without having to find and navigate to each circuit separately as with a traditional web map.

I wanted to style this with an 80’s retro racer vision of a neon, cyberpunk future we’re all speeding towards, so we employed SVG and CSS effects along with an awesome font to achieve the final look.  (Thanks, Sarah!)

The stacking and morphing is all done on-the-fly in JavaScript with some neat map projection and shape animation techniques.  We’ll walk through how D3js and flubber were used to make all this come together in upcoming blog posts.

https://petrichor.studio/2018/05/formula1/

NCAA Basketball: Who’s Come the Farthest?

If you visit ESPN’s website, you can find the team rosters for all the NCAA Basketball teams that made it to the NCAA tournament. On that site, ESPN lists the players’ number, position, year, and hometown, among a few other statistics. A couple of my colleagues, Nick Brueggemann and Gregory Brunner, did some mapping with this data. I asked them if I could take their dataset and crunch it a little further. There is a ton more that could be done with this information. And maybe I will someday, but here’s what I have done for now to spatially visualize the NCAA D1 Basketball Tournament team roster data:

I decided to map the women and men athletes’ hometowns as graduated symbols, where hometown sizes are based upon the amount of athletes that come from there. The men and women hometown maps are separated in order to more easily identify the different locations. These maps started out with world city points and labels, but I removed them for the sake of decluttering the visualization. I was able to identify the lat long of the athletes’ hometowns using ArcGIS. I then calculated the distance from each player’s hometown to the city that their team is located; here is a really handy blog post that someone wrote eleven years ago; I often refer to that post when calculating distances between lat long coordinates. Calculating the distance of each athlete’s hometown to their team city allowed me to identify the average recruit distance per team, along with the farthest (and closest) recruit distance. Other than the maps themselves, I haven’t done any visualization for teams on the lower end of the average recruit distance. (Maybe in few days ?) There are a lot of players whose hometown is also the the same as their team’s city.

 

 

“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.

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.