Beyond the Sea, flowing and exploding edition

Last year I took a whack at mapping what you’d “see” if you looked straight across the ocean from coastlines around the world. Since then, an interactive version of that has been a back-burner idea. Well, finally, here we go.

To recap, these arcs represent straight-line paths out to sea, perpendicular to the coastline at a sample of locations (around 16,000 points). These “views” often lead to surprising destinations, given the flat maps we’re accustomed to seeing.

This interactive map is just a toy that I hope looks nice—there’s nothing especially marvelous on the technical end. The paths were all calculated beforehand the same way as before; while it’s certainly possible to calculate them on the fly, my method isn’t quite fast enough to keep up with rapid interaction. (And I’m too lazy to solve a few other challenges that would come with it.)

The short technical summary is this. Coastline sample points are drawn (invisibly) as SVG circles, and when you mouse over them their associated path is drawn (again, invisibly) as an SVG path via d3. That SVG path is handy because we can get locations incrementally along it with the getPointAtLength method, which is used for drawing the path on a canvas bit by bit in an animation. There is a constantly-running function that draws any active paths, preceded by a barely-opaque fill across the board, which is how the fading trail effect is achieved. Source code is a bit messy at the moment, but is up on GitHub.

One bit of magic is that d3’s geoPath uses adaptive resampling to draw lines as curves appropriate to a map projection. This means that, for the most part, I only had to include the start and end points in my line data, and d3 would draw the curved great circle path that I was looking for. (I did, however, sometimes have to include extra vertices to convince it to go the longer way around the world when necessary.) As you may be able to see in the QGIS screenshot below, it’s all made up of straight lines.

Straight-line "arcs"

Anyway, poke around at the map and enjoy the light show!

| Comments Off on Beyond the Sea, flowing and exploding edition

The rain on terrain

If you poured water over the terrain somewhere in the world, where would it go? That’s perhaps one way to think of the thing that distracted me in the evenings this week.

What we have here is more or less an animated flowy map of drainage, although it’s not a serious attempt at an accurate map. It’s just something that turned out to be kind of pretty.

Apologies for its clunkiness; I’m not that good at code. This is another episode in my habit of messing around with terrain mapping in the browser on canvas elements. See for example shaded relief and grassy sketchy thingies. (Side note: calculation of aspect turns out to be poor in those; this way works better and I’ll fix them at some point.) None of this ever turns out zippy, but it’s always a good learning experience and is occasionally art-worthy.

Maybe you can guess what’s going on here. I throw a bunch of random points at a terrain map, and they begin flowing toward lower elevation. That’s all, really: each path continuously asks “what adjacent location is lowest?” and moves in that direction. It’s more complicated behind the curtain, of course, but it’s not awful. I’ve tried to leave helpful comments in the code.

I’ve been inspired for a while to attempt this kind of animation by Cameron Beccario’s amazing global map of wind, etc. (perhaps spurred into mind by everybody posting links to the map during Hurricane Matthew) and the original wind map by Martin Wattenberg and Fernanda Viégas, and other similar maps that they have in turn inspired. I’m not as smart as those people and don’t entirely know how they’ve done it, but I was pleased to learn how to do a kind of fading trail animation one way or another.

The key to all this is Mapzen’s terrain tiles. The hillshade you see in the map is straight magic from them, and replaces the things I was trying to do on my own with DEM images and canvas. Invisible but crucial are their Terrarium elevation tiles, which are these wild-looking purple and green things—but which encode actual elevation in their colors. Pretty clever.

Mapzen Terrarium

Just load those in, do some pixel calculations to find which way is downhill, throw down some paths, and animate those according to the calculated directions. And there, you’ve got yourself a map that’s pretty fun to watch.

Anyway, play with the map, and have a look at the GitHub repository if you want to see the code or tell me about anything dumb I have done.

| Comments Off on The rain on terrain

Land by latitude and longitude, or, a pile of continents

Bill Rankin’s graphs of world population by latitude and longitude popped into mind for no particular reason the other day, followed by a silly-sounding question: “but, like, what about land area by latitude and longitude?”

Silly because, duh, a chart of land area by latitude and longitude is a map. Then again, a map is both latitude and longitude. What if you look at each dimension individually? Heck, let’s just try it.

I did this by, essentially, drawing maps and counting pixels, then collapsing all those pixels against an axis. The important thing is to use an equal-area projection so that each pixel means the same thing everywhere.

For latitude, an equal-area projection with even spacing between parallels so that the axis has a consistent scale of degrees: sinusoidal.



Land by Latitude

And similarly, for longitude, one with even spacing between meridians: a cylindrical equal-area projection, Gall-Peters.



Land by Longitude

I’m not sure what there is to gain from these quasi-maps. Maybe nothing. But it’s kind of neat to see how the shapes of some continents are still vaguely there even when all squashed together. (By the way, apologies to places like New Zealand that got lumped together with Australia.) It’s kind of like those layered jars of sand art.

If nothing else, it’s fun to go full Play-Doh and cram everything both ways into a blob down the corner.

Pile of Continents

Yeah, so satisfying.

| Comments Off on Land by latitude and longitude, or, a pile of continents

Hachures and sketchy relief maps

Sketchy Mokokai relief map

I’ve never been a terrain representation expert, but occasionally I get briefly super interested in some DIY technique for relief mapping, not using typical GIS tools or rendering software. Tom Patterson’s old (but still applicable) Photoshop tutorials were my introduction to the magic simplicity of turning a grayscale image into fancy shaded relief.

Some years ago I wrote code for simple shaded relief, using Flash at the time. I picked that up again just a few months ago and did the same using JavaScript and canvas elements. These were impractical experiments, but they were a super interesting way to learn some basics about how automated relief shading works, and they were a more fun playground than turning knobs or filling in boxes in some software would have been.


Then the other day, for no particular reason, hachures came to mind. Hachures are an old-fashioned technique in which parallel lines are drawn along slopes. You don’t see them much these days, but they’re one of my favorite techniques; their chapter is still the only one I’ve managed to read in Imhof’s book. From time to time I’ve wished there were an easy way to generate nice hachure maps in GIS or what have you—as far as I know there’s still not much out there.

I tried rendering some hachure-like maps based on the same code I’d used before, that is, in a browser with just some JavaScript. The ultimate result was not so much hachure maps but the kind of sketchy map style you see in these images, almost like something drawn with colored pencils.

Sketchy SF relief map

It began with something that I quickly recalled is essentially what Michal Migurski had worked on (later inspiring Eric Fischer) some years back: divide elevation data into a grid and use short strokes to show slope (as line width) and aspect (as rotation).

Gridded hachure-esque symbols

That was kind of cool, but certainly a lot more rigid-looking than classic hachure maps. The next step was to introduce some small random offsets in the grid so things didn’t line up so perfectly, looking slightly more natural.

Random offsets in hachure grid

Wanting to move even further from a gridded appearance, next I tried drawing longer strokes at each point, longer than the dimensions of the cell so that lines would start to blend together. I also remembered that I wanted shadow hachures, where stroke weight or shade corresponds to brightness in an illuminated scene, not just slope. (My earlier shaded relief code could calculate this.)

Longer strokes and shadow hachures

At this point it was starting to look more like a pencil sketch than a true hachure map, so I ran with that and added color. There’s kind of a combination of slope and shadow hachuring here, with stroke width representing slope and color representing shadowing.

Shadow strokes and color

Lastly, there were two subtle steps: add a little more randomness in the form of slight curves, and draw the map at lower opacity several times on top of itself, each time with the sun angle varying a bit. This produced a somewhat smoother scene with a bit more shadow detail, and allowed the various random effects to accumulate into a very grassy look.

Sketchy Big Island relief map

The source code for this is on GitHub here. All in all, it’s not practical code, at least not in this implementation (it would be interesting to try it in a more efficient way, or on something like Mapzen’s elevation tiles), but it’s a fun style to play around with! With more attention to things like color I can imagine some pretty good-looking maps. In any event, here are a few more that I rendered.

Crater Lake:
Crater Lake sketchy relief map

White Mountains, around Mount Washington:
Mount Washington sketchy relief map

Oahu sketchy relief map

Yosemite Valley:
Yosemite sketchy relief map

Hocking Hills, Ohio:
Hocking Hills sketchy relief map

| Comments Off on Hachures and sketchy relief maps

Beyond the sea

In the northern reaches of Newfoundland, near the town of St. Anthony, is the Fox Point Lighthouse. I’ve never been there, but I know it has one of the most impressive ocean views in the world. If you face perpendicular to the right bit of rocky coastline there and gaze straight across the ocean, your mind’s eye peering well beyond the horizon, you can see all the way to Australia.

Beach views of Australia map

What’s really across the ocean from you when you look straight out? It’s not always the place you think.

Across the oceans from the US

I’m inspired by a map done a couple of years ago by Eric Odenheimer and some follow-ups by Weiyi Cai and Laris Karklis of the Washington Post. Those maps are colorful, handy guides to countries of equivalent latitude across the oceans. It’s easy to forget, for example, that much of Europe is well north of the United States east coast. But they’re not exactly maps of what’s across the ocean from you, at least not directly across from you. To think of east or west as “straight” across is, perhaps, one of those effects of the map projections we see every day.

The latitude maps got me interested in answering the question more strictly: standing on a given point and facing perpendicular to the coast, if you went straight ahead, never turning, where would you end up? There are two reasons why following a line of latitude won’t answer the question.

1. Coastlines are crooked and wacky.
2. The earth is round.

With that in mind, here are some maps showing the points from which you can “see” each of the continents.

Beyond the Sea

Coastline angle

Coastlines face all different directions, bending and turning constantly. The “East coast” isn’t a straight north-south line facing directly east. Just look at the state where I live, which has coastline facing literally all directions.

Massachusetts coastline

Taking “across the ocean” to mean directly across, perpendicular to the coast, then what’s across the ocean depends on where you’re standing! To get a rough idea of what direction the world’s coastlines face, I’m calculating the angle between every pair of adjacent coastal vertices in medium scale Natural Earth data, then placing a point in between them and measuring the view from there based on that angle.

Points on coastline

The much-maligned Mercator projection comes in handy here. Those angle calculations were made using projected coordinates because the conformal Mercator projection preserves the thing I’m interested in: local angles!

Straight lines on a round object

The second point is trickier to imagine thanks to common rectangular maps and the way latitude itself is defined. If you can detach the concept of “direction” from the concept of east and west, and look at globes and other map projections, it’s easy enough to picture. The shortest, straightest line on a sphere (let’s call the Earth a sphere even though it technically isn’t) is a great circle arc, not something like a line of latitude.

What we often think of as “straight” is a path following a rhumb line, a line of constant bearing. Wikipedia succinctly describes how such a “straight” line actually turns, in contrast to a great circle.

If one were to drive a car along a great circle one would hold the steering wheel fixed, but to follow a rhumb line one would have to turn the wheel, turning it more sharply as the poles are approached.

A typical classroom demonstration of great circles is to pull a piece of string taut on the surface of a globe between two points, and note how the string arcs across lines of latitude, changing its bearing the whole way. Try this specific case to drive home how the spherical “straight” differs from “straight” as we’ve defined compass directions: find a line of longitude on the globe, then a spot along that line somewhere away from the equator. Bring the globe to your eye and place the string perpendicular to the meridian, in between two latitude lines. Line up your view with the string and you can see that even though it starts out going due east or west, as it continues directly ahead the “straight” east/west parallels curve away from it.

Straight line on a globe

So if we want to know what’s truly straight across the ocean from a given coastline point, we need to see what direction the coast faces at that point, then draw a great circle in that direction and see what it runs into.

As for flat maps, certain map projections provide an accurate view of directions. The azimuthal equidistant projection, for example, preserves correct direction (and distance) from the center point of the map. A straight line from the center of the map is a straight line in real life. Here’s the Newfoundland-to-Australia example from earlier:

Straight line from Newfoundland to Australia

Such a map, in the end, is how I’m figuring out beach views: center that projection on each point, then draw a straight line in the correct direction until it hits land.


I’m not entirely certain that I have all the math right, but I think it’s at least close. Even we cartographers sometimes have a shaky grasp of map projections and spherical geometry.

But who has time for correct math? I’ve got to start training for the straight-line swim from the number one beach in my life—30th Street in Ocean City, New Jersey—to Brazil.


Ohio is still a piano

In a hundred years, no one will remember our work. Strike that, make it about five years. Digital, web-based work can break or disappear in an instant. I’ve certainly done some things which are now gone forever.

Anyway, one broken thing was the crazy Ohio piano map I made nearly seven years ago, in which counties of Ohio were represented by the sounds of piano keys, and data became music of sorts. Actually, it’s not entirely broken; the sounds and most interactions work, just with a big, persistent gray error because Google Maps for Flash is no longer a thing.


Professor Robert Roth insists that this ridiculous map is vital to the teaching of cartography, and who am I to stand in the way of education? So I dug up the old laptop that had the only copy of the Flash map’s source code and set about recreating the map in more modern HTML and JavaScript. It doesn’t have everything the old map has, but hey, it works. Bonus: now the code can actually be seen, on GitHub.

It definitely does not work on mobile devices because playing audio elements on mobile is complicated and I don’t care enough, but if you’re on a desktop computer, here you go. Don’t touch this if you’re in a library or something without headphones. You’ll be embarrassed.