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