It's great to be here. I've been looking forward to this for like six months. So it's exciting
and not just a little intimidating to be on stage. So I don't think I would surprise anybody
if I told you that I was a big fan of examples. I think if you've seen some of the work that
I've done, if you follow me on Twitter, you've probably seen some of these examples before
or if you've asked questions on Stack Overflow, I love replying with examples. I mean, I love
examples so much I even created a website just for sharing those examples, blocks.org.bl.ocks.
You can just post something to GitHub Gist. You get this nice index of examples like this.
You can see the example up there on the top. I guess it's a little faded out on this display.
And then you have code at the bottom. So you can see what the example does and then you
can immediately understand how it was implemented and you can give a little description of it
as well. So I thought, you know, I started out sort of this talk to be an excuse for
me to show you all of my examples. But I calculated I would need 4.5 seconds per
examples and, you know, even with Ignite Talks, I think that would be a bit extreme. So I
had to call, curate and pick the ones that I'm sort of most proud of that I think you
would find interesting. So I hope you find this talk entertaining even if it's not informative.
But I do have a goal. I do have a thesis for this talk. And that is that examples are a
powerful way to communicate. They're very lightweight. They're informal. They're something
that you can do in 15 minutes. You know, they don't have the ceremony and the overhead
of doing published graphics or, you know, official releases of new tools. But they're
still capable of expressing an important idea. And given that I'm here at I.O., sort of surrounded
by all of you that are doing these amazing things with code and with data and visualization,
I thought if I could accomplish one thing with my talk, it would be to get all of you
to share more examples. So in short, I just want to share my love of examples, my enthusiasm
for examples with you. So naturally, I'm going to start with an example. This is an example
of an example. So that makes it a meta example. All of the examples will be meta examples.
But this is one of my favorites. But it's also, it's a flawed example. I think that
the flaw, or there's probably several flaws, but the flaw in this example is representative
of many other examples. And so I think this is sort of a worthy candidate for dissection
and self-critique. So this is an example I made when we did the D33.0 release. We overhauled
the geographic projection systems. It was work that I did with my collaborator, the
brilliant Jason Davies. And what this example does is explain one of the new features that
we introduced as part of that overhaul of geographic projections. So one of the difficulties
with map projections, actually, maybe I should like make this a little bit darker. Okay. So
that's better. Unfortunately, I'll have to do that, like for the other slides. So, and
we'll see. I should have tested this beforehand. So one of the problems that you have with
geographic projections is that all of your input geometry is polygonal, right? It's
just specified as a bunch of points that are connected together into lines and polygons.
And so when you have sort of a simpler geographic projection system, one of the problems that
you get is that when you project these polygons, you see these polygonal artifacts. So on the
left hand, what you're seeing is like this red line shape is projected. And rather than
producing the nice curve that you expect, you get this ugly like zigzag line. And that's
because when you have these polygons, the projection introduces distortion, right? The
line becomes a curve when you flatten the earth down to the planar display. And in fact,
these polygons weren't ever straight to begin with because polygons on the surface of the
sphere have great arcs as edges rather than straight lines. So if you just do point by
point projection, you get these ugly results. The conventional fix to this problem is to
just introduce more points to do sort of finer sampling. So in the middle, you'll see what
happens if you sample every four degrees rather than every 90 degrees. You've got something
that's better, but it's still not a perfect result, right? On those vertical lines in
the middle, you can still see some distortion. And on the horizontal lines, you can see all
of these points. And those points aren't really needed because that line is relatively
straight there. So it's neither giving you high quality results nor great performance
because you're not using these extra points efficiently. So our solution was to do something
adaptive where we detect these places of high curvature and just add those additional sample
points there so that you end up getting a better result.
Now I said this example was flawed. And the first flaw is that, you know, if I wasn't
here explaining it to you, it might not be obvious what you're looking at, right? Unless
you're familiar with sort of cartography with some more obscure projections, you might just
have no sort of understanding just of what you're looking at. And if you don't know what
you're looking at, you certainly can't understand why it's important or why it's significant.
So the first task with any example is to understand your audience and to communicate in a way that's
accessible to them. You can only talk through your examples in person. You can't do that
to everybody that visits your website or is online. So let me do the same thing again
and fix this here.
All right. So the first thing that you're seeing is this is a graticule. Those gray lines
or now black lines represent lines of constant latitude called parallels and lines of constant
longitude called meridians. And the red line is a special parallel called the equator. And
then we're taking this, and again, sorry for having to do this. Okay, hold on a second.
Okay.
Okay. Very good. Sorry for that. So we're taking this graticule and now we're projecting
it down to the plane. We're flattening the sphere. And in this case, we're using the
simplest projection that there is. It's called the equirectangular projection. And we're
just mapping longitude to the x-axis and latitude to the y-axis. And in the normal aspect of
this projection, that is, without any rotation, you can see that the equator is a straight
line, right? There's no distortion going on here. But you saw earlier in the example
there was distortion. And that distortion comes from the fact that we rotated the sphere
by 90 degrees before we flattened it down. So that extra rotation. And then we also applied
a second rotation to the display so that the poles are still vertically aligned. You have
the north pole on the top and the south pole on the bottom. And this rotation has a special
name. It's called the transverse aspect. And in fact, when you have the transverse aspect
of the equirectangular projection, it has an even more special name. It's called Cassini's
projection. It's named after the famous French cartographer and astronomer, actually the grandson
of the Cassini that discovered Saturn's moons or observed them the first time. And the grandson
was the first that created a topographic map of a whole country of France. Now, Cassini's
projection doesn't really have much modern use. It's largely been replaced by the transverse
Mercator projection, which you see on the right, which is very good at showing narrow
regions of the Earth with low distortion. Now, of course, none of this is really relevant
to understanding the example that I showed you earlier. I just find the history of cartography
fascinating, the fact that these individuals discovered these things well before the advent
of computers, which make it all look so trivial. But they're all so diverse and beautiful as
well. I'd like to look at them. So you've seen what adaptive resampling does, but that
example didn't really explain to you how it works. So this is a different take now, trying
to explain how the algorithm works. So you start with this polygonal geometry, and then
for each pair of points, you find the midpoint along the great arc. That's with these black
dots here that are being inserted in the middle. And then you measure the distance in your
projected plane between this midpoint and the straight line that you would have drawn
previously. If the length of this black line is large, then that indicates that there's
a large amount of curvature in this part of the plane. And that means you want to introduce
more samples there. Whereas if the line is short, then the line is relatively straight
already, and so you can stop resampling. And so that's what we mean by adaptive, is that
we can adjust it so that it's specific to these places of high curvature. And one of
the other nice things about this technique is that it's scale dependent. So if we zoom
in, you can see that it's able to add more points, or if we zoom out, it's reducing
those points. So it automatically adjusts to the resolution of the display, like what
you're actually going to look at. And in fact, this algorithm is basically the reverse of
another common algorithm called line simplification. It's commonly used when you have complex geometry,
like so if you take this, this is the 1 to 10 million scale outline of the United States.
It's a fairly large file. It would be too complex to show at this resolution. But if
you remove some of those extra points, again, by detecting curvature, you can simplify it
and make it more suitable to display. So whether you're doing a small map or a large map, you
can adjust the geometry accordingly. So adaptive resampling is doing basically the same thing.
It's just doing it in reverse. So now that you understand all of that context, you can
take a second look at this example, and you can see how it's able to find those curves
and to just add sample points. So it just makes it work. But even understanding all of that,
I've kind of forgotten something in showing you these examples. I was so excited to tell
you how much I like the algorithm and how cool the algorithm is. I forgot to tell you
why you actually care. The example illustrates the output or the impact of that feature,
but because it's communicating it in an abstract way, it's not necessarily clear why that feature
exists. The example only resonates for viewers that understand the feature's utility. And
unfortunately, that is very frequently only the person that created the example in the
first place. And you create these examples for other people. It's important that you
communicate why those examples matter. So how do we solve this problem? How do we make
examples better? What we have to do is take this abstract idea and make it more concrete.
We need to indicate how this example can be adopted by our viewers and incorporated into
their own work. And we can do that by showing them sort of more real-world examples of what
that feature provides. So this is one of those examples then. This is the Vandergrinten projection,
sort of roughly spherical projection. And it's comparing on the left when you don't have
adaptive resampling to on the right where you do have adaptive resampling. And on the
left you can see in Antarctica it's got this sort of ugly cut down here, right? It's got
this line that goes from the coast or the shore of Antarctica at minus 180 degrees
longitude down to the south pole and then back to positive 180 degrees. And this is
because Antarctica crosses the antimiridian. You have to make this cut and then it comes
back. So unless you have adaptive resampling, you're not going to get the nice curve that
you expect on the right. Likewise, if you take the Larry-Ve projection, you know, it has
the same problem. You've got these ugly straight lines here at the bottom. Now you might say
like, well, I'm showing you kind of these obscure projections. Surely I picked them
to exaggerate this problem, and I did. But it's a more common problem than you would
expect. So in fact, if you take Albers Equal Area Conic projection, which is one of the
most common projections that there is, it's equal area, which makes it very good for visualization.
It portrays areas accurately. In this case, the curve or the cut of Antarctica extends
all the way from the left edge to the right edge. So it's pretty much the worst case scenario.
And in fact, the artifact is so back that it's crossing over these other land masses
and you get this fill-in version so that you're filling in the ocean. Whereas if you do it
with adaptive resampling, you get this beautiful curve here, and everything looks as it should.
And because it's scale-dependent, because it knows the display, this algorithm can automatically
add the right number of points all the way along this very long curve. So it just happens
naturally. You don't have to think about it. So by demonstrating this real-world usage,
we make it easier for people to understand how they can incorporate this idea into their
own work. And it goes from just being a neat algorithm that's kind of entertaining or interesting
to look at to something that people really need. They want to incorporate it. They need
it to do their work, to do their job. But at the same time, there's a risk when you
show these examples that people can sort of speculate their own solutions. If you pick
examples that are a little bit too specific, like perhaps with those obscure historical
projections, then people could say, well, surely there's a simpler solution to this
problem, which is to just add more detail to that anti-Meridian cut in Antarctica. And
sure enough, this is actually a very common solution to this problem. But it's not really
an ideal solution either. And the reason for that is that Antarctica is special, cartographically
speaking, because it crosses the anti-Meridian and because it encompasses a pole. But the
truth is, if you rotate the Earth by any of these two axes, then any land mass can have
that same problem. So Antarctica is only special in the normal aspect. But if you rotate the
Earth, then all of a sudden any of these land masses can have the same problem. Whereas
if we use adaptive resampling, and we use another feature that D3 has called anti-Meridian
cutting, and that cutting happens after the rotation, then you get these beautiful results.
You don't see those artifacts. And you can even see, as I push Russia and other countries
up towards the North Pole, it's still producing a nice curve. And so that's doing adaptive
resampling as well. So if you're wondering why the normal aspect is so entrenched in cartography,
it's not just a matter of cultural imperialism, it's also just hard to do. These assumptions
are basically built into our tools and into our data. So to illustrate that with a more
sort of concrete example, this is one of my favorite unusual projections. This is designed
by Alan Philbrick. It's called an interrupted sine-umulvida projection. And what it's doing
here is it's dividing the southern hemisphere up into three lobes. It's splitting them in
the oceans, which reduces the distortion over the land masses at the expense of the oceans.
And then it's splitting the northern hemisphere into two lobes as well. And there's also rotation
that's going on here. So this is something that would be very difficult to do unless
your projection system treats polygons and lines as first class primitives. You can't
do this just by projecting point to point. And so what I like, why I find these examples
so compelling is because it illustrates the expressiveness of the tools, right? I don't
have to restrict what I can produce. Like these assumptions and limitations aren't built
into my tools and they aren't built into my data. I don't have to depend on pre-cut
geometry or pre-sampled geometry. I can just do whatever I want.
So examples are only effective if you demonstrate the future potential of that idea. And that's
not to say that you can't also have those visual tests and explanations, right, explaining
how the algorithm work. But you have to realize that they're sort of accomplishing a different
goal. Communicating how something work doesn't necessarily give people a strong argument
to want to use that feature in their own work. So it helps if you combine those different
types of examples together. Okay. So I hope that I haven't been talking
in a way that sort of only relates to other library authors or tool makers or framework
makers. But in a sense, if I have, I don't think it's the end of the world because I
consider everyone a tool maker if only for themselves. You don't have to have a repo
on GitHub in order to identify those tedious tasks in your work and to design sort of more
elegant solutions and just to make your work more fun and more enjoyable, right? It's the
sign of a rational being just to avoid tedious work by making tools. And so we can think
of examples more broadly as this extension of your working knowledge. Sort of every time
I have an idea, it's like an apothecary capturing some precious essence in a glass jar and building
up that repertoire of ideas that you can then apply in any situation. And one of the things
that I like best about examples is that they don't, they're not wrapped in this thick blanket
of abstraction. They're just there, their code. You can copy and paste it into your
own example. You don't have to worry about whether or not it's configurable because
you can just reach in there and see the code as it is. So examples are inherently customizable
and composable. I want to show you sort of how I incorporate
examples into my own work by showing you some of the graphics that I've made with my colleagues
at the New York Times and then showing you examples that came out of this work. So this
graphic that we made was for the Academy Awards. It's called Among the Oscar Contenders, a
host of connections in that Times style. And this is a network of the Oscar nominees
for the major six awards. So that's the four acting awards plus Best Movie and Best Director.
And so this is a network layout. You're looking at how these actors are connected through
other films that they've worked on that also had Oscar nominees. And the main point of
this graphic was to just show how heavily interconnected that network is. These awards
are very much concentrated amongst the most successful actors. So the more successful
you are, the easier it is for you to continue that success and to continue to reap awards.
Like if you just look at this one cluster right here, this is Steven Spielberg and Kathleen
Kennedy. Together they've worked on 70 films that have been nominated for Academy Awards,
which is just kind of mind blowing. Now this example started using D3's force
layout, but because it's a static data set, one of the advantages or one of the flexible
aspects that we have, the luxuries that we have, is that we can tweak the output of that
algorithm to get better results. So this was basically like a little editor that I built
that allows you to sort of take parts of the graph and move it around. You can even like
take these beziers and like stretch them around a bit. So this is basically like a very specialized
version of Illustrator built solely for this tool using D3. So it takes the output of the
automated layout and just lets you customize it.
So the first example, this was an internal tool heavily specific to this graphic, but
the first example that I've made from this graphic was just to show how you would do
that yourself. So this is sort of a standalone example, just showing how you can click and
drag, select different nodes and move them around. And in fact, this example had four
different parts to it, sort of showing decomposing the different aspects like brushing and linking
versus dragging different nodes around. So you could sort of build up that functionality.
So if you needed to build your own sort of hand editor of a force layout, you can look
at this example and sort of see how it's done.
Another aspect of this graph was that we wanted these curved links. So again, you can't really
see the contrast on the projector display, but we wanted to do these sort of smooth
curved links throughout the network. It sort of gave it a more pleasing feel. And in some
cases, it was actually easier to follow these curved links. And using a trick that I first
saw from Brian Alexander, you can take a dummy node, you basically insert a dummy node between
each of your linked nodes. And that dummy node is not visualized, it's invisible, but
it participates in the force layout. And so then when you're drawing these links, rather
than just drawing a straight line between the two, you can draw a curved cubic bezier
that uses that dummy node as an extra control point. So if you need to incorporate this
idea, you can take that as well. It's just sort of copy and paste.
Another aspect was when you mouse over individual users or individual people or films, we wanted
to show lines emanating from those people. And part of that was just to make it more
fun. I'm not opposed to joy if it doesn't detract from the graphic. Not everything can
be a bar chart. Not everything can be spinach, as Amanda Cox says. So we wanted to, but it
also served a purpose in a way, which is that the network was so complicated that when you
mouse over, if it was just statically displayed, it wasn't necessarily obvious who you were
mousing over, which person you were focused on. And so this short, subtle animation was
just a way of drawing your eye to the focused person or movie under the mouse.
Now the problem with this is that there's no API to do this in SVG or Canvas. And the
obvious solution to do math is hard. I mean, it's not that hard, but it's not trivial either
in order to cut a basis spline at any point along its length. But there's a clever hack
you can use, which is to take dashed strokes. So SVG has a stroke-dash array property. Normally
it's used for doing a dotted or dashed stroke, like you can see in the background. But in
this case, what we're doing is we're just animating that single stroke or single dash
along the entire length of the curve. So the API was not designed to do that, obviously.
But it's very easy for us to repurpose that. And so again, that idea is now out there if
you need a similar application. So this is a different graphic now. This is one that
we did for the National Political Conventions. This is a word bubble showing the number of
mentions of these various topics, both by Republicans and by Democrats. And one of the
things I like best about this graphic is you can sort of click on these mentions here and
you get the context. You get the excerpts for those mentions. The biggest problem that
you have with word bubbles is that you see these words being mentioned, but it's not
really enough context to know what they're talking about and how that word is being used.
Because meaning really comes from the context of that word in the sentence. So you can click
through here and see not just what they're mentioning, but exactly how they're using
that. In fact, this graphic is backed up by the full transcripts from both of these conventions,
so you can type in your own words here as well. So one of the things that's sort of
funny is if you type in applause, you can see where the person that was writing the
transcripts inserted different applause and cheers and stuff like that. So you can see
who was happier or who was more effective in their speeches. Of course, it's not really
significant because different transcript writers included more or fewer numbers of applause.
It's not really representative. Okay, so in addition to showing you the number of mentions
here, we're using color and position also to indicate bias, like which of the parties
were more likely to mention terms like the auto bailout was a heavily democratic term.
Bin Laden obviously mentioned much more by the Democrats than by the Republicans versus
other topics like on the Republicans who like to mention things like unemployment or job
creators. That's a good one. Right, so let me just scroll here. Now, we also split those
circles in half so that you could see the relative proportion of mentions. And it turns
out this is also sort of an interesting math problem. There's actually no closed form solution
to compute the right place to split the circle. You can't just split it linearly because
the left side of the circle is much smaller than the middle of the circle and, again,
the right side. So it actually requires a little bit of math. You have to do numeric
integration to approximate what the solution here. It's the same problem if you want to
fill a cylinder full of water, you know, and you know the height that you want to compute,
how much water you want to put in. So I made this little example to illustrate how that
algorithm works. And again, so if you needed to use that, if you needed to cut a pie for
some reason in this weird shape, you know, now you can. Naturally, this example also included
collision detection, which is a pretty common thing that's used with these force layouts.
So I had made this example, which also colors based on the speed of particles. It's just
kind of fun to play with. Now, you've probably seen this all before, so I won't belabor you
with an explanation of how collision detection works. But one thing that's interesting about
this is that normally it's computationally intensive, because you have to do a pairwise
check, so n squared for every circle, in order to see whether those two circles intersect
and need to be pushed apart. But with this example, it uses a quadtree to optimize those
intersection checks so that it's fast enough to show several hundred circles all animating
at the same time. And that's not a feature that's built into D3, but if you find this
example and you need to use this in your own code, you can again just copy and paste that
and incorporate it. Which I like because it's a lot easier for me to publish these examples
sort of as I need to, rather than solving the much harder problem of how to abstract
it. Okay. One more example. This was a hexagonal
cardogram that we made to look at the economies of countries in Asia. And this hexagon, every
individual hexagon, represents 2.7 billion dollars in GDP. So the larger the country
is, the larger their overall GDP is. And then the color indicates the rate of growth for
that country. So you can see these larger, sort of more mature economies are slowing
down in growth. And the other aspect, which you can't see, it's down below, is a paired
cardogram showing now the population of these individual countries and the GDP per capita.
And so what you're seeing is the countries with lower GDP per capita sort of represent
more potential gain for their economy. So that's where you're seeing a lot of the growth.
Now one of the difficulties with these hexagonal cardograms is that you assign each of your
hexagons to these individual countries, but you need a way to stitch those together into
polygons. So I made this example. You can sort of paint these polygons out. And you can
see how it's able to draw this black line around the exterior of the polygon. And this
is, in fact, using one of the algorithms that I had already implemented called top-adjacent
mesh to stitch together any of these line segments into rings and together into polygons.
So I just found it's kind of an interesting example, fun to play with. And again, if you
needed to create one of these hexagonal cardograms yourself or if you wanted to re-adapt this
algorithm to some different purpose, it's a small atomic thing that you can adapt into
your own work. Another aspect of that graphic that I really like is just the threshold key,
the color key that we used to show what the color encoding was. I didn't actually design
this key. It was designed by Ford Fessenden. I first saw it, a map he made of use of force
and police stops in the different areas of New York City. But one of the things that's
really good about this color key is that it reinforces color with position. So one of
the problems that you have, particularly with coropleth maps, is that the designers choose
arbitrary breaks in their color scale to maximize contrast. Whereas with this key, you're seeing
not just which values are associated with which color, but it's reinforced because it's showing
you from zero to 100 percent, and then it's showing you where those breaks are in position.
So it's much easier to read at a glance what these values mean and to understand what you're
looking at. So to illustrate, this is another example I made called just looking at the
population density of various counties in Kentucky. And this is a typical way that you
would break up the color scale to try to maximize that contrast. Because what the problem is,
you have very high concentrations of people in urban areas, and then it sort of drops
off like a long tail so that you have much more variation in the low population areas.
And if you use regular breaks, rather than using these arbitrary breaks, then you get
something like this. And it's much harder to differentiate those values. But arguably,
it's more intuitive to understand what the colors mean. So it's a sort of trade-off between
maximizing contrast and maximizing sort of ease of understanding. And I really like that
this color scale incorporates those two things. So I made it as an example both so that I
could easily reuse it myself. And if somebody else wants to use this in their graphic, hopefully
that graphic will end up being more readable for other people as well.
So this whole process is really about taking your work and looking for those small ideas
that you can extract. So not every example is going to be a winner. Some of them are
more useful than others. Some of them are just about sort of being fun, enjoying the
work that you do and sharing that with other people. In other cases, it's about sort of
capturing this idea that you have that you might want to reuse it again. So even if you
don't share your example with other people, it's good for your own productivity to think
about extracting them into examples so that while that idea is fresh in your mind, you're
making it into this more reusable form that you can repurpose again later.
So I've talked a lot about why I think examples matter. One of the additional aspects of it
is sharing examples fosters creativity. Because these examples are very lightweight, it's
easy for you to create them, you can have a rapid sequence of examples that are made
by different people that allow them to converge and sort of make a bigger impact in less time.
So in this last part of my talk, I'm going to show a variety of examples that were implemented
by other people and including me and hopefully show how this rapid transmission of ideas
sort of encourages creativity.
So Mike McGursky has been doing this great work making the vector data for OpenStreetMap
more accessible. If you've seen some of the work that he's done previously on Metro extracts,
you can download a shape file of various large cities around the world rather than needing
to download the whole planet multi-gigabyte file and installing Postgres and all these
other complicated systems just to access the data. But lately he's been exploring another
medium that's sort of even easier to use which are vector tiles. And that enables you to
access data from any part in the world, not just this predefined list of large cities.
And then having the vector data, you have a lot of control over how you display it. You
can address individual features, you can color them, you can label them, you can stitch them
together. It's a very expressive format. In fact, you're seeing vector tiles also being
used, things like the new Google Maps UI, Apple Maps. So it's very likely that vector
maps sort of represent the future of how cartography is being done.
Another person, Nelson Minor, saw the work that Mike McGursky was doing and sort of used
it as an excuse to learn about vector tiles himself. But he took a different data set.
He took the National Hydrography data set, which is this massive multi-gigabyte data
set of all of the rivers, streams, canals, waterways in the U.S. And he wrote a tutorial
that showed how you could make vector tiles from this data set. And partly just as a test
of his processing of the data and also partly inspired by Ben Fry's All Streets, he created
this visualization, which I have termed All Streams. And it's just a beautiful view of
all of this data sort of in a simple map. And I saw this and I was inspired both by
its beauty and the sort of technical challenge of could I figure out how to use this large
data set myself? And also I felt compelled because it used the Mercator projection, so
I had to fix that. So I created my own version using Albers projection, which looks like
this. And this data is really beautiful. Like if you zoom in here, we're looking at these
vertical striations of the Appalachians. In the sense, it's almost like this inverse
topographic map where you get these dark lines in the basins and valleys rather than your
traditional hill shading. But remember this project Nelson's tutorial started out sort
of looking at vector tiles. And in this case, I'm just doing sort of something simpler.
It's using more data, but algorithmically, it's simpler. It's just presenting all that
data in a different projection. If you still want it to use tiles, reprojecting Mercator
tiles to some arbitrary projection is much harder because you don't know what tiles
to show. If you have a single tile, it's easy to reproject it, but given some arbitrary
display, you don't even know necessarily what tiles to fetch in the first place. Now, fortunately,
hard problems like this are Jason Davies' bread and butter. So he saw the work that
we were doing, and overnight, while I was asleep in California, he was working in England,
he came up with this algorithm which descends through the quad tree and then does an intersection
check with the viewport, which I'm illustrating with this sort of small inset region. And
so the red tiles here are the ones that are visible and need to be displayed. And as you
can see, this is very fast. So what this means is you can now take any projection because
it only depends on descending through the quad tree, figure out which tiles are visible,
and then display them. So this is very inspiring just at this. But of course, Jason didn't
stop there. He kept going. And he took now raster tiles and figured out how to reproject
them as well. So now using that earlier technique of figuring out which tiles are visible, combined
with raster projection, which is something that we had worked on earlier, he's now able
to take any Mercator raster tile source and reproject that with any projection. And this
is really huge because there are a huge number of tile sources, tile data sources that exist.
They're pretty ubiquitous. But conventionally, they're all stuck in the Mercator projection.
But using these two techniques, now suddenly we have the ability to take that data source
and the convenience that it represents. But now we still have the expressiveness to do
whatever we want with it. And Bill Morris saw this example and he took it and redid
it with NASA's black marble tile. So now you can see what the Eastern Sea Ward looks like
from 400 miles up into space. So you've seen a collection of examples here. And I hope
I've done at least somewhat of a job of explaining why this is important to cartography. And
it all kind of started out innocently as this sort of small sequence of examples. You start
with vector tiles, somebody else is interested in changing the projection, somebody sees
that work and then is interested in figuring out how to incorporate tiles with different
projections and then raster. And together I think the end result of that sequence of
examples is very powerful. It represents that we have much more expressiveness, but we still
have the convenience of these data sets that are all widely available. Of course, I can't
give all of the credit to examples, but I'd like to think that at least partially it helped
or accelerated this process that would happen. So I guess to sum up, I've showed you a lot
of different examples and the different purposes that they represent. Examples can serve different
functions, whether it's explaining how an algorithm works to teach you an idea or to
inspire you by demonstrating the capabilities of a particular purpose to enable you to take
some existing idea that came out of your earlier work and repurpose that in a convenient way.
But above all, the goal of my talk was that you can take that process and incorporate
it into your own work so that you can find those little ideas and feel free to share
them with other people. Because I think if you do that, we'll all benefit as a community.
Because the creativity will accelerate dramatically. So I hope that you've incorporated this into
your own work, and I'm really looking forward to seeing the examples that you come up with.
Thank you.
Thank you.
