Developer Spotlight: Notable People Map with Topi Tjukanov

...

..

[Music]

0:04

a few weeks ago the mapping world was

0:05

consumed by an amazing global map of

0:08

notable people with each person's name

0:10

centered over their place of birth the

0:12

map went viral as just about everyone

0:14

can find something interesting as they

0:16

explore the notable people in their

0:17

corner of the earth i caught up with the

0:19

developer fellow map boxer to learn more

0:21

about how this map came into existence

0:23

what inspired him to build it and how

0:25

it's been received join me now for a

0:27

chat with topi from our map design team

0:30

hey everyone so i'm here with topi who

0:32

is a senior map designer based out of

0:34

helsinki who works for mapbox but today

0:36

we're going to talk with him about his

0:38

notable people map so topi you can

0:40

introduce yourself a little bit and then

0:42

jump right in and share screen and then

0:44

we'll talk about that we'll show the app

0:46

and then we'll talk about a little bit

0:49

yeah cool uh thanks chris um yeah you

0:52

heard it i'm i'm a map designer um based

0:55

in helsinki i've been doing map design i

0:57

think for maybe seven-ish years my

1:00

background background is in geography

1:02

and at some point i uh

1:05

realized that twitter is a nice channel

1:07

to share

1:08

map designs and an odd data explorations

1:12

and visualizations and and whatnot

1:14

and maybe this uh is a part of that

1:17

series

1:19

uh

1:20

i i made it a a few weeks ago uh i did

1:23

it during work hours it wasn't initially

1:27

like related to anything like we

1:29

recently launched the globe and and

1:32

internally we thought that yeah maybe

1:34

it's nice to get some nice um like show

1:37

to people how you could use the globe

1:39

i got this idea a bit later late

1:42

but then i think i when i when i saw the

1:45

data set that i used for this map i i

1:48

just had to do it

1:49

but eventually i was pretty happy how

1:51

how it was received so i don't feel bad

1:53

anymore about spending a few few hours

1:56

here and there there on it

1:58

yeah so maybe i should tell something

2:00

about like how i ended up doing the

2:02

actual map and many people have asked um

2:07

how i found the data or like what

2:09

inspired me to do it and

2:12

there's this nice uh newsletter called

2:14

data is plural

2:16

for anyone who's

2:18

like into database or or data analysis

2:23

or data exploration i highly recommend

2:26

following this

2:27

um i've found inspiration for many of my

2:30

visualizations from from this newsletter

2:32

so it's like weekly newsletter that

2:34

shares like around five

2:37

interesting data sets

2:39

that can be of any topic

2:42

and then this data set

2:44

which i used was featured here

2:47

uh so the data set is this uh it's a

2:51

cross verified database of notable

2:53

people

2:54

um

2:55

and it's made by real scientists unlike

2:59

myself although i was

3:01

referenced as a as a science researcher

3:04

in some of the news articles where where

3:06

it was featured

3:09

but yeah

3:10

so

3:11

there's a there's a whole article on on

3:13

the actual data set and they

3:15

they released the

3:17

data set openly openly too and then i

3:19

then i used that

3:22

the

3:24

article mentions two things

3:26

uh firstly

3:27

the

3:28

birth locations shouldn't be used as

3:30

such and secondly people shouldn't be

3:34

the rank of people shouldn't be used

3:36

like to compare different people i'm

3:38

using both in my map because this is for

3:41

for fun this is not science uh what is

3:44

what is rank if it's not for comparison

3:46

to other people with rank um

3:49

it's just a kind of like a guideline or

3:52

it's it's it's a bit vague i would say

3:55

maybe it's um

3:58

yeah

3:59

i don't know actually

4:01

but uh

4:02

but maybe it's uh it's a bit it becomes

4:05

a bit too serious to see like who's

4:07

number one and who's number two

4:10

um

4:11

but yeah i i used both of the those

4:14

those things in my map those both of

4:16

them are essential in in the map

4:20

um

4:21

there's a link to this and on on the

4:23

site and then there's also a link to

4:25

this one this is a map by the pudding

4:29

from i would say maybe four years back

4:32

uh it's a people map of the us i

4:35

initially saw this

4:36

and

4:37

got very inspired actually made with my

4:40

box tech 2. um

4:43

very inspired by this when i saw this

4:45

initially and and and i thought that

4:48

like i really want to do something

4:50

similar uh

4:51

but

4:53

either with in finland or then globally

4:56

and then when i saw this data set just

4:58

recently

4:59

and then i knew

5:01

what about the globe features we have

5:04

i thought that it's a great match

5:06

so uh

5:08

then uh a bit of

5:12

data analysis a bit of data crunching

5:16

and and this is the result

5:18

what i did was that i i

5:22

condensed the data set down in in the

5:24

sense that i

5:27

chose one person uh with with with the

5:30

highest rank for each location so

5:32

if there are people

5:34

born in helsinki uh it only only shows

5:37

the person with with the highest rank

5:39

so does that mean you had to you had to

5:41

choose i guess like central places or

5:43

notable places to actually filter the

5:45

data set by like did you just pick

5:47

cities or towns or some other proxy for

5:49

that

5:50

i i used each er each unique location so

5:55

uh that's that was my idea was that i

5:58

want to

5:59

the map to be full of names i wanted to

6:01

have like a good geographical spread and

6:04

then um i

6:06

actually did the data analysis in in

6:08

post gis

6:10

uh so that's where i did some basic sql

6:14

uh with the data and grouped it grouped

6:18

it by by location so are you saying that

6:21

there's a lot of people who are named in

6:23

the original data set that just wouldn't

6:24

show up at all because they're not the

6:26

most notable for one

6:28

location

6:29

exactly exactly so there's like

6:32

some people were asking like uh

6:35

what's a good example

6:37

like

6:38

i think it was from from new york some

6:40

people were asking like why why we have

6:42

donald trump here

6:45

not surprising that that came up but

6:47

also some other like um

6:50

some other major cities

6:52

people were asking like why is this or

6:54

that person not visible in this city

6:57

actually vladimir putin was one yeah

6:59

vladimir putin was one that

7:01

a few people asked like what where is he

7:04

uh but he was like he's not as notable

7:06

as nicolas the second

7:08

so

7:09

and you can look out you have when i

7:11

click on one you can link out and go

7:13

read more about this person

7:14

yeah so there's like a

7:17

link to wiki data

7:19

from the pop-up you can you can access

7:21

the uh um

7:23

access the wikidata page of that that

7:26

person

7:26

so

7:29

if if this would be super fancy and

7:31

would have all the features it would use

7:32

the weekly data api to get like a nice

7:35

small picture there and maybe a

7:36

description but there's actually the

7:39

this just a single html file so there's

7:42

like i don't have my own back end server

7:44

running anywhere or anything like that i

7:47

have just

7:48

like

7:49

this

7:50

maybe like uh

7:53

500 lines of

7:56

gljs and html

7:59

so did you actually like load the data

8:01

into mapbox tiling service or

8:04

where is the data actually stored

8:06

yeah great question so um

8:08

i first crunched the data in post gis

8:11

then from postgas i exported

8:14

geojsons and then the geojsons i

8:18

processed to um

8:20

with macbook styling service into vector

8:23

tiles

8:24

and i actually used some of the uh

8:26

tiling service documentation there were

8:29

like nice instructions on how to uh

8:31

create

8:32

um

8:33

vector files for place names and i used

8:37

exactly the example that uh that that

8:40

was available there because basically

8:42

i'm using this

8:44

exactly the same way as as place names i

8:46

have the ranks

8:47

uh and then i'm um deciding i'm ordering

8:51

the names based on that and that decides

8:53

what shows up

8:55

and then

8:57

then from uh from those vector tiles

8:59

i actually did the initial design in map

9:02

box studio so i created this base map

9:05

that you can see here

9:06

uh i basically created created this

9:10

out of one of the studio templates so i

9:12

wanted to keep it simple

9:14

um

9:16

and then in studio i added the the tile

9:19

layers there because i wanted to play

9:20

around with how the

9:23

names look like and how how

9:26

like how how bold some names are how big

9:28

some names are how they appear on the

9:30

map like zoom expressions and everything

9:33

so i i did that in studio

9:37

uh and then from studio i actually took

9:40

like the uh the styling and and then use

9:42

that that

9:44

code snippet in the html

9:47

awesome and what i really love about

9:49

this is that it it's it's just using the

9:51

same technique that is in place on

9:53

pretty much every web map that most

9:55

people use which is for doing labeling

9:58

um but most of the time that's behind

10:00

the scenes and we don't really think

10:01

about you know the all the work that has

10:03

to go into

10:04

deciding what what to show when and when

10:06

you zoom out you see a different set of

10:08

labels and when you zoom all the way

10:09

into street level um so it's just kind

10:11

of taking that exact same the exact same

10:14

you know calculations and algorithms and

10:16

and applying them to something different

10:18

besides place names i love it

10:20

yeah yeah thanks i i i kind of like the

10:24

uh as a geographer i really like the

10:26

combination of uh

10:28

of if you're like in iceland you don't

10:31

have to be as significant

10:33

like on a global

10:35

scale to be visible whereas in whereas

10:38

in london you

10:39

if you zoom into london you see that

10:42

you have to be

10:44

pretty significant pretty notable

10:47

uh person to to pop up because uh

10:50

there's the

10:51

data density and the accuracy is just

10:54

insane in places like like london or or

10:57

new york

10:59

awesome yeah amazing and i've seen um so

11:02

i've been watching this you know

11:03

watching the the twitter traffic on this

11:05

and it just seems like

11:07

you know everyone's immediate response

11:08

is to go to a place that they're very

11:10

familiar with and then tell you what's

11:11

wrong with the data uh and i find that i

11:14

find that fascinating just because this

11:16

is you know essentially giving a whole

11:18

new set of eyeballs

11:20

on

11:20

what otherwise would have been an

11:22

obscure you know obscure data set that

11:24

some you know maybe some database people

11:26

might have poked around with or tinkered

11:27

with it's it's it's extremely valuable

11:29

of course but it's like not something

11:31

that is for general consumption as a

11:33

data set this makes it for general

11:35

consumption uh but it also comes with

11:37

the caveat that now a lot of people are

11:39

going to be correcting it um any

11:40

anything notable like anything

11:42

interesting people have pointed out that

11:43

you didn't know about or any other

11:45

thoughts on like how we can

11:47

you know take all these corrections and

11:49

and turn them into something more useful

11:50

than just tweets

11:52

uh i'm actually i've been exchanging

11:55

some messages with the

11:57

with with some one of the researchers

11:59

who is behind the daytime and we will we

12:01

will chat with him

12:03

next week which is uh a lot of fun

12:06

and

12:07

i've heard from them the researchers

12:10

that

12:11

they've received a lot of traffic to

12:13

their uh article which is which is

12:16

really awesome yeah and and they they

12:18

said that they've been following also

12:20

the discussion and

12:21

will probably release like a 2.0 uh

12:25

version of with with the most obvious

12:27

corrections in place so

12:30

that's really really fun uh there is

12:32

something like i i think i've been told

12:35

uh

12:37

about a thousand times the sartre wasn't

12:40

born in in bokota

12:42

and

12:43

also that

12:48

uh where's where's maradona well mario

12:51

donna is uh is in the wrong place or

12:53

missing

12:55

um

12:56

yeah there are a few which i've heard

12:58

quite many times my my

12:59

twitter inbox was uh

13:03

and many people were like some people

13:05

found my like personal email i don't

13:07

know how but i got several emails there

13:10

that hey

13:12

why is this and this not person this

13:14

person not on the map

13:16

uh hey my uncle is pretty significant

13:18

why is he enough here

13:20

um

13:22

yeah but it's been fun and i

13:24

uh it's been fun to interact with people

13:26

and people like

13:28

like you said people zoom into their

13:30

hometowns and see it hey why is this

13:33

person not here

13:34

yeah and i think that's it just with

13:36

more eyeballs we can trend over time we

13:39

can trend towards you know better data i

13:41

think that's the whole

13:42

the the same you know ethos behind

13:44

wikipedia and openstreetmap and

13:47

everything else where we work together

13:48

uh on making you know some source of

13:50

truth so this is great

13:53

um

13:54

do you have any other plans for this do

13:55

you want to continue you know after

13:57

after the dataset gets updated you want

13:58

to update you know want to fix it or you

14:01

know anything else you want to you want

14:02

to see happen with this or you just kind

14:04

of want to let it let it sit

14:05

um

14:07

probably

14:09

it should be

14:10

relatively

14:12

easy to update because i have i have all

14:14

the all the tiling service

14:16

recipes and my sqls i have

14:19

all of all of it ready so

14:21

it should be

14:23

easy to to update it with with those

14:26

corrections

14:27

uh maybe i'll do that

14:29

but otherwise i don't have any any

14:31

specific plans it was this was a thing

14:33

that was on in the back of my head for a

14:35

long long time so i'm really happy and

14:37

i'm also really happy because

14:39

that when i was doing this i was super

14:42

excited about this i i shared it with

14:44

like within our team and

14:46

and with the people in the office like

14:48

hey i'm doing this thing and and i'm

14:51

happy that i

14:53

that also others felt the same

14:57

that it wasn't me just geeking around it

14:59

was like like

15:01

many people found it interesting so i'm

15:03

i'm really happy about that

15:04

still about the globe view i have to

15:06

mention one thing yeah please like

15:09

if this weren't wasn't on a globe like

15:12

there are some people who are actually

15:13

like born close to the arctic this would

15:16

look so weird on a web mercado map so

15:19

i'm

15:19

pretty pretty happy about like how this

15:22

works out and this was actually a

15:24

finnish name like up way up here and i

15:27

had to look it up like does like is this

15:30

accurate and it says that this person

15:33

was born like in the arctis arctic ocean

15:36

on on a

15:38

ship so i was pretty pretty surprised

15:41

when i when i zoomed up here

15:43

and saw that

15:46

amazing and another thing uh i have to

15:48

give a shout out to so uh william

15:51

in our team who helped me out with this

15:54

and step on in the gljs team who helped

15:56

me out so so they were they were a big

15:58

help

16:00

awesome and the code is open source it's

16:02

on github so anyone who wants to see how

16:05

you you did the you know interactions um

16:08

and just the layout and

16:10

the web the website of things can take a

16:12

look right yeah sure uh of course like

16:15

everyone says it that

16:16

it's not the cleanest code ever or

16:18

everything but

16:20

go ahead

16:21

and and if you have any any comments i'm

16:24

happy to hear but

16:25

it is on my on my uh on github page so

16:28

so

16:29

feel free to take a look and

16:32

yeah wonderful

16:34

okay thanks for uh thanks for showing us

16:35

your map and uh look forward to seeing

16:37

what you do with it in the future

16:40

thanks a lot chris okay take care

16:43

thanks so much for watching this

16:44

developer spotlight we'd love to hear

16:46

what people are building with mapbox

16:47

tools and technology so please give us a

16:49

yell on twitter and use the hashtag

16:50

builtwithmapbox see you next time