Data Visualizations and Maps with JavaScript - TalkJS

slides now yes can see the slice so

let's start the talk now

thank you okay

hi I'm William I'm a software developer

and today I'm gonna be talking about

data visualizations and maps with

JavaScript so I'm going to show you

something similar to this today it's

it's blurry and but I'll show the real

thing later and there are problems with

mine I'm not sure if I can you can see

oh gosh I don't know if can you see we

still see the cuz the slide with the

market after with the smack manually

[Music]

honest I think that's better so I can

yes I can I can now switch now you can

see so if you look like on one map fuck

you see I'm not sure I've done something

wrong or that box does this like the D

is cut off in New Zealand I'm sorry

about this like write down some notes

inside my slides it's because this talk

has been postponed quite a few times I

might forget I might forget what I want

to say in the presentation

[Music]

here's another another interesting thing

to look at if you can't see it it's fine

[Music]

here it is zoomed in there's there's a

problem here with a data visualization

given by Channel NewsAsia like this

there's supposed to be something here

but there's none and I think it's it's

just a mistake I think I mean they

probably didn't really care about it I

guess so

what I want to say is that every

everybody makes mistakes and I'll be I

guess this was done using d3 I could I

could check now but I have to but I

guess it's done I'll talk about d3 again

later here is where a lot of these

realizations you see now are taken from

[Music]

this repository and just want to note

that this and this notice that there's

only one repository and I'm also really

grateful for the work and that you can

see in this repository although this

slides these these slides are going to

be up on github later on so you can look

at you can look at this after after my

job here's the sources that this

repository takes from and I I wanted to

show this this source this this part of

the repository because this is the data

that I used in late March and just

notice that oh gosh so big

late March that you get province and

state country-region you know last time

they are all these are these are all

these these headings and this is your

this is your raw data but then on

[Music]

but then on I think this was one week

ago and I'm just guessing that it's the

same now the headings have changed and

the raw data that you that I pulled from

it was different

actually a lot of other people pull cool

from this data and they create a api's

and I've been gonna talk about them

later

[Music]

here's something interesting which oh I

think yeah I'll talk about I'll talk

about pulling from this from this source

later here's this here's this something

interesting that I found that I think it

looks nice so when you build Maps in

JavaScript I I think you look at these

map libraries at first so leaflet

popularise and later I'm gonna show

where I got stuck while using open

layers so I ended up using leaflet for

speed and it looks like what I wanted to

get in the end you'll probably use these

map fbi's as well if you working on maps

[Music]

some some things that you might consider

is like pricing so for format box I'm

quite scared so for Google Maps you can

set daily quotas to protect against

unexpected increases so you don't want

your billing to suddenly increase

without you knowing

which which I aced when using map box so

it's important to pick the right tool

for the right job and don't be like me

if you can avoid it I only pick me flirt

because I only ended up using leaflet

because it works nicely with Matt box

and it just got close to results I

wanted to get so for security you might

want to look at that too like how it

deals with tokens and how how each of

these map ups deal with security and and

how good their documentation is for

security so you can link leaflet to

Google Maps by using plugins you can

also have a look at these are the these

are the plugins as well when Apple's map

is marketeers in maps like there's

comparisons usually between google maps

and maps and other map map api is I'm

not going to go through that in this

talk this talk is just meant for a like

things specific to mine to what I wanted

to to get if also if there's a plan like

this if there's a better API that that

um can help with open source projects

like what I what I did that would be

that would be they'll be best because um

I don't want to worry about billing and

things like that when I'm doing

client-side small small projects open

source

[Music]

so before the demo I just want to say

again that if you take data from a

repository or Fei be prepared for the

data format to change and break your

entire app this will tend to happen if

you automate pulling fetching the data

and not something I consider was like

automating the whole process to get the

latest to show the latest map and the

latest data but after a while I I

realized that if you pull from a dynamic

API your your app might break it might

be inaccurate which is not what not not

good for you your users so so if I'll

talk about this later in the next slide

or now it should also have two changes

every day or at shorter intervals if you

intend to work a news organization

Americans Newton this might be helpful

for you this is also helpful for

databases in general so something I

thought would be nice to have I think

it'd be nice to have if you do any of

this database in the future is you

should let let your users choose the

primary location because you look here

and and what I want to see is like in

the around Singapore just and I get you

know this and I feel like slow down get

to that at the end it

takes time also there are enough

existing visualizations online on coca

Dorothy please don't add more unless you

can maintain it well that's what that's

why I'm reluctant to make it to add more

to this this this whole thing I'm doing

is just a learning tool and it's not

well you can use it to deploy something

but just maintain it and so when I

started off I start off with open I

tried I I try to do I try to use both

open layers and leaflet this is just to

do a comparison for them and I think I

tried I tried them both around the same

time but what I got for open layers was

this what I got in the end what I did

was I followed their documentation and I

for some reason I did service I would

just know not what I wanted and then I

did did their client-side thing and that

is that's what you get when you get when

you use some open open layers yeah

that's what you get when you use open

layers and open layers compared to

leaflet it's nice because like for

instance if you want it it localizes the

language of locations automatically

it gives you if that part of the box for

all the different places in the world

but the thing is for openlayers I got

stuck I got stuck here and like I didn't

want to move further because it's just

more complicated because I wanted to get

something similarly similar to this

you're just shown in Channel NewsAsia

and I don't I don't mind it looking like

this but to get the markers on it's

quite difficult I think it was quite

difficult so so that's it for open

layers so I tried leaflet and oh it's

gonna show mm I was gonna show the real

like like what I was trying to recreate

and it's this this thing that's on

channel is it

Channel NewsAsia and this mmm kind of

kept lucky yeah this is mine it's what I

got when I usually flip so

when you zoom in you get well you get

like the darker red areas are places

where it's more affected I guess and

then when you zoom in you get a similar

thing where you can see for each

each country like their current

situation and this is March 21st so I'm

gonna go through how you can build

something like this

five time HTML is here

I'd leaflet add another thing for

leaflet think you see this in the

documentation is quite nice and I joined

oh I'm not sure if I've time well I

joined I joined both chart yes and

leaflet into the same into the same half

machine so what I mean by truck is is

like you can view the you can view the

case is left as well on the same I just

put it all together so that's what char

CSS does then all you have to do for

leaflet is add this all you have to do

for charge is inside that and notice I

don't use d3.js and I use short guess

and I'm if I have time I'll go through

that well I know why I try to avoid

using d3 now that's this buttons to

access token here which I'm not gonna

show but the whole things of a source

but I had removed the access token in my

the public repository

the data this is the data from John

Hopkins I think that's that's the data

and then script for leaflet is here and

just that's that's all it takes to do

like all that so I think set the you set

the bounds of a map here Oh Southwest

North East then you said when you first

load the page you set the center here

and set the view here and I I think I'm

not sure what country it's that 244

against the London or something then had

the tiles so so for for mapping in

general on the web I think everything

has to use tiles 512 pixels I guess I

think so

everything is made of tiles that are

this this size set the markers which are

[Music]

the markers are the blue these blue

things where the pop-up comes from is

patched the circles are the circles are

the circles the red circles add them

here I'll just go through this like for

each for each data set for each data

point you add a marker here and then

it's pop-up and then you add the pop-up

to the position latitude/longitude on

the map you add the circle as well then

you add the marker layer the layer of

markers all all the markers which is all

the blue points onto the map and then

you add all the circles onto the map and

then you think you you think you've

added all the all the markers already

but what you what do you have to do I'll

tell you later

so all the blue blue points

I think gosh I think all the markers are

pushed here but not sure remember what

that that does because I wanted to add

comments on to this but I thought I'd be

able to remember anyway anyway you have

to add like I've added all the markers

already but I have to add it again

I don't know I don't know why I have to

do that for leaflet and then I I want to

remove them I think I think I have to

clear

I have to clear them every time you zoom

in and at a certain point after delete

these blue markers and a sort of zoom

point and the thing is actually I

shouldn't shouldn't even gone through

the code like what I what I tried to do

was I just want to show this but what

what you might firstly do is it'll show

it will show this all of this but what

happens is that the whole map is shown

it shows all the markers it shows all

the markers and all the puppets for the

entire map even though it's not in the

view it even even if it's not in the

view right now so in my code here which

is public it which is open source you

can find out how I did that

and it's these few lines only but what

what that what it does out of the box is

that it shows you all the popups outside

of this view and it lags a lot it

there's a very huge performance hit

because all these things are dumb all

these things are built using the Dom the

popups are all Dom I think I guess the

markers

I think the markers are images it is not

really no idea so okay I think I've gone

over time but okay which is really no

idea so I I got around that made it

quite perfect made the performance quite

quite good I think it performs better

than performance better than this

yeah which which you can't even really

load and also something about this I've

missed out I started I fixed for this I

fixed their this this great thing you

get when you drag to the top or to the

bottom okay okay how about where do

people get the project from if they want

to try your code out I think this it's

on my it's on my github boots oh it's

not you can't find this type in like the

search for did a search for data

visualizations and maps your github is

WL WL - is it and it's this you just

search for this repository and all you

have to do is all you have to do is add

the private key for a leaflet for map

box in this

[Music]

all right in this in this string here

and then you can get the whole thing and

I view the whole thing again thanks a

lot

very interesting we're gonna ask some

open it up for questions now I think

Eric's could have a mutant everyone in

case in all monster house questions I

don't know if Cheyenne can help you with

the UM with the billing because I know

he's had trouble with animating in the

past I have one questions for you did

you did you try making these circles

because you made them darker when there

were more cases

did you try making them larger well but

by the number of cases changing the size

I think and I tried not to do that

because I knew that that would take

quite a long time so I avoided doing

that

it takes a considerable amount of time

compared to how like how I got all this

set up

it was quite quick and I and I finished

this like like within one or two days I

think okay sometime in March so and I

think joining getting those large

circles and doing it like channels in

News Asia there's also a maybe

performance problems then you might have

to deal with as well once you get that

off maybe we can never know about

performance until we try you try anyone

else have questions for William I have

got a question for I I don't know if I'm

allowed to ask yeah go ahead

like like

Oh actually actually it's difficult to

ask like like in this in in zoom but I

was wondering how many people still use

d3 for their database yeah okay yeah I

guess done online

[Music]

I think everyone can click on the path

on this difference but then I would

wanna and then like yes or no I mean

everyone can say like yes or no one and

then I see it

yep and yes means d3 right yeah how many

people still use d3 for all the means

something else no I still use it but I'm

just wondering how you still use it and

actually the follow-up question would be

have you found anything better because

it's causing its costs problems for me

like for some work

and it happens again and I ended up

using charges I used to use d3 now we're

using victory charts for react which

seemed a little bit easier to get going

with but I couldn't really say which

one's best

I think d3 would give us more

flexibility but victory was very simple

to just put the data and get some charts

and some interactive okay maybe at the

end you can have more chests after the

end of the meter and and heater