1
00:00:00,000 --> 00:00:11,389
slides now yes can see the slice so

2
00:00:07,859 --> 00:00:15,290
let's start the talk now

3
00:00:11,389 --> 00:00:15,290
thank you okay

4
00:00:15,320 --> 00:00:20,789
hi I'm William I'm a software developer

5
00:00:18,510 --> 00:00:23,580
and today I'm gonna be talking about

6
00:00:20,789 --> 00:00:35,730
data visualizations and maps with

7
00:00:23,580 --> 00:00:42,600
JavaScript so I'm going to show you

8
00:00:35,730 --> 00:00:48,570
something similar to this today it's

9
00:00:42,600 --> 00:00:51,210
it's blurry and but I'll show the real

10
00:00:48,570 --> 00:00:58,140
thing later and there are problems with

11
00:00:51,210 --> 00:01:11,729
mine I'm not sure if I can you can see

12
00:00:58,140 --> 00:01:14,540
oh gosh I don't know if can you see we

13
00:01:11,729 --> 00:01:21,560
still see the cuz the slide with the

14
00:01:14,540 --> 00:01:21,560
market after with the smack manually

15
00:01:24,310 --> 00:01:27,480
[Music]

16
00:01:43,760 --> 00:01:51,140
honest I think that's better so I can

17
00:01:46,530 --> 00:01:59,610
yes I can I can now switch now you can

18
00:01:51,140 --> 00:02:01,890
see so if you look like on one map fuck

19
00:01:59,610 --> 00:02:05,460
you see I'm not sure I've done something

20
00:02:01,890 --> 00:02:15,270
wrong or that box does this like the D

21
00:02:05,460 --> 00:02:17,700
is cut off in New Zealand I'm sorry

22
00:02:15,270 --> 00:02:20,880
about this like write down some notes

23
00:02:17,700 --> 00:02:22,890
inside my slides it's because this talk

24
00:02:20,880 --> 00:02:26,700
has been postponed quite a few times I

25
00:02:22,890 --> 00:02:29,930
might forget I might forget what I want

26
00:02:26,700 --> 00:02:32,340
to say in the presentation

27
00:02:29,930 --> 00:02:38,400
[Music]

28
00:02:32,340 --> 00:02:42,610
here's another another interesting thing

29
00:02:38,400 --> 00:02:44,420
to look at if you can't see it it's fine

30
00:02:42,610 --> 00:02:47,760
[Music]

31
00:02:44,420 --> 00:02:52,980
here it is zoomed in there's there's a

32
00:02:47,760 --> 00:03:01,250
problem here with a data visualization

33
00:02:52,980 --> 00:03:01,250
given by Channel NewsAsia like this

34
00:03:03,590 --> 00:03:09,630
there's supposed to be something here

35
00:03:06,510 --> 00:03:12,180
but there's none and I think it's it's

36
00:03:09,630 --> 00:03:14,820
just a mistake I think I mean they

37
00:03:12,180 --> 00:03:18,630
probably didn't really care about it I

38
00:03:14,820 --> 00:03:20,730
guess so

39
00:03:18,630 --> 00:03:23,880
what I want to say is that every

40
00:03:20,730 --> 00:03:27,239
everybody makes mistakes and I'll be I

41
00:03:23,880 --> 00:03:29,670
guess this was done using d3 I could I

42
00:03:27,239 --> 00:03:35,190
could check now but I have to but I

43
00:03:29,670 --> 00:03:43,709
guess it's done I'll talk about d3 again

44
00:03:35,190 --> 00:03:46,030
later here is where a lot of these

45
00:03:43,709 --> 00:03:47,090
realizations you see now are taken from

46
00:03:46,030 --> 00:03:51,060
[Music]

47
00:03:47,090 --> 00:03:54,060
this repository and just want to note

48
00:03:51,060 --> 00:04:04,140
that this and this notice that there's

49
00:03:54,060 --> 00:04:07,650
only one repository and I'm also really

50
00:04:04,140 --> 00:04:13,709
grateful for the work and that you can

51
00:04:07,650 --> 00:04:15,660
see in this repository although this

52
00:04:13,709 --> 00:04:19,049
slides these these slides are going to

53
00:04:15,660 --> 00:04:22,079
be up on github later on so you can look

54
00:04:19,049 --> 00:04:27,510
at you can look at this after after my

55
00:04:22,079 --> 00:04:35,550
job here's the sources that this

56
00:04:27,510 --> 00:04:41,190
repository takes from and I I wanted to

57
00:04:35,550 --> 00:04:45,389
show this this source this this part of

58
00:04:41,190 --> 00:04:52,410
the repository because this is the data

59
00:04:45,389 --> 00:04:58,910
that I used in late March and just

60
00:04:52,410 --> 00:05:04,169
notice that oh gosh so big

61
00:04:58,910 --> 00:05:08,220
late March that you get province and

62
00:05:04,169 --> 00:05:10,039
state country-region you know last time

63
00:05:08,220 --> 00:05:13,169
they are all these are these are all

64
00:05:10,039 --> 00:05:16,140
these these headings and this is your

65
00:05:13,169 --> 00:05:22,449
this is your raw data but then on

66
00:05:16,140 --> 00:05:22,449
[Music]

67
00:05:23,970 --> 00:05:38,500
but then on I think this was one week

68
00:05:33,610 --> 00:05:42,940
ago and I'm just guessing that it's the

69
00:05:38,500 --> 00:05:45,370
same now the headings have changed and

70
00:05:42,940 --> 00:05:46,930
the raw data that you that I pulled from

71
00:05:45,370 --> 00:05:48,880
it was different

72
00:05:46,930 --> 00:05:51,070
actually a lot of other people pull cool

73
00:05:48,880 --> 00:05:53,100
from this data and they create a api's

74
00:05:51,070 --> 00:05:54,150
and I've been gonna talk about them

75
00:05:53,100 --> 00:05:57,280
later

76
00:05:54,150 --> 00:06:03,990
[Music]

77
00:05:57,280 --> 00:06:09,910
here's something interesting which oh I

78
00:06:03,990 --> 00:06:13,570
think yeah I'll talk about I'll talk

79
00:06:09,910 --> 00:06:16,570
about pulling from this from this source

80
00:06:13,570 --> 00:06:22,540
later here's this here's this something

81
00:06:16,570 --> 00:06:29,590
interesting that I found that I think it

82
00:06:22,540 --> 00:06:35,620
looks nice so when you build Maps in

83
00:06:29,590 --> 00:06:40,780
JavaScript I I think you look at these

84
00:06:35,620 --> 00:06:47,140
map libraries at first so leaflet

85
00:06:40,780 --> 00:06:50,110
popularise and later I'm gonna show

86
00:06:47,140 --> 00:06:52,810
where I got stuck while using open

87
00:06:50,110 --> 00:06:54,970
layers so I ended up using leaflet for

88
00:06:52,810 --> 00:07:01,390
speed and it looks like what I wanted to

89
00:06:54,970 --> 00:07:05,340
get in the end you'll probably use these

90
00:07:01,390 --> 00:07:05,340
map fbi's as well if you working on maps

91
00:07:06,130 --> 00:07:10,120
[Music]

92
00:07:07,830 --> 00:07:16,930
some some things that you might consider

93
00:07:10,120 --> 00:07:20,230
is like pricing so for format box I'm

94
00:07:16,930 --> 00:07:23,350
quite scared so for Google Maps you can

95
00:07:20,230 --> 00:07:29,830
set daily quotas to protect against

96
00:07:23,350 --> 00:07:32,260
unexpected increases so you don't want

97
00:07:29,830 --> 00:07:34,979
your billing to suddenly increase

98
00:07:32,260 --> 00:07:34,979
without you knowing

99
00:07:38,940 --> 00:07:44,620
which which I aced when using map box so

100
00:07:42,880 --> 00:07:47,170
it's important to pick the right tool

101
00:07:44,620 --> 00:07:50,440
for the right job and don't be like me

102
00:07:47,170 --> 00:07:52,870
if you can avoid it I only pick me flirt

103
00:07:50,440 --> 00:07:54,760
because I only ended up using leaflet

104
00:07:52,870 --> 00:07:58,450
because it works nicely with Matt box

105
00:07:54,760 --> 00:08:05,080
and it just got close to results I

106
00:07:58,450 --> 00:08:06,580
wanted to get so for security you might

107
00:08:05,080 --> 00:08:12,250
want to look at that too like how it

108
00:08:06,580 --> 00:08:16,450
deals with tokens and how how each of

109
00:08:12,250 --> 00:08:18,010
these map ups deal with security and and

110
00:08:16,450 --> 00:08:24,220
how good their documentation is for

111
00:08:18,010 --> 00:08:31,030
security so you can link leaflet to

112
00:08:24,220 --> 00:08:33,700
Google Maps by using plugins you can

113
00:08:31,030 --> 00:08:39,729
also have a look at these are the these

114
00:08:33,700 --> 00:08:47,700
are the plugins as well when Apple's map

115
00:08:39,729 --> 00:08:49,990
is marketeers in maps like there's

116
00:08:47,700 --> 00:08:53,650
comparisons usually between google maps

117
00:08:49,990 --> 00:08:55,510
and maps and other map map api is I'm

118
00:08:53,650 --> 00:09:00,930
not going to go through that in this

119
00:08:55,510 --> 00:09:04,210
talk this talk is just meant for a like

120
00:09:00,930 --> 00:09:14,080
things specific to mine to what I wanted

121
00:09:04,210 --> 00:09:17,110
to to get if also if there's a plan like

122
00:09:14,080 --> 00:09:19,600
this if there's a better API that that

123
00:09:17,110 --> 00:09:21,160
um can help with open source projects

124
00:09:19,600 --> 00:09:24,130
like what I what I did that would be

125
00:09:21,160 --> 00:09:30,070
that would be they'll be best because um

126
00:09:24,130 --> 00:09:32,040
I don't want to worry about billing and

127
00:09:30,070 --> 00:09:35,410
things like that when I'm doing

128
00:09:32,040 --> 00:09:36,470
client-side small small projects open

129
00:09:35,410 --> 00:09:39,509
source

130
00:09:36,470 --> 00:09:39,509
[Music]

131
00:09:39,710 --> 00:09:46,240
so before the demo I just want to say

132
00:09:42,380 --> 00:09:49,520
again that if you take data from a

133
00:09:46,240 --> 00:09:51,140
repository or Fei be prepared for the

134
00:09:49,520 --> 00:09:55,339
data format to change and break your

135
00:09:51,140 --> 00:10:00,220
entire app this will tend to happen if

136
00:09:55,339 --> 00:10:00,220
you automate pulling fetching the data

137
00:10:00,760 --> 00:10:08,930
and not something I consider was like

138
00:10:06,160 --> 00:10:11,930
automating the whole process to get the

139
00:10:08,930 --> 00:10:20,110
latest to show the latest map and the

140
00:10:11,930 --> 00:10:24,050
latest data but after a while I I

141
00:10:20,110 --> 00:10:31,250
realized that if you pull from a dynamic

142
00:10:24,050 --> 00:10:35,240
API your your app might break it might

143
00:10:31,250 --> 00:10:40,459
be inaccurate which is not what not not

144
00:10:35,240 --> 00:10:42,850
good for you your users so so if I'll

145
00:10:40,459 --> 00:10:49,100
talk about this later in the next slide

146
00:10:42,850 --> 00:10:53,810
or now it should also have two changes

147
00:10:49,100 --> 00:10:55,720
every day or at shorter intervals if you

148
00:10:53,810 --> 00:10:58,670
intend to work a news organization

149
00:10:55,720 --> 00:11:02,000
Americans Newton this might be helpful

150
00:10:58,670 --> 00:11:08,800
for you this is also helpful for

151
00:11:02,000 --> 00:11:12,140
databases in general so something I

152
00:11:08,800 --> 00:11:14,300
thought would be nice to have I think

153
00:11:12,140 --> 00:11:19,400
it'd be nice to have if you do any of

154
00:11:14,300 --> 00:11:23,600
this database in the future is you

155
00:11:19,400 --> 00:11:32,690
should let let your users choose the

156
00:11:23,600 --> 00:11:34,850
primary location because you look here

157
00:11:32,690 --> 00:11:38,390
and and what I want to see is like in

158
00:11:34,850 --> 00:11:43,220
the around Singapore just and I get you

159
00:11:38,390 --> 00:11:45,679
know this and I feel like slow down get

160
00:11:43,220 --> 00:11:55,160
to that at the end it

161
00:11:45,679 --> 00:11:59,899
takes time also there are enough

162
00:11:55,160 --> 00:12:03,619
existing visualizations online on coca

163
00:11:59,899 --> 00:12:05,899
Dorothy please don't add more unless you

164
00:12:03,619 --> 00:12:08,449
can maintain it well that's what that's

165
00:12:05,899 --> 00:12:13,279
why I'm reluctant to make it to add more

166
00:12:08,449 --> 00:12:16,069
to this this this whole thing I'm doing

167
00:12:13,279 --> 00:12:18,349
is just a learning tool and it's not

168
00:12:16,069 --> 00:12:40,489
well you can use it to deploy something

169
00:12:18,349 --> 00:12:44,419
but just maintain it and so when I

170
00:12:40,489 --> 00:12:46,699
started off I start off with open I

171
00:12:44,419 --> 00:12:53,059
tried I I try to do I try to use both

172
00:12:46,699 --> 00:12:57,919
open layers and leaflet this is just to

173
00:12:53,059 --> 00:13:00,709
do a comparison for them and I think I

174
00:12:57,919 --> 00:13:03,829
tried I tried them both around the same

175
00:13:00,709 --> 00:13:10,970
time but what I got for open layers was

176
00:13:03,829 --> 00:13:15,589
this what I got in the end what I did

177
00:13:10,970 --> 00:13:17,659
was I followed their documentation and I

178
00:13:15,589 --> 00:13:20,809
for some reason I did service I would

179
00:13:17,659 --> 00:13:26,209
just know not what I wanted and then I

180
00:13:20,809 --> 00:13:30,079
did did their client-side thing and that

181
00:13:26,209 --> 00:13:35,569
is that's what you get when you get when

182
00:13:30,079 --> 00:13:37,129
you use some open open layers yeah

183
00:13:35,569 --> 00:13:42,259
that's what you get when you use open

184
00:13:37,129 --> 00:13:46,939
layers and open layers compared to

185
00:13:42,259 --> 00:13:52,539
leaflet it's nice because like for

186
00:13:46,939 --> 00:13:58,860
instance if you want it it localizes the

187
00:13:52,539 --> 00:14:04,149
language of locations automatically

188
00:13:58,860 --> 00:14:08,939
it gives you if that part of the box for

189
00:14:04,149 --> 00:14:15,129
all the different places in the world

190
00:14:08,939 --> 00:14:19,720
but the thing is for openlayers I got

191
00:14:15,129 --> 00:14:22,089
stuck I got stuck here and like I didn't

192
00:14:19,720 --> 00:14:25,420
want to move further because it's just

193
00:14:22,089 --> 00:14:30,839
more complicated because I wanted to get

194
00:14:25,420 --> 00:14:30,839
something similarly similar to this

195
00:14:30,899 --> 00:14:39,610
you're just shown in Channel NewsAsia

196
00:14:34,920 --> 00:14:41,679
and I don't I don't mind it looking like

197
00:14:39,610 --> 00:14:43,600
this but to get the markers on it's

198
00:14:41,679 --> 00:14:55,420
quite difficult I think it was quite

199
00:14:43,600 --> 00:15:01,540
difficult so so that's it for open

200
00:14:55,420 --> 00:15:05,290
layers so I tried leaflet and oh it's

201
00:15:01,540 --> 00:15:09,779
gonna show mm I was gonna show the real

202
00:15:05,290 --> 00:15:12,519
like like what I was trying to recreate

203
00:15:09,779 --> 00:15:13,299
and it's this this thing that's on

204
00:15:12,519 --> 00:15:21,040
channel is it

205
00:15:13,299 --> 00:15:31,809
Channel NewsAsia and this mmm kind of

206
00:15:21,040 --> 00:15:35,970
kept lucky yeah this is mine it's what I

207
00:15:31,809 --> 00:15:39,189
got when I usually flip so

208
00:15:35,970 --> 00:15:48,429
when you zoom in you get well you get

209
00:15:39,189 --> 00:15:53,499
like the darker red areas are places

210
00:15:48,429 --> 00:15:55,720
where it's more affected I guess and

211
00:15:53,499 --> 00:15:59,730
then when you zoom in you get a similar

212
00:15:55,720 --> 00:15:59,730
thing where you can see for each

213
00:16:01,400 --> 00:16:13,520
each country like their current

214
00:16:05,180 --> 00:16:17,090
situation and this is March 21st so I'm

215
00:16:13,520 --> 00:16:19,210
gonna go through how you can build

216
00:16:17,090 --> 00:16:33,430
something like this

217
00:16:19,210 --> 00:16:39,890
five time HTML is here

218
00:16:33,430 --> 00:16:44,480
I'd leaflet add another thing for

219
00:16:39,890 --> 00:16:48,110
leaflet think you see this in the

220
00:16:44,480 --> 00:16:53,600
documentation is quite nice and I joined

221
00:16:48,110 --> 00:16:56,000
oh I'm not sure if I've time well I

222
00:16:53,600 --> 00:16:58,910
joined I joined both chart yes and

223
00:16:56,000 --> 00:17:01,520
leaflet into the same into the same half

224
00:16:58,910 --> 00:17:05,900
machine so what I mean by truck is is

225
00:17:01,520 --> 00:17:14,959
like you can view the you can view the

226
00:17:05,900 --> 00:17:23,080
case is left as well on the same I just

227
00:17:14,959 --> 00:17:28,100
put it all together so that's what char

228
00:17:23,080 --> 00:17:32,270
CSS does then all you have to do for

229
00:17:28,100 --> 00:17:37,550
leaflet is add this all you have to do

230
00:17:32,270 --> 00:17:42,080
for charge is inside that and notice I

231
00:17:37,550 --> 00:17:44,930
don't use d3.js and I use short guess

232
00:17:42,080 --> 00:17:48,290
and I'm if I have time I'll go through

233
00:17:44,930 --> 00:17:55,690
that well I know why I try to avoid

234
00:17:48,290 --> 00:17:55,690
using d3 now that's this buttons to

235
00:17:57,790 --> 00:18:04,100
access token here which I'm not gonna

236
00:18:01,220 --> 00:18:07,190
show but the whole things of a source

237
00:18:04,100 --> 00:18:11,350
but I had removed the access token in my

238
00:18:07,190 --> 00:18:11,350
the public repository

239
00:18:11,730 --> 00:18:25,300
the data this is the data from John

240
00:18:21,160 --> 00:18:39,730
Hopkins I think that's that's the data

241
00:18:25,300 --> 00:18:43,740
and then script for leaflet is here and

242
00:18:39,730 --> 00:18:55,900
just that's that's all it takes to do

243
00:18:43,740 --> 00:19:00,730
like all that so I think set the you set

244
00:18:55,900 --> 00:19:07,270
the bounds of a map here Oh Southwest

245
00:19:00,730 --> 00:19:10,210
North East then you said when you first

246
00:19:07,270 --> 00:19:18,010
load the page you set the center here

247
00:19:10,210 --> 00:19:22,080
and set the view here and I I think I'm

248
00:19:18,010 --> 00:19:22,080
not sure what country it's that 244

249
00:19:23,130 --> 00:19:36,300
against the London or something then had

250
00:19:30,360 --> 00:19:38,620
the tiles so so for for mapping in

251
00:19:36,300 --> 00:19:44,980
general on the web I think everything

252
00:19:38,620 --> 00:19:47,430
has to use tiles 512 pixels I guess I

253
00:19:44,980 --> 00:19:47,430
think so

254
00:19:49,630 --> 00:20:07,590
everything is made of tiles that are

255
00:19:56,030 --> 00:20:10,830
this this size set the markers which are

256
00:20:07,590 --> 00:20:10,830
[Music]

257
00:20:12,010 --> 00:20:19,520
the markers are the blue these blue

258
00:20:14,780 --> 00:20:25,669
things where the pop-up comes from is

259
00:20:19,520 --> 00:20:32,419
patched the circles are the circles are

260
00:20:25,669 --> 00:21:00,710
the circles the red circles add them

261
00:20:32,419 --> 00:21:03,200
here I'll just go through this like for

262
00:21:00,710 --> 00:21:05,929
each for each data set for each data

263
00:21:03,200 --> 00:21:09,559
point you add a marker here and then

264
00:21:05,929 --> 00:21:14,270
it's pop-up and then you add the pop-up

265
00:21:09,559 --> 00:21:27,260
to the position latitude/longitude on

266
00:21:14,270 --> 00:21:29,780
the map you add the circle as well then

267
00:21:27,260 --> 00:21:31,610
you add the marker layer the layer of

268
00:21:29,780 --> 00:21:33,500
markers all all the markers which is all

269
00:21:31,610 --> 00:21:35,720
the blue points onto the map and then

270
00:21:33,500 --> 00:21:38,960
you add all the circles onto the map and

271
00:21:35,720 --> 00:21:45,590
then you think you you think you've

272
00:21:38,960 --> 00:21:49,309
added all the all the markers already

273
00:21:45,590 --> 00:21:51,610
but what you what do you have to do I'll

274
00:21:49,309 --> 00:21:51,610
tell you later

275
00:21:52,929 --> 00:21:57,250
so all the blue blue points

276
00:21:59,420 --> 00:22:40,890
I think gosh I think all the markers are

277
00:22:24,840 --> 00:22:59,640
pushed here but not sure remember what

278
00:22:40,890 --> 00:23:12,480
that that does because I wanted to add

279
00:22:59,640 --> 00:23:25,650
comments on to this but I thought I'd be

280
00:23:12,480 --> 00:23:28,380
able to remember anyway anyway you have

281
00:23:25,650 --> 00:23:38,040
to add like I've added all the markers

282
00:23:28,380 --> 00:23:40,740
already but I have to add it again

283
00:23:38,040 --> 00:23:49,200
I don't know I don't know why I have to

284
00:23:40,740 --> 00:23:50,940
do that for leaflet and then I I want to

285
00:23:49,200 --> 00:23:53,480
remove them I think I think I have to

286
00:23:50,940 --> 00:23:53,480
clear

287
00:23:57,740 --> 00:24:06,000
I have to clear them every time you zoom

288
00:24:01,200 --> 00:24:08,040
in and at a certain point after delete

289
00:24:06,000 --> 00:24:12,000
these blue markers and a sort of zoom

290
00:24:08,040 --> 00:24:13,530
point and the thing is actually I

291
00:24:12,000 --> 00:24:16,460
shouldn't shouldn't even gone through

292
00:24:13,530 --> 00:24:20,930
the code like what I what I tried to do

293
00:24:16,460 --> 00:24:24,450
was I just want to show this but what

294
00:24:20,930 --> 00:24:27,540
what you might firstly do is it'll show

295
00:24:24,450 --> 00:24:30,260
it will show this all of this but what

296
00:24:27,540 --> 00:24:33,300
happens is that the whole map is shown

297
00:24:30,260 --> 00:24:34,680
it shows all the markers it shows all

298
00:24:33,300 --> 00:24:37,350
the markers and all the puppets for the

299
00:24:34,680 --> 00:24:41,040
entire map even though it's not in the

300
00:24:37,350 --> 00:24:47,430
view it even even if it's not in the

301
00:24:41,040 --> 00:24:49,380
view right now so in my code here which

302
00:24:47,430 --> 00:24:50,820
is public it which is open source you

303
00:24:49,380 --> 00:24:56,670
can find out how I did that

304
00:24:50,820 --> 00:25:00,300
and it's these few lines only but what

305
00:24:56,670 --> 00:25:02,490
what that what it does out of the box is

306
00:25:00,300 --> 00:25:07,370
that it shows you all the popups outside

307
00:25:02,490 --> 00:25:09,990
of this view and it lags a lot it

308
00:25:07,370 --> 00:25:12,720
there's a very huge performance hit

309
00:25:09,990 --> 00:25:16,410
because all these things are dumb all

310
00:25:12,720 --> 00:25:18,510
these things are built using the Dom the

311
00:25:16,410 --> 00:25:18,990
popups are all Dom I think I guess the

312
00:25:18,510 --> 00:25:21,300
markers

313
00:25:18,990 --> 00:25:26,880
I think the markers are images it is not

314
00:25:21,300 --> 00:25:34,350
really no idea so okay I think I've gone

315
00:25:26,880 --> 00:25:36,570
over time but okay which is really no

316
00:25:34,350 --> 00:25:39,180
idea so I I got around that made it

317
00:25:36,570 --> 00:25:40,710
quite perfect made the performance quite

318
00:25:39,180 --> 00:25:44,990
quite good I think it performs better

319
00:25:40,710 --> 00:25:44,990
than performance better than this

320
00:25:48,669 --> 00:25:57,169
yeah which which you can't even really

321
00:25:51,019 --> 00:26:02,570
load and also something about this I've

322
00:25:57,169 --> 00:26:05,779
missed out I started I fixed for this I

323
00:26:02,570 --> 00:26:11,450
fixed their this this great thing you

324
00:26:05,779 --> 00:26:20,570
get when you drag to the top or to the

325
00:26:11,450 --> 00:26:22,580
bottom okay okay how about where do

326
00:26:20,570 --> 00:26:28,610
people get the project from if they want

327
00:26:22,580 --> 00:26:32,269
to try your code out I think this it's

328
00:26:28,610 --> 00:26:34,639
on my it's on my github boots oh it's

329
00:26:32,269 --> 00:26:37,909
not you can't find this type in like the

330
00:26:34,639 --> 00:26:41,330
search for did a search for data

331
00:26:37,909 --> 00:27:01,250
visualizations and maps your github is

332
00:26:41,330 --> 00:27:03,260
WL WL - is it and it's this you just

333
00:27:01,250 --> 00:27:07,070
search for this repository and all you

334
00:27:03,260 --> 00:27:11,750
have to do is all you have to do is add

335
00:27:07,070 --> 00:27:16,060
the private key for a leaflet for map

336
00:27:11,750 --> 00:27:18,400
box in this

337
00:27:16,060 --> 00:27:22,250
[Music]

338
00:27:18,400 --> 00:27:25,040
all right in this in this string here

339
00:27:22,250 --> 00:27:31,310
and then you can get the whole thing and

340
00:27:25,040 --> 00:27:31,730
I view the whole thing again thanks a

341
00:27:31,310 --> 00:27:36,250
lot

342
00:27:31,730 --> 00:27:39,380
very interesting we're gonna ask some

343
00:27:36,250 --> 00:27:42,050
open it up for questions now I think

344
00:27:39,380 --> 00:27:44,030
Eric's could have a mutant everyone in

345
00:27:42,050 --> 00:27:46,640
case in all monster house questions I

346
00:27:44,030 --> 00:27:48,830
don't know if Cheyenne can help you with

347
00:27:46,640 --> 00:27:51,560
the UM with the billing because I know

348
00:27:48,830 --> 00:28:04,880
he's had trouble with animating in the

349
00:27:51,560 --> 00:28:07,070
past I have one questions for you did

350
00:28:04,880 --> 00:28:09,290
you did you try making these circles

351
00:28:07,070 --> 00:28:11,750
because you made them darker when there

352
00:28:09,290 --> 00:28:15,700
were more cases

353
00:28:11,750 --> 00:28:18,320
did you try making them larger well but

354
00:28:15,700 --> 00:28:22,660
by the number of cases changing the size

355
00:28:18,320 --> 00:28:25,070
I think and I tried not to do that

356
00:28:22,660 --> 00:28:27,740
because I knew that that would take

357
00:28:25,070 --> 00:28:29,920
quite a long time so I avoided doing

358
00:28:27,740 --> 00:28:29,920
that

359
00:28:31,140 --> 00:28:37,960
it takes a considerable amount of time

360
00:28:33,850 --> 00:28:38,560
compared to how like how I got all this

361
00:28:37,960 --> 00:28:42,490
set up

362
00:28:38,560 --> 00:28:46,120
it was quite quick and I and I finished

363
00:28:42,490 --> 00:28:49,870
this like like within one or two days I

364
00:28:46,120 --> 00:28:51,790
think okay sometime in March so and I

365
00:28:49,870 --> 00:28:53,560
think joining getting those large

366
00:28:51,790 --> 00:28:55,510
circles and doing it like channels in

367
00:28:53,560 --> 00:28:59,260
News Asia there's also a maybe

368
00:28:55,510 --> 00:29:00,940
performance problems then you might have

369
00:28:59,260 --> 00:29:04,480
to deal with as well once you get that

370
00:29:00,940 --> 00:29:13,300
off maybe we can never know about

371
00:29:04,480 --> 00:29:48,610
performance until we try you try anyone

372
00:29:13,300 --> 00:29:51,460
else have questions for William I have

373
00:29:48,610 --> 00:29:54,160
got a question for I I don't know if I'm

374
00:29:51,460 --> 00:29:57,270
allowed to ask yeah go ahead

375
00:29:54,160 --> 00:29:57,270
like like

376
00:29:57,860 --> 00:30:04,490
Oh actually actually it's difficult to

377
00:30:01,250 --> 00:30:06,470
ask like like in this in in zoom but I

378
00:30:04,490 --> 00:30:14,090
was wondering how many people still use

379
00:30:06,470 --> 00:30:16,730
d3 for their database yeah okay yeah I

380
00:30:14,090 --> 00:30:19,779
guess done online

381
00:30:16,730 --> 00:30:19,779
[Music]

382
00:30:19,789 --> 00:30:26,029
I think everyone can click on the path

383
00:30:22,940 --> 00:30:34,100
on this difference but then I would

384
00:30:26,029 --> 00:30:35,570
wanna and then like yes or no I mean

385
00:30:34,100 --> 00:30:36,710
everyone can say like yes or no one and

386
00:30:35,570 --> 00:30:46,010
then I see it

387
00:30:36,710 --> 00:30:48,669
yep and yes means d3 right yeah how many

388
00:30:46,010 --> 00:30:59,779
people still use d3 for all the means

389
00:30:48,669 --> 00:31:02,450
something else no I still use it but I'm

390
00:30:59,779 --> 00:31:04,299
just wondering how you still use it and

391
00:31:02,450 --> 00:31:08,029
actually the follow-up question would be

392
00:31:04,299 --> 00:31:11,840
have you found anything better because

393
00:31:08,029 --> 00:31:14,690
it's causing its costs problems for me

394
00:31:11,840 --> 00:31:18,470
like for some work

395
00:31:14,690 --> 00:31:38,210
and it happens again and I ended up

396
00:31:18,470 --> 00:31:42,049
using charges I used to use d3 now we're

397
00:31:38,210 --> 00:31:43,669
using victory charts for react which

398
00:31:42,049 --> 00:31:46,730
seemed a little bit easier to get going

399
00:31:43,669 --> 00:31:47,510
with but I couldn't really say which

400
00:31:46,730 --> 00:31:49,190
one's best

401
00:31:47,510 --> 00:31:53,690
I think d3 would give us more

402
00:31:49,190 --> 00:31:56,059
flexibility but victory was very simple

403
00:31:53,690 --> 00:32:05,690
to just put the data and get some charts

404
00:31:56,059 --> 00:32:08,240
and some interactive okay maybe at the

405
00:32:05,690 --> 00:32:12,700
end you can have more chests after the

406
00:32:08,240 --> 00:32:12,700
end of the meter and and heater