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!

Using a 1950s Diner Theme as Inspiration for my Donut Map

Graphic designers (and mappers who are into graphic design), this post is for you! The first thing you need to know about this map is that most of the work was not on the map at all (scroll to bottom to see full illustration). It was on the surrounding design: the donut, the counter-top, the tissue paper (did you notice that subtle grease stain?) As far as maps go, the map itself was pretty straightforward. I hesitate to call it easy, because no matter how experienced you are at graphic design, mapping software has a learning curve at first. But it wasn’t the most involved map I’ve made. Still, there were cartographic choices that I had to make for a contiguous/mainland USA map with 31 points and chunky labels. I’ll share some of those things below. If you’d like to learn about how to add a map to your design, I posted that method that I used here.

This post is a sort of celebration of incorporating maps into your design, by sharing some of those techniques.

Donut Map by Sarah Bell

1956 Diner theme

Tabletop design

Pattern and Hue

I went with a 1950s-60s diner theme for this design project, so clearly I had to make a mid-century table top. We’ve all seen the type of countertops and tables to which I refer. I decided to make an original design of what I might see in a dream about 1950s diners. So I used an alternating 4-point star repeating pattern with a blue and green that are so similar that – to know they differ – you’d have to see them adjacent to one another. It seems like the truly period tables like this don’t have quite as bold of colors as the current versions being made today. The reason for this could be that all the originals I’ve seen have faded a little bit. Regardless, I wanted to have that original look, so these two similar-but-different colors help give that look that either the pigment wasn’t very bold, or some sunlight has helped the blue and green hues become more similar over time. The tabletop’s repeating pattern is the first of the two layers for the table, and sits at the bottom of the entire design in Illustrator.

tabletop-pattern

Texture

A lot of the old 1950s formica countertops with smooth texture still have a textured appearance as part of their design. To accomplish this, I created a layer just above the pattern layer. Inside of this upper layer, I added a rectangle with a really pale yellow-to-green-to-pink gradient. Then I added a transparency mask to this rectangle from a photo of marble; I also greatly increased the contrast of this photo prior to using it as a mask. Then, I just inverted the mask, which made this upper tabletop layer sort of visually incorporate itself with the bottom pattern layer.

I tilted the pattern a little, to make it look like the donut-paper-bakery tissue setup was a little more organically placed.

tabletop-texture

Bakery Tissue

Base layer

The bakery tissue is made of 5 layers! To do any sort of rendering in Illustrator, all that drawing I’ve done over the years has been key for me personally. Just like in the graphite arts, I add the shading last in Illustrator. So the bottom most layer was made last for this bakery tissue. I’ll start with what’s – let’s say – the base of this bakery tissue. It’s a paper-bag-brown color to look like the brown bakery tissue. I then gave each of the left and right sides pinked edges. Then I just worked the edges a little to make it look more like a realistic once-folded tissue.

Lighting

To get the lighting of this bakery tissue, I imagined a diner full of bright lights and windows letting in some natural sunlight. Still, there was a brightest light source that I imagined towards the upper left of this table. So I copied the base layer, and used a linear gradient to put some bright lines where I could imagine the light hitting the paper. Again, practice drawing helps a lot with this type of rendering.

Texture

The bakery tissue needed some crinkles. I took a photo of crumpled wax paper from my kitchen, and used this photo as a transparency mask for the top bakery tissue layer. I just copied the base layer, dragged it to the top, made it full white, and added the transparency mask. This gave it much more natural looking crinkles than I could draw in a vector design software myself.

Two shadow layers

Since there are a lot of light sources in a diner, I made two shadow layers. One fainter shadow for the upper parts and edges of the bakery tissue, and one darker shadow for the bottom edge of the bakery tissue to indicate that the strongest light source was somewhere towards the upper part of this tabletop. To make both of these shadow layers, I first copied the base layer, and then distorted and bent it to the way the shadows might hit the table just beneath the bakery tissue.

 

Grease spots (it’s the little things)

OK, so there is sort of a sixth layer on the bakery tissue. When the kind bakery employee grabs the donut with the bakery tissue, sometimes the donut goodness soaks into the paper a little. I added a faint donut shaped spot where this would have occurred on the bakery tissue. It’s just couple of gray shapes with some transparency and blur. I then used the color burn mask to make it look like it was “one” with the paper.

Grease spots in bakery tissue

Grease spots in bakery tissue

Map!

I wrote about how to make a map for graphic design here. That post gives the basic steps for using Maps for Creative Cloud as a mapping tool inside of Adobe Illustrator

“Burning” the map into the bakery tissue

To make the map look like it was part of the bakery tissue, I gave it a nice deep blush pink color, and simply added the color burn transparency mask in Illustrator. That is really it! The border layer of the states is just a darker hue of the blush pink color that sits on top of the country as lines. I didn’t use a color burn filter for  the borders, but I added a 5% transparency.

Labels

If you read that post about how to make a map with Maps for Creative Cloud, then you know that the labels were downloaded in the map. I didn’t have to manually add them one-by-one. You also read that I reprojected the map from Web Mercator to Albers Equal Area Conic. This projection gives the contiguous United States a beautiful curve that rises on the coasts. I manually adjusted each of the labels to match this curve. I also decided to add the city names beneath the shop names.

Map and Labels incorporated into the bakery tissue

Map and Labels incorporated into the bakery tissue

Donut!

I wasn’t around in the 1950s, but if you do a google image search for “donut” you will see a lot of pink frosted donuts with sprinkles. So I created that pink frosted donut with vectors and a transparency mask, and now I’m craving donuts. There are four layers that make up the donut. They are stacked from top to bottom in this order:

  1. Sprinkles. Some sprinkle-shaped vectors with a slight gradient overlay and a dark outer glow.
  2. Donut. There is a lot going on in this layer. This has the cake part with a transparency mask made of a photo of pizza dough. It also has the pink frosting, and highlights for the donut as a whole. I also added a secondary shadow to this layer.
  3. Donut base. This is just the part that gives the donut its color, following the same idea as the bakery tissue base.
  4. Donut shadow (bottom-most layer of the donut, just like one of the tissue shadows)

Newspaper

This newspaper is designed with vectors, just like all the other layers described above: there is a gradient that mimics where the light might shine brighter on the paper; there’s a transparency mask to help indicate a natural paper texture; I used shadows to help show where the light sources might be.

Full donut map and illustration.

Full donut map and illustration.

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 that will 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 our geographical features exist on a three-dimensional planet.  We’re going from longitude/latitude coordinates to a flat map and D3 needs to know how that should happen.  Read up on Map Projections on the Web when you’re ready.
  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.  The samples below 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 takes 1 extra step to convert from TopoJSON to regular GeoJSON.  No big deal.
  5. Use the geographic path generator to convert your data into graphics.  The longitude/latitude coordinates will be drawn as map graphics in the <svg> or <canvas> element.

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.

Good luck! We’ll revisit these topics in more depth by focusing on Map Projections on the Web.

Helpful resources

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 D3 and flubber were used to make all this come together in upcoming blog posts.

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

Fantasy Mapping: Place Names & Design (and free Adobe map assets!)

Several weeks ago, I wrote about a fantasy map named Kystfjell (pronounced kist-fyell, but feel free to say kist-fell), which translates from Norwegian to “coastal mountains.”

In that first post, I mentioned I’d be writing an upcoming Part II that describes some of the design decisions, including place name and language, character illustration, and geographical juxtapositions within the Kystfjell map. I also promised some free Adobe Illustrator libraries based upon this design. So here we go! This is Part II. If you want to jump straight to the free stuff, HERE is a truncated design assets library that I made, inspired by this map. But wouldn’t you want to know the background of those libraries and of Kystfjell?? If so, keep reading.

Important to know: This map was made using the M4CC extension inside of Adobe Illustrator. For information on how, read the first post on this Kystfjell map.

The difference between the actual geography and Kystfjell’s geography

As cartographers, even though we aim for a known level of accuracy and precision, we still are abstracting spatial data to a digestible level. The most obvious example of this is scale. Maps are typically a 1 to greater-than-1 scale – at least the examples we usually think of when we hear the word “map.” Although, consider this beautiful Anatomy of the Teeth poster by medical illustrator, Lydia Sharp. In a sense, Sharp’s poster, and microbiology illustrations like Shannon McMann’s Brain Cell diagram are maps of a 1 to less-than-1 scale. Maps (and dataviz) of all kinds have abstracted the representation to its necessary parts, so that the visualization’s purpose and message can be easily understood by the intended audiences.

When creating the Kystfjell map, although I downloaded real geographic data over coastal Norway at a scale of 1:140,000 (see image below), this map was fantasy. I can move mountains!

And I did. I was not tied to usual intentions of communicating an abstracted reality for the purpose of data comprehension or actual geographical navigation. While I frequently do draw illustrations that have nothing to do with maps, I have never applied the liberty of mapping things where I want to for the purposes of a fantasy map. Kystfjell’s scale is much smaller (the world in the map is much larger than the downloaded data’s actual scale), as a series of large interacting societies. This means that instead of the actual geographic extent’s ~30-40-mile width, my map is about 1,000 to 1,800 miles wide. Although who knows? There is still time for Kystfjell’s geomorphology in my imagination, as the book is still being written.

Data downloaded into Adobe Illustrator using M4CC

Original data downloaded into Adobe Illustrator using M4CC.

 

Check out this map diagram below. In it, I’m showing the extent of the Kystfjell map, and changes that I made to the data that were included in my original download into Illustrator.

Changes made to the original (real) geography to make the Kystfjell fantasy map

Changes made to the original (real) geography to make the Kystfjell fantasy map

Here is the final land juxtaposition for the Kystfjell map.

Kystfjell Map full (unfinished)

Kystfjell Map full (unfinished)

Overall design of Kystfjell

Please consider the Kystfjell fantasy map unfinished. In fact, I’m not certain that the land will retain the “Kystfjell” name over time. When I get some time to finish it, the first sentence of this paragraph will be deleted. So will the sentence preceding this one, along with this sentence, and perhaps a few subsequent ones. While the map is unfinished, the overall aesthetic will remain. Why am I posting about the design when it is not quite finished? In part I several weeks ago, I promised some free Adobe Illustrator libraries, along with a post about Kystfjell’s design “soon.” Now feels like soon, so let’s talk about design!

Colors

There are really five basic colors on this map, and every other color stems from those hues. The sixth color is the highlight color. I don’t know how everyone else thinks about color, but for me, what I call highlight color is essentially just that – the color that all other colors travel to as they get lighter. So if you can imagine a gradient for each of the base colors, where the darkest hue in the gradient is the base, and the brightest hue in the gradient is the highlight color, then you can imagine that the colors within those gradients are fair game for the particular project. In most of my work – maps and other illustrations – the highlight color is almost never basic white. This retains rich tones throughout the illustration. With every map I make, I try to keep the colors at a minimum, so I made swatches of about six or seven colors within each of these gradients and only drew from those colors. I use this color method for a lot of things that I do, but when it comes to mapping for customers with specified style guides, I’m often bound to a basic strict small group of contrasting colors and/or complimentary colors. But not for Kystfjell!

Kystfjell Base Colors

Kystfjell Base Colors

 

The mountain base color-to-highlight color gradient.

The mountain base color-to-highlight color gradient

You can find the Kystfjell base colors and other Illustrator Assets here, where I’ve shared them publicly. Notice how the colors look much flatter and more saturated than they do on the map. Recall how I’ve created gradients from each of these base colors to the highlight color (image above this paragraph), and from that gradient, created a palette made from those gradients. Doing so gives the map some depth. Also, I’ve added some transparency masks explained below.

Kystfjell Assets

Save these free assets by clicking on the image

Texture

I was able to apply a papery texture to the Kystfjell Map by using Adobe Illustrator’s Transparency Mask option. This post isn’t going to include a step-by-step tutorial on how to use transparency masks in Illustrator, but perhaps such a post as it relates to cartography is called for in the near future. It is just important to know that this is how this map was textured. There are a lot of great YouTube videos and online tutorials provided by designers that share how they use transparency/opacity masks. But here is a tiny window into my particular approach to how I used a transparency mask to achieve a papery look in the Kystfjell map. Ultimately:

  • There are ten layers listed below that make up the entire land-plus-ocean base of this map, and one more that makes up the shorelines (see next section for the shoreline creation).
  • Each of these ten layers has some sort of Illustrator effect (not necessarily capital “E” effect, or what AI considers an effect). By this, I mean each of these ten layers has a permutation of gradients, transparency masks, and inner glows; at least one of these effects, but perhaps two or all of them.
  • By removing any one of these ten layers, the entire base’s aesthetic would change, either slightly or dramatically (see animation below for how stacking these layers changes the base’s look).
  • This approach is certainly not necessary, but I’m really happy with the result.
Kystfjell Land and Ocean Layers

Kystfjell Land and Ocean Layers

Of the layers inside my Land and Ocean Layers above, the following have a transparency mask applied. The mask was made from a photo of crumpled paper:

  • Highlight Ocean (Also using the Lighten filter within this transparency map setting).
  • Darker Pink Land with Gradient
  • Land Color Burn (Also using the Color Burn filter within this transparency map setting).
  • Bottom Ocean Layer

When applying a paper texture to a transparency mask on multiple layers, one trick I like to use is to make sure that the paper texture image is the same one for each layer and the X, Y registration for this image is identical each time you paste it. Copying artwork and pressing CTRL + F / CMD + F will paste artwork in the exact X,Y registration in front of  your other artwork in a layer, and CTRL + B / CMD + B will paste it behind your other artwork to whichever layer you are pasting.

Stacking the 10 ocean and land layers and the shorelines layer

Stacking the 10 ocean and land layers and the shorelines layer

Concentric Shorelines

I applied a concentric shoreline effect to the land shapes using the Object –> Expand –> Offset Path method that I wrote about on this previous blog post. Note* That previous post addresses making concentric shorelines from a linear (unclosed path) feature, such as a shoreline that falls completely off the edges of your map (Object –> Expand). I applied the remaining principles from that post’s approach to Kystfjell’s concentric shorelines.

Kystfjell map shorelines

Kystfjell map shorelines

Whimsically hand-drawn

I wanted the Kystfjell elements to appear whimsically hand-drawn. To avoid a clean digital look I used brushes from the Artistic_ChalkCharcolPencil brush library that is provided with Adobe Illustrator, as well as a few other brushes. You can see some of those brushes applied in these complimentary graphics that I’m sharing here.

Language and Placenames

Each aspect of this map was an adventure: location scouting, character developing, mountain drawing, and place-namingAs stated previously, this is my first fantasy map, so creating placenames was unexplored territory. I wanted the names to be of Norwegian influence as a nod to my heritage, but also easy for an English speaker to read. Some of the names are combinations of Norwegian words, or combinations of Norwegian and English words. And some locations are English words. I wanted Norwegian readers to read the names as actual names as well, so I consulted my friend that I have known since middle school, Benjamin Nelson. Ben is fluent in Norwegian, lives in Norway, and is married to a Norwegian woman, Linn Monica. They reviewed the placenames to ensure the names did not get translated as garble to a Norwegian reader. Also, it was pretty important to me that I wasn’t unintentionally using a word that was crude. Many thanks to Ben and Linn Monica for their review of the Kystfjell map placenames!

The Future of Kystfjell

It is true! Kystfjell is a place in a story that I am writing! As the story gets written, the map is sure to change and characters are sure to be added. I anticipate that I will generate many maps and illustrations as the story moves forward.

I’m always excited to see the fantasy maps that others are making, as well as read about the stories that inspired those maps. Please share yours if you’d like! And happy mapping!

Me making the fantasy map

Hey, it’s me with Kystfjell in the background. Action shot! Whoa.

Happy National Beer Day! Bellingham Bike Shops & Breweries Map

It’s National Beer Day this Saturday, April 7th! I’m celebrating by posting this Bicycle to Breweries Map of Bellingham, my home city.

National Beer Day is a great excuse to share this map, but I should probably give at least a brief description of the map.

The map shows the location of the city’s breweries and bike shops nearby. I made it using the ArcGIS Maps for Adobe Creative Cloud extension, and its entire dataset comes from the City of Bellingham’s open data. The streets marked with a red dash are all part of Bellingham’s Pedestrian Master Plan, which is an ambitious infrastructure program to improve the City’s walkability.

Bellingham is already wonderful place to walk and bike, rain or shine. The city has great trails, great breweries, and a lot of cyclists, walkers, and runners. With late night sunsets approaching, the season for riding bikes to neighborhood breweries is coming soon. I started this map as a tutorial to show fellow mappers how to make a map using this particular Adobe Illustrator extension, made by Esri (I’m on that team!). One of the features in the extension’s latest updates is the ability to pick from standard layout sizes for print, mobile, and other common media formats. This map uses the 11×17-inch tabloid format.

I am going to file this map into the permanently unfinished category. However, it will certainly help you find the Bellingham breweries, most bike shops, park-and-rides, all traffic lights and trails that were in existence during the time the data was created. It also was a fun exercise in creating a Victorian-esque Adobe Illustrator symbol set.

Cheers!

Bellingham Beer & Bikes Map by Sarah Bell

 

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.