Visual Concepts: Subway Maps and Flight Paths

I share with Huiqi (and you!) inspirational visualization concepts I learned from the book: Beautify Visualization. The first is a redesign of the NYC subway map called KickMap(http://kickmap.com/), created by Eddie Jabbour. The second is an animated visualization of the flight paths in North America by Aaron Koblin and Valdean Klump for which you can find the video here: https://www.youtube.com/watch?v=ystkKXzt9Wk.

Transcript

The following transcript was automatically generated by an algorithm.

00:00 : so yeah i've been reading this book
00:04 : it's got some things that are
00:08 : really like really inspiring for me so i
00:11 : want to share
00:12 : those things a few examples of the
00:14 : things
00:15 : so one of them was the subway map
00:18 : example
00:20 : where this guy
00:23 : made an improved
00:27 : subway map for new york city the
00:30 : the beginning he uses the london subway
00:32 : map
00:34 : as one of his inspirations
00:37 : okay and that unfortunately i didn't
00:41 : find this online but this is like an
00:43 : older version
00:45 : of the london subway map okay
00:48 : uh it looks like it looks like very
00:50 : clean
00:51 : and the colors are very nicely
00:53 : contrasted with each other
00:56 : but that is true uh
00:59 : and just like very clean very
01:02 : not very busy looking i just like the
01:05 : concept of
01:08 : you know just like that there is a way
01:10 : to
01:11 : put a lot of information on the screen
01:14 : and still have it be useful and still
01:17 : have it be
01:19 : clean somewhat what do you think
01:22 : there probably is a difference between
01:25 : like a paper
01:26 : map like a map that you have to display
01:28 : in a limited amount of space versus like
01:31 : a screen
01:32 : that could be like infinite or you can
01:34 : zoom in zoom out
01:36 : oh wait am i not sharing my screen no
01:39 : you are not oops um
01:41 : yeah this is the the version of the new
01:44 : york map
01:45 : that this author uh it's eddie
01:49 : jabor and uh so this is his map
01:52 : and then you use them out it looks like
01:55 : this
01:56 : yeah what do you think about this map
01:58 : well
01:59 : i think i can find the information
02:03 : that i need if i'm familiar with
02:07 : how subway works
02:10 : but um it's definitely a lot of
02:13 : information
02:15 : and also i i feel like
02:20 : the other thing is uh if i were
02:23 : like a user of a mobile app maybe
02:26 : i will rely on say i just put in where i
02:29 : want to go
02:30 : and then it will just tell me how to go
02:33 : right
02:33 : so i need to look at this mac
02:36 : that's kind of true yeah if you think
02:38 : about how google maps
02:39 : works yeah there will be algorithm to
02:42 : just tell me
02:44 : what i should do like get on in here and
02:47 : then get
02:47 : off there and then it will just
02:51 : line it up as just one line
02:55 : exactly and then you would follow that
02:57 : one line so you don't care about all
02:59 : these other information on this map it's
03:01 : like how
03:02 : things like overlapping with each other
03:04 : and how what's the direction
03:06 : and all this stuff but it's kind of cool
03:09 : because
03:10 : you don't have those information when
03:12 : you just use the
03:14 : app but you do have the information when
03:16 : you look at the map
03:18 : yeah what you bring up isn't any
03:20 : interesting point
03:21 : in that when you're when you have a very
03:24 : specific goal
03:27 : then you only care about the information
03:30 : that's relevant to that specific goal
03:33 : right um and so if you think about
03:37 : if you're debugging a problem you have a
03:41 : specific
03:42 : problem and
03:43 : [Music]
03:45 : and yeah whatever you whatever the
03:47 : program
03:48 : can do to help you narrow down
03:51 : and filter out the noise that's probably
03:55 : desirable
03:56 : other than the very specific goal
03:59 : however
04:00 : i would argue that there's a secondary
04:03 : goal
04:04 : of these user interfaces not not just
04:07 : help you accomplish that one goal the
04:10 : secondary goal is
04:11 : over the long run we would actually
04:15 : like to educate you on how the whole
04:17 : system works
04:19 : right um and i guess you don't
04:23 : you don't really advertise that your
04:26 : goal
04:26 : necessarily but that's something that
04:30 : happens gradually as you're using the
04:33 : tool
04:34 : to do the specific goals right to to
04:37 : accomplish the
04:39 : specific goals over time you'll just
04:41 : learn how the system works
04:43 : as a whole yeah what if your goal is
04:46 : just to learn how the system works it's
04:48 : like if you get a new piece of code
04:50 : that you never seen before and you
04:53 : you probably want to know how it works
04:55 : from a higher level
04:57 : first but well the author telling you
05:01 : how can you know i think that is a good
05:04 : way it's a good goal just by itself
05:07 : i guess yeah it's a good goal by itself
05:10 : um
05:10 : usually what happens at least
05:14 : currently is usually like the person
05:17 : just is given the task to do i'm
05:20 : thinking about software projects
05:22 : obviously
05:23 : but usually the person is just given the
05:25 : task
05:26 : to do and his goal is to do the task
05:30 : and sometimes the task is
05:33 : can be accomplished with just
05:36 : very narrow information but sometimes
05:40 : it needs a larger scope of information
05:43 : it depends on the task
05:45 : right um like so sometimes
05:48 : sometimes all you need is to go very
05:51 : local
05:52 : like all you need to do is zoom all the
05:54 : way in
05:56 : and then do something very locally and
05:59 : then you're done
05:59 : but other times you actually need to
06:01 : bring together
06:03 : several pieces at a higher level
06:07 : and i guess where and some
06:10 : the problem is some some people may not
06:12 : realize
06:14 : that's the case maybe or they they
06:17 : they try really hard to stay local
06:22 : and because it's too overwhelming for
06:24 : them to learn
06:25 : to learn more pieces maybe
06:28 : well if everything is perfectly
06:30 : modularized
06:32 : it's okay to stay local right i mean
06:34 : that is the
06:35 : that is a good situation for
06:38 : uh say you have a large team and
06:40 : everybody just work on a small piece
06:42 : you don't have to care about a local and
06:43 : only small amount of people needs to
06:45 : care about
06:46 : how the host but sometimes sometimes a
06:49 : feature
06:50 : has to requires adding features to
06:54 : multiple modules
06:56 : that is true and then and then you have
06:58 : to hand shake between the modules
07:01 : that is true yeah and and also
07:04 : often they're not perfectly modularized
07:07 : so you have to like
07:08 : rethink what is a better way
07:12 : um a lot of times that is true but yeah
07:16 : but i think that's i think that's
07:19 : interesting like both of the things
07:22 : i think you want to keep in mind that
07:24 : yeah i want to make it really easy for
07:26 : them to isolate
07:28 : for the specific goal they're
07:31 : working on but also at the same time
07:36 : we like for them to uh be able to
07:39 : like see the surroundings and see how
07:42 : everything is
07:43 : fitting together it's similar to the
07:46 : library
07:47 : an analogy in the library is
07:50 : um a lot of times when when i go to the
07:53 : library and the librarians are like
07:55 : teaching me a lesson or something they
07:58 : will
07:58 : emphasize um the ease of
08:02 : browsing in the library is very
08:06 : desirable for or they think it's a very
08:08 : big
08:09 : value add the fact that you don't have
08:12 : the ability to browse when you're using
08:15 : a search engine
08:17 : um that's what the library gives you is
08:19 : when you're walking around the library
08:21 : you just
08:22 : naturally see the books around you
08:26 : that is true yeah i think this is the
08:28 : issue with
08:30 : the current people's way to receive data
08:32 : because
08:33 : the how the search works and how like
08:36 : even like ai's they will direct you
08:38 : towards
08:39 : things that you are looking for
08:42 : so you don't see the other things that
08:44 : you are not looking for
08:46 : or you don't know you should be looking
08:47 : for so i feel like currently it's very
08:50 : hard for people to see the bigger
08:52 : picture just because how people get
08:54 : information is by using search engines
08:56 : yeah yeah yeah that's yeah it's true
08:58 : it's true like the people who are
09:00 : end up being really good at this they
09:03 : are the people who can actually
09:04 : see the big picture in their head
09:08 : yeah so you basically need to have both
09:11 : i think and maybe what we can
09:15 : do better is to help people see the big
09:18 : picture as a whole
09:20 : without you know without
09:23 : forcing them to have to do it themselves
09:25 : in their own head
09:27 : that's true okay so this is one example
09:30 : of
09:31 : a visualization that i really like oh
09:34 : and then i
09:35 : thought about well what is something
09:37 : that is comparable to this
09:40 : one one idea i came up with was
09:43 : a flow chart so there's there's a tool
09:46 : there's a uh last time we talked about
09:49 : reverse engineering
09:51 : uh there's this reverse engineering tool
09:54 : that will actually
09:55 : read your binary executable code
09:58 : okay read the assembly language from it
10:02 : and look at the jump instructions to try
10:05 : to piece together this flow chart of
10:07 : your program
10:08 : uh-huh so i did that
10:11 : before yeah i just have a problem of
10:14 : understanding how flow chart work
10:16 : this flow is flow chart like okay in
10:18 : here you have
10:19 : yes or no or this or that or different
10:22 : branch and then you go to different
10:24 : states yeah yeah yeah so this is uh
10:27 : this is if false then go to this box
10:30 : if true that the green line is the true
10:33 : and
10:34 : there's a little t over here if true
10:36 : then
10:37 : go to this box and and this
10:40 : this picture is so large that i had to
10:44 : shrink the text to very small
10:46 : and then even then i had to do four
10:48 : screenshots and stitch them together to
10:51 : get this picture
10:52 : okay uh so now i have something that's
10:54 : kind of nice
10:56 : that i can zoom in and out and as you
10:58 : can zoom if you zoom in
11:00 : you can still see the text this code
11:03 : is 1590
11:06 : lines but but the part of that the
11:09 : flowchart
11:11 : is visualizing is only this one main
11:14 : method
11:15 : uh main function i should say these are
11:18 : not methods
11:19 : this is a function uh which is which is
11:23 : just
11:23 : that part um
11:27 : and i guess the reason why it's so large
11:31 : is every single if statement that i have
11:35 : is gonna end up being one of these
11:37 : branches
11:39 : so and also so i have
11:42 : several if statements that are kind of
11:45 : like a lot of them are early return
11:47 : statements
11:48 : so you can kind of see all the early
11:51 : returns are
11:52 : guard clauses and they're like well if
11:54 : this
11:56 : then jump all the way to the end and it
11:59 : jumps all the way to the end so
12:00 : all these blue lines over here they
12:02 : represent
12:03 : guard clauses that are gonna prematurely
12:06 : jump to the end
12:07 : well anyway this is one one idea that i
12:11 : thought of that
12:12 : might look similar to a subway map maybe
12:16 : okay so here is the question is is it
12:19 : easier to look at the code or is it
12:21 : easier to look at this flow chart
12:23 : yeah obviously obviously it's
12:28 : um obviously it's easier to look at the
12:31 : code
12:32 : right now because we're trained to look
12:35 : at the code we
12:36 : as as developers we don't look at the
12:39 : flowcharts
12:41 : yes we code but that could just be a
12:44 : force of habit
12:45 : kind of thing so um i don't know
12:50 : like i don't know in what situation it
12:53 : feels like
12:53 : like when you're trying to reverse
12:55 : engineer a
12:57 : program that you know nothing about i
12:59 : imagine this definitely helps
13:01 : that is true uh but yeah but when you're
13:04 : writing your own code you're just not
13:06 : accustomed to looking at it
13:08 : this way so i'm not sure this reminds me
13:11 : of
13:12 : uh the child's coding language
13:15 : is it oh yeah yeah yeah there's a
13:17 : scratch yeah so you've seen
13:20 : this kind of stuff where if i create a
13:23 : loop
13:25 : i go to the control section and i say
13:27 : repeat
13:28 : 10 times repeat 10 times move
13:32 : 10 steps and then maybe
13:35 : if uh if sensing if if i'm touching the
13:39 : mouse pointer
13:40 : i don't know maybe turn out i'll turn
13:43 : 15 degrees or something yeah
13:47 : uh they don't exactly render it as a
13:50 : flowchart
13:50 : but uh they render it like a
13:54 : diagram at least this is pretty good um
13:58 : yeah in college i was at one point i got
14:03 : kind of excited about visual programming
14:05 : like this i went to my
14:06 : professor and i said maybe i should make
14:09 : a visual
14:10 : visual programming language that uses
14:13 : gcc
14:14 : the c compiler to compile and
14:18 : and then my professor said that's a
14:21 : waste of time
14:23 : so this is a second example that i want
14:25 : to show you
14:28 : and this is a flight path data
14:31 : uh is a visualization of of the flights
14:35 : in uh that occurred in north america
14:42 : okay
14:45 : uh we'll just watch it it's short
14:47 : relatively
14:53 : oh it's the time thing it's like
14:57 : yeah it's an animation
15:05 : this part is interesting like it's i
15:08 : think it's like the morning
15:10 : so it starts from the east coast did you
15:12 : see that
15:13 : yeah it kind of like it
15:16 : like everybody's sleeping everybody's
15:19 : sleeping and then
15:21 : it's almost like the sun is rising
15:24 : you know and it's moving across the
15:26 : united states
15:28 : that is true
15:34 : so i like this i mean it's just
15:37 : kind of beautiful to look at this
15:39 : visualization
15:41 : um and like i guess i thought like what
15:45 : would be something like when you're
15:48 : visualizing code
15:50 : what it would be something that could
15:52 : look that way
15:53 : i thought of this this this flow chart
15:57 : so maybe like as the code is executing
16:00 : it looks like these lines
16:04 : that are moving it looks like these
16:06 : particles are moving along these lines
16:08 : maybe
16:11 : and and at a large enough scale
16:15 : maybe that can show you some sort of
16:17 : pattern although
16:18 : it is probably not it's probably
16:21 : better for educational purposes than it
16:24 : is practical
16:25 : maybe you just see the line moving over
16:29 : time
16:30 : like that and then and then if there's a
16:32 : loop
16:34 : so you will see like a beam of light
16:37 : that's going through here and then over
16:40 : here going back to the top so
16:42 : it's making a loop like that identify
16:45 : infinite look very easily
16:49 : so the only problem is it's an animation
16:52 : so that means it's going to be slow
16:54 : right
16:55 : and if you have a lot of code execution
16:58 : you know you're sitting there for a long
17:00 : time looking at the animation
17:03 : to me this this kind of animation
17:07 : it's more for like i don't know it's
17:10 : it's more for like
17:10 : maybe seeing the big picture like seeing
17:13 : because it's like just looking at the
17:15 : flight thing like you can see
17:18 : uh hey the east coast started first and
17:20 : then it goes to west coast and then you
17:21 : can see the trend of that
17:23 : but it's not like do you think it's
17:26 : helpful to
17:27 : solve the individual problem that you
17:30 : have
17:31 : i feel like that's more of a big picture
17:33 : kind of uh
17:35 : data yeah yeah there's
17:41 : there it could potentially be useful for
17:44 : isolating
17:44 : performance problems maybe yeah
17:48 : or memory leaks maybe because the
17:51 : performance problem
17:53 : requires you to look at the big picture
17:56 : mm-hmm
17:56 : you know what like you're trying to say
17:58 : okay this is
17:59 : the this is the
18:02 : total time taken i need to kind of break
18:05 : it down
18:06 : into subsections
18:10 : but i need to know the percentages
18:13 : so that i can allocate effort
18:16 : you know but decide which part is uh
18:20 : more worth the time to optimize
18:24 : so if you see if you see a
18:27 : like a ray of light that's spinning
18:31 : at a particular area a lot of times
18:34 : and you might say oh it's spinning over
18:36 : there a lot of times
18:38 : i don't know i don't know i
18:41 : can't think we might need to see it
18:45 : for real programs yeah or
18:48 : we know if it's useful or not or
18:51 : maybe an another idea might be like
18:54 : um although i i had a harder time coming
18:58 : up with
18:59 : how to map the x y coordinates for this
19:02 : example the other example i had was
19:05 : um if you plot the lifetime
19:08 : of all the objects that were allocated
19:11 : in the program
19:12 : if if you had uh like one
19:15 : object maybe our time if our time
19:18 : axis was here then it would not even be
19:21 : an animation
19:22 : it it'll just be the lifetime of the
19:25 : object started here
19:26 : maybe it mutated over here mutated over
19:29 : here
19:30 : and then here it died and then another
19:34 : object here
19:38 : and then it died and and then maybe we
19:40 : just have a lot of lines maybe
19:43 : um can we use like an
19:47 : animation to look at something like this
19:49 : maybe like
19:50 : an object is a dot or something
19:54 : and maybe some objects are larger
19:57 : because they take up more
19:58 : memory and some objects are smaller
20:03 : and and then they would and then we play
20:05 : an animation
20:07 : over this and then some of them will
20:09 : grow bigger in size
20:11 : maybe oh that's an interesting one and
20:14 : then
20:15 : shrink um and then there would be at the
20:18 : beginning maybe there's very few
20:20 : objects and then all of a sudden there's
20:22 : tons of objects
20:24 : and then maybe at the end a lot of the
20:27 : objects die
20:27 : back down i don't know it's good for
20:31 : testing memory leaks
20:33 : yeah that might be good for testing
20:34 : memory leaks but um
20:38 : but there's no like moving
20:42 : in terms of location of the objects
20:46 : how would you say maybe maybe like
20:49 : if the maybe the objects start over here
20:52 : and then they gradually move over here
20:54 : and then when they're over here they die
21:00 : but then they would yeah like this
21:03 : is moving over here so like in the
21:06 : animation it's like gradually
21:08 : going there so you have one that's over
21:11 : here
21:12 : and then on the next frame
21:15 : it's like that and then and then there's
21:17 : more that are coming in here
21:19 : or something i don't know here's some
21:22 : ideas
21:24 : pretty interesting