00:08
good morning everyone
00:09
welcome to another episode of excel talk
00:12
show
00:12
today is 2021 april 16th
00:17
and today we are going to do javascript
00:20
live coding plus tutorials and
00:22
explanations good morning
00:25
neighbor neighbor from neighbor neighbor
00:28
from
00:30
australia i think and good morning
00:32
ripper from united states
00:35
okay so we are going to do javascript
00:37
live coding and
00:39
creating a bar chart in
00:42
svg scalable vector graphics that's
00:45
going to be fantastic okay
00:49
and uh i'm an emacs user i'm using stuff
00:52
like keys
00:53
so for those of you emacs users on the
00:55
pink window you can see all my command
00:57
calls
00:58
their command name and the keystroke
01:01
such as moving cursor forward by word
01:03
backward by word
01:04
right word uh moving closer to the right
01:06
by a chart
01:08
to the left or jump by paragraph and so
01:11
on
01:12
or switch window okay so
01:15
let's start coding okay so this is going
01:17
to be pure javascript
01:19
no libraries no npm no nothing
01:22
javascript svg
01:23
tutorial live coding i'm going to try to
01:26
do it fast
01:27
if you have questions comment about
01:29
javascript comments in the box
01:32
uh i try to get to answer uh answer it
01:35
okay
01:36
and donate don't forget paypal me or
01:40
patreon
01:41
okay thank you and uh you know by my
01:44
javascript tutorial it's a fantastic
01:47
javascript in depth truly in depth
01:52
okay okay so let's let's start to coding
01:54
let me tell you what i'm going to do
01:56
so i so you go to
01:59
uh okay so let's go to browser let's go
02:02
to let's go to bray browser so
02:04
xari keyboard let me show you
02:08
uh what are we going to do today so
02:10
saudi keyboard blog
02:12
so you see my keyboard block then you go
02:14
to
02:15
layout click on layout then scroll down
02:17
a little bit
02:18
then you can see this chart okay
02:23
and then turn on javascript turn it on
02:26
so you can see a bar chart okay
02:28
magnify okay then i can
02:31
select all delete start to
02:34
type here and you will see
02:38
a interactive chart
02:41
of the character frequency
02:46
as you type okay so you can
02:50
see the character frequency in english e
02:53
is the is the uh most frequent letter
02:56
so what we are going to do is uh
02:59
something similar to this instead of but
03:01
instead of the character frequency what
03:04
we are doing
03:05
is diagrams okay background frequency
03:07
let me show you a
03:09
static image to uh to illustrate
03:12
so we are going to do this okay we are
03:15
going to call javascript
03:17
uh but instead of a character frequency
03:19
we are going to do diagrams so
03:21
where is let me show you an illustration
03:23
okay so
03:24
here is a bi-gram chart so what is
03:27
diagram
03:28
it's basically a sequence of two letters
03:32
so you want to compute a sequence of two
03:35
letters
03:36
and you want to find their frequency of
03:39
occurrence
03:40
in english text okay so we are going to
03:44
generate
03:44
a chart like this dynamically we are
03:46
going to write a code for that
03:49
okay so this is actually the so that
03:52
that's what we are going to do this is
03:53
actually the second part of
03:56
of of the project last time we begin
04:00
uh hold on a second here so about a week
04:04
ago i did a live stream
04:07
greetings from from macedonia
04:10
greetings program
04:14
[Laughter]
04:16
okay so last time about a week ago we
04:18
did a live stream
04:19
of live coding of the diagram
04:23
calculator so it's done so let's see so
04:26
select
04:26
all you see here's the input and here's
04:28
the output so in this text
04:30
you have t y or current occurring one
04:33
times and t
04:34
y p or green one times okay let's let's
04:36
say a b
04:37
a b a b a b okay so you see a b
04:41
occurs four times b a occurs three times
04:43
now
04:44
now let's type something random
04:48
and the and he and she
04:51
and they and them so
04:54
you can see a n occurs six times
04:58
nd six times he occurs five times you
05:02
know h
05:02
e is one of the most frequent um
05:06
diagram in english so last time we did
05:09
this
05:09
here's a code let's see okay so here is
05:12
the code so you see
05:14
this page corresponds to this page and
05:17
you can see this line is a javascript
05:19
code
05:20
so let's open it so last time we did
05:23
this
05:24
and what is missing is the actual bar
05:27
chart we don't have the bar
05:28
chart that's what we need that's the
05:30
most the visual you know we are visual
05:33
animals human animals are visual animals
05:35
we need to see the chart
05:37
not the text text is the civilization
05:39
thing
05:41
okay so here's the javascript code and
05:45
shall we go through quickly an outline
05:48
so it's not
05:49
many so it's a 80 lines okay 80 lines of
05:53
code
05:54
uh okay so we i need to think about what
05:57
um
05:59
okay i'm i okay we need to code this um
06:03
so where do we begin okay so last time
06:05
we have
06:06
so we already have these so the result
06:09
of this is basically a frequency
06:13
map okay a table map or hash table
06:16
or map or a dictionary whatever you call
06:20
it so basically the key each key is a
06:23
diagram
06:24
and the value of that key is the number
06:26
of occurrence for that
06:28
diagram that is a result okay so today
06:33
today we are all we have to do is take a
06:37
a table of the diagram data
06:41
then just generate a bar chart out of it
06:43
okay
06:45
uh okay so that's what we took need to
06:48
do so but um
06:49
okay so let me think uh
06:52
we i i haven't you know i'm doing this
06:56
uh without preparation which is a good
06:59
thing
07:00
because you can see where i struggle
07:03
okay so
07:04
so now so the input is a um
07:08
okay the input is this data so let me
07:11
show you where okay so you can see
07:16
uh let's see do we have a console.log
07:18
update okay so update let's
07:20
let's remove last time we did some
07:22
coding
07:24
and let's remove the comments i mean the
07:30
okay so we have the diagram map
07:33
that is actually the output then we
07:36
sort it then we filter
07:40
why do we have to filter because we want
07:42
to remove anything
07:44
that involves a comma period
07:47
space or punctuation
07:50
so back to the code so we filter it out
07:54
then we convert it to json
07:57
then we insert it to the text content
08:00
okay
08:02
the text content is basically
08:07
yeah the show box basically we insert it
08:10
to the html page
08:11
so so what we are concerned the input
08:16
is just the diagram okay let's
08:19
okay should i go over the code from last
08:21
time
08:22
uh yeah i think i should because i need
08:25
to do it i need to go through it myself
08:27
just to be familiar okay so let's let's
08:29
look quickly so
08:30
javascript app uh
08:35
javascript app to draw a diagram of
08:37
given text first part of the problem
08:41
grab a given text and
08:44
compute the diagrams and print the you
08:47
print the count of them example
08:51
input text a b c d e diagram is a b
08:55
b c c d d e okay now that's the first
08:58
part of problem which we've done
09:00
uh and sample output okay let's see
09:06
sample output okay so let's copy that
09:10
so we are doing kind of documentation
09:14
pasted this so let's say sample
09:18
output okay
09:21
then the second part of the problem
09:24
given
09:24
a map object which is that of the
09:28
diagram
09:29
draw a bar chart by generating a svg
09:33
object yeah that's what we need to do
09:35
okay so but
09:36
uh let's look up i mean that let's get
09:39
familiar with the code here what's going
09:41
on with the code so hold on a second so
09:43
so uh okay so the html page
09:48
you see here is the html page for that
09:52
for for this uh background so you can
09:54
see
09:56
okay so actually let's see make a backup
10:01
okay so the
10:04
relevant part is okay okay
10:08
too much garbage here actually
10:13
okay hold on a second shrink
10:16
um yeah we we need to do this quickly
10:20
okay
10:20
let's just modify let's start to modify
10:23
let's remove the other irrelevant things
10:26
ads and the google trackers
10:32
delete delete
10:36
okay background calculator ah
10:40
shrink a little bit okay
10:45
so so here is the uh bike sorry
10:48
dd dad okay so here here is the
10:51
essential that's that's essentially
10:52
that's
10:53
uh remove the keyboard guy guide
10:57
okay here's the essential uh thing so
11:00
here's the html the whole thing
11:02
showing browser so we you get a clean
11:04
version
11:05
okay the the important thing here is the
11:08
text area that is the
11:09
this box and
11:15
for example many texts
11:18
here thth okay
11:21
refresh okay so now we got some kind of
11:23
uh
11:24
data okay the important thing is the
11:27
text area
11:28
then the spam uh id
11:31
show box okay show box is basically a
11:35
empty element here so that
11:38
our javascript will you can see
11:42
show box this line get element by id
11:44
show box
11:45
it will grab this element show box
11:50
then insert the final output there okay
11:52
so that is the html good
11:54
we are familiar now okay now to the code
11:58
okay it's not so
11:59
get the text area element uh then get
12:02
the showbox element
12:04
then okay let's see what we have string
12:06
two diagram
12:08
a string to write diagram given a input
12:12
string
12:13
return a map object where keys are the
12:15
diagrams and value is the
12:17
count okay that's uh that's that
12:19
function string two bigram now remember
12:21
that
12:22
we coded that last time next
12:25
sort map sort map
12:29
sort map sorts a map object and return a
12:32
array of entries
12:33
sorted by the values okay
12:37
uh return a array of entries sorted by
12:42
the
12:47
okay it returns the array of entries not
12:50
map okay sort map
12:52
now it is used yeah it okay then
12:55
okay sort map then
12:58
then we have some map filter
13:02
returns a new map where
13:05
the function so map filter takes a map
13:08
object
13:09
and a function so returns a filter where
13:11
the function returns true
13:13
return a new map where the function
13:16
returns true so
13:18
okay we need to filter the map because
13:21
we
13:21
need to remove any diagrams that
13:24
contains a punctuation
13:27
okay cassandra map filter then uh then
13:30
filter map
13:32
then filter map there's a documentation
13:34
error filter map takes a map
13:37
map object returns a map object with
13:39
keys that contains
13:41
char that's not english letter oh okay
13:45
so this filter map function is general
13:48
then we write a wrapper using the
13:52
submap filter so that it filters out
13:56
you see it basically
14:00
we only want keys that contains letters
14:02
remove any keys that contains
14:05
punctuation and so on so that is that
14:08
function
14:08
um filter map okay
14:13
okay okay i mean okay so
14:17
then we need to start to draw the svg
14:19
okay
14:20
yeah okay so we start to draw svg here
14:23
now
14:24
near the bottom it says add event
14:28
listener
14:30
on the object text area so that means
14:34
so this is a text area so that means at
14:37
we add
14:38
event listener to it on the event input
14:41
so that means whenever this whenever
14:45
you know there's a change in this box it
14:48
will call the function f of
14:50
f update okay uh
14:54
then let's see f update
15:00
oh oh okay f update is a different
15:03
function okay then
15:04
i close it okay yeah
15:07
so yeah f update grab text area
15:13
grab text in text area and insert it
15:16
into show box okay that
15:18
that is what it is okay okay so now we
15:22
have that
15:23
now let's think let's think about a
15:25
little bit we need to grab
15:27
let's say this is the data okay
15:31
so this is the data um
15:37
okay before we um okay so this is the
15:40
data we
15:41
we need to
15:45
am i doing am i good audio check video
15:48
check
15:49
good okay so
15:54
we need to so so so let's see
15:57
then we need to start to draw svg assume
16:00
you have 100
16:01
distinct charts how many possible
16:03
backgrounds are there
16:05
okay uh write the filter function to
16:09
okay what is this write the filter
16:11
function to a given map so that
16:13
background contains space or punctuation
16:15
should be removed
16:16
that's already done write a function
16:18
given a diagram map
16:20
return a map object where the value is
16:22
percentage instead of count okay we
16:25
still need to do that
16:27
uh
16:32
we we don't need that okay so we okay
16:35
let's begin let's
16:36
let's really start to code okay so
16:39
we have
16:46
oh my god what are we doing
16:50
so so so
16:53
let me think okay so we need to start to
16:56
draw svg
16:58
and the input is something like that
17:02
and where does the input came from the
17:05
input
17:07
came from string two diagrams okay
17:10
string two diagrams but however
17:14
it is not being filtered so we actually
17:17
so the
17:18
final input needs to be these
17:22
okay so f filter map
17:26
salt map background map
17:34
okay so so this is the actual
17:40
this is the actual final input of a
17:43
diagram data
17:48
okay so once you have a diagram data so
17:51
okay i need to begin i need to begin to
17:54
code uh
17:55
okay so let's so this is the
17:59
so first of all
18:02
create a svg tag okay
18:06
let's begin to code it
18:14
let's begin to code it uh wait
18:19
uh wait where is the
18:23
okay so here's the code that's so let's
18:25
go to
18:26
i need to refer to my uh svg
18:34
uh tutorial okay i need to go to my svg
18:37
tutorial so you just go to xrd
18:43
keyboard uh web dev uh
18:46
and shank shrink what's going young
18:50
shinxing what
18:58
so here's the svg tutorial let me let me
19:01
give you a
19:02
a walkthrough of svg okay svg basics
19:05
so here is how you draw this is how svg
19:08
looks like
19:09
so if you have this code in your html
19:12
page
19:13
where svg width and h
19:16
then you say a line x
19:19
x one equals to a number y one equals
19:21
equals to a number
19:23
they are coordinates and x2 and y2
19:26
equals to a number they it will draw a
19:28
line so this is how
19:30
basically how svg is done
19:33
and you have same thing you see here is
19:36
a full code
19:37
you if you copy and paste this in into a
19:39
file
19:40
you will see you know that
19:43
and to draw a rectangle you do similarly
19:46
so you use a rectangular
19:49
rect tag okay so this is
19:53
so svg is basically just just
19:57
xml okay it's just like html
20:00
but now the problem is that we need to
20:02
generate these tags
20:04
using javascript so uh so what you do is
20:07
you can
20:08
click on this scripting svg and it will
20:12
tell you how
20:13
and i'm going to uh walk you through it
20:16
okay so let's copy that javascript code
20:20
and let's go down
20:24
let's go down let's let's paste it here
20:28
okay so you can see the code here
20:32
uh so first of all
20:36
okay let's let let's let okay yeah okay
20:41
first of all create a s svg element that
20:43
okay
20:46
uh
20:49
okay create a svg element and let's
20:54
remove that remove that create a svg
20:57
element svg1 document
20:59
create element ns then this is what you
21:02
have to put then svg so that
21:05
is a svg tag okay now once you create a
21:09
svg tag
21:09
okay oh god this is
21:13
then we need to uh create bars
21:17
ah okay let's do it them one at a time
21:23
so this is a bar
21:28
uh rectangle
21:32
uh iect i need to
21:36
shrink
21:40
okay this uh there's so
21:43
many so much to do actually
21:47
yeah there's so much to do actually i
21:51
need to
21:54
uh
21:57
yeah i need to go back to the uh
22:02
to i need to go back to
22:05
let's see let's see talk show i need to
22:08
go back
22:09
to the frequency
22:13
plot so to have a look at the chart
22:16
so as a reference
22:20
and now we go to the background
22:22
character go to the code
22:25
so we need so okay we need to think
22:28
actually
22:32
um so we have a scvg tag then we have
22:35
rectangles inside it
22:37
uh so first of all
22:41
yeah first so so
22:45
so um
22:51
so the the height
22:54
of the bar should correspond to
22:58
a number okay we need to scale the
23:01
number to
23:02
to feel you know that will be the height
23:05
of the bar
23:06
and first of all also we need to know
23:08
how many bars we have we have to have
23:10
okay
23:16
we need to know how many bars we
23:19
gonna drill because you know once you
23:23
have a svg element you need to
23:25
you you need to have the divide them so
23:28
we
23:28
you find out how fat are the bars
23:34
to find out how the
23:38
how fat to draw each bar
23:42
okay so we need to know so that
23:45
corresponds to how many elements in the
23:47
biogram okay
23:48
then okay then let's write it out
23:52
the height of
23:55
the bar should
23:58
correspond to the frequency
24:02
of the diagram as
24:06
percentage okay
24:10
yeah then
24:16
okay uh then
24:21
okay let's do this uh let's let's
24:24
simplify let's do a dummy uh example
24:26
let's see
24:29
let's just say
24:35
this is dummy input okay let's simplify
24:38
this
24:39
let's say uh 30
24:44
okay let's um
24:50
oops
24:55
let's just say constant
25:00
dummy diagram input
25:06
okay so this is a sample input we start
25:09
with a simple
25:10
uh input
25:14
okay so constant
25:18
number of diagrams okay
25:27
wait the dummy input should be actually
25:30
is a
25:32
the dummy input should be a map object
25:35
yeah it is a map object so we need to
25:38
turn this into a map object okay we can
25:41
do that
25:45
new map okay this is how you
25:49
turn a array of arrays
25:52
into a map object okay
25:57
let me input the number of diagrams
25:59
that's just
26:00
number of elements in the map so how do
26:02
you how do you find the number of
26:04
elements in your map
26:05
you you go to
26:09
javascript object javascript in depth
26:12
object reference
26:15
map uh
26:19
okay there is a size okay yeah
26:22
map object dot size okay
26:29
is that uh yeah it's not a function it's
26:33
just a property okay
26:35
map object dot size
26:38
then
26:41
the height for each one okay so so first
26:45
of all before you do anything you need
26:46
to find the percentage
26:48
like for example what put you know at th
26:51
occurs 30 times
26:54
you need to find out what is that
26:58
as a percentage of the whole so okay so
27:01
we need to write a function
27:06
okay constant okay wait constant arrow
27:10
function
27:12
compute percentage okay
27:15
uh given a map
27:20
we need to return
27:30
given a background map objects return
27:34
a map object where the
27:37
values are percentage
27:42
instead of number of
27:46
occurrence okay
27:49
so okay so so first of all we need to
27:54
sum
27:56
sum all the values in the diagram okay
27:59
so okay so so
28:03
so so so so let's look at the how do we
28:06
do things with the map
28:08
okay for each reduce
28:12
uh let's see for each
28:22
okay there are so many you know there
28:24
are so many ways
28:26
i want to do functional programming but
28:28
let's
28:29
you know let's just push through by
28:32
whatever method we need to finish this
28:34
you know
28:34
live coding uh so let's just yeah let's
28:38
just use for each then
28:43
uh for each okay function
28:46
uh this function will be error function
28:49
so for each uh for
28:52
each
28:57
what does the function what does the
29:01
value key okay so
29:04
value key
29:10
uh f is passed three arguments value key
29:14
map object okay so
29:16
we don't need actually we don't need
29:18
array we don't need
29:19
the destructive assignment
29:24
destructive
29:26
no it's not called destructive
29:28
assignment it's called
29:36
argument destructure okay we don't need
29:39
that but anyway
29:40
so function value and key
29:46
okay so so actually
29:51
there are better ways okay values okay
29:54
so dot values returns the okay i need to
29:57
go faster
30:04
returns all the values
30:08
of a map okay
30:11
then then what you get is a
30:14
iterator okay uh once you get the
30:18
iterator i think you can do uh for each
30:22
uh four of loop okay
30:25
four of loop yeah yeah so for a loop
30:31
let's do this
30:41
okay vows okay
30:45
for each v in
30:51
values
30:56
you can use i i want to use a reduce
30:59
okay
30:59
go to object reference go to array go to
31:04
[Music]
31:06
uh reduce okay
31:12
yeah that's what we want uh
31:15
let's just say reduce
31:19
okay
31:27
we don't need initial value
31:30
so that's basically some total
31:34
okay
31:40
okay so here is the total then
31:43
then okay then then for each
31:53
result map equals to
31:56
new map okay then
32:01
then for each of
32:06
for each of the
32:14
for each of the diagram map
32:20
value and key
32:31
background map set
32:34
so set is how you let's go to
32:38
um map how do you set a map
32:42
set yeah
32:55
so here is how you set a map say the map
32:58
key value okay
33:00
key value key
33:03
then value will be
33:06
okay value will be object
33:11
value will be background map
33:15
get key
33:20
divided by total okay
33:34
okay actually you don't want to
33:38
you know you don't want to overwrite the
33:39
background map so let's
33:41
uh let's this should be result map
33:43
result map dot set
33:47
okay result map dot set for each
33:51
key in the background map the
33:54
the value should be background map get
33:56
the keys value divided by total okay
34:00
then return result map
34:05
pretty fine
34:09
okay let's check check our code
34:12
constant compute percentage is a
34:14
function let's add uh
34:16
let's add that so compute percentage is
34:19
a function
34:21
take a bigram map
34:25
first of all compute the total
34:28
backgroundmap.values.reduce
34:31
yes let's compute that's a sum then
34:34
result map equals to a new map then
34:39
then for each of the input map
34:44
result map key
34:48
set the key gets a new value yeah that's
34:51
that's
34:51
that that should be it okay now
34:57
we can cancel out print it and see
35:05
uh oh god
35:09
it's let's uh let's just use dummy okay
35:15
okay now we comment this out
35:18
we don't need that yet okay this should
35:21
work
35:24
okay prettify the code and actually
35:28
this is a typescript so i need to
35:32
compile the typescript typescript by the
35:35
way is just a javascript
35:37
uh but with type checking
35:41
added but otherwise it's
35:44
identical to javascript so it says error
35:48
duplicate identifier line 46
35:54
what duplicate identifier line 46
36:01
uh what
36:14
yeah we don't care about yeah
36:20
okay two let's do it again compile file
36:24
correct okay now let's try the code
36:27
let's see if it works
36:31
it should print in the console log okay
36:38
refresh okay
36:41
arrow type error diagram dot value start
36:45
reduce
36:46
is not a function oh okay
36:56
okay yeah so diagram.values it returns
37:00
a iterable but it's not an actual array
37:03
so in order to make it
37:04
array let me show you how to do that so
37:07
in order to
37:08
make it array we need to use the
37:11
spread of operator okay so like that
37:16
compile the file okay
37:20
refresh okay
37:24
type arrow mymap.entries.sort
37:28
is not a function what uh
37:35
start sort is not a function
37:54
my map
37:57
sort map so the map object and returns
38:01
the array of entries sorted by vars
38:14
mymath.entries.sort
38:16
so my map dot entries
38:20
okay so yeah you need um
38:24
again the same problem
38:29
let me show let me do it okay so
38:32
mymap.entries
38:33
that returns a iterable you need to turn
38:37
that
38:37
into a actual array otherwise you don't
38:41
have sort function
38:48
row 89 i think you need to multiply by
38:50
100 to calculate oh yeah you are right
38:53
yeah thank you so let's correct that
38:56
later
38:58
um my mapped out entries
39:03
so my map dot entries let's go let's go
39:06
check the map
39:10
entries what does it return map dot
39:13
entries return
39:14
a iterator also iterable for the map
39:19
each yield is a array of the form key
39:21
value okay so it returns a iterable
39:25
but not actual array
39:28
so yeah so that's why you need
39:33
uh you need the spread operator dot dot
39:36
dot okay
39:37
so comment this sound again
39:41
compile it
39:44
okay now back to back to this
39:48
refresh there it is
39:51
there it is fantastic now why is it not
39:55
console
39:57
uh log it's it's not printing a
39:59
percentage okay hold on a second what's
40:01
going on
40:03
uh so go down
40:07
so we did console.log right
40:13
oh okay so you need to let's see
40:17
console.log undefined you need to put
40:20
this
40:21
whenever a keystroke happens
40:25
so you need to put this in the okay
40:28
first of all
40:29
this function needs to move up
40:38
uh let's see where is the dummy input
40:48
so this function cut needs to
40:52
go up
40:58
paste it here okay
41:01
and let me remove the the
41:05
the curly braces that encloses the
41:09
whole file i do that
41:12
so that the variables are
41:15
confined within this script but it makes
41:18
the code
41:19
indented one level which is less easy to
41:22
read
41:23
so now let's pre-divide the code okay
41:25
now it's better
41:26
easier to read so we just smoothed
41:31
the compute percentage yeah
41:35
and also you divided by total
41:40
yeah but let's not multiply by 100 for
41:43
now because
41:45
that makes it more you know
41:48
we we want the actual you know the
41:50
decimal
41:52
like us uh
41:56
scaled version from zero to one instead
41:59
of
41:59
zero to one hundred okay so here is the
42:02
function compute percentage
42:04
right and
42:08
and we are calling it here
42:12
but delete that it should actually be
42:15
called
42:17
within the update okay
42:20
so let's put it here
42:24
let's paste it here okay
42:28
uh check one file what's going on why is
42:32
it not
42:34
okay good so there is probably some
42:38
issues with
42:38
deno formatting so function update
42:44
the console.log okay let's refresh let's
42:47
see what happened
42:50
see if no it's not updating
42:55
it is printing no it's not printing
42:58
anything
42:58
in console what's going on
43:02
if oh compile okay compile
43:07
refresh is it compiled
43:12
it's not working close the close the
43:16
file okay
43:17
close it refresh i mean
43:22
okay so f12
43:25
now let's ah
43:30
okay actually so it actually updated but
43:33
it says undefined
43:35
you see as i type you see that undefined
43:39
error just repeat
43:40
so it's undefined that's our problem
43:44
open the file so let's see what's going
43:46
on so
43:47
this compute
43:51
percentage is incorrect
43:55
why is it incorrect for each
43:58
oh yeah return result map should be
44:04
yeah cd it should be here
44:10
yep compile
44:13
back to browser magnify refresh
44:18
now it works yeah fantastic so you can
44:21
see
44:22
yeah th occurs 0.57
44:27
0.5 is 0.85
44:32
times over 1 that is that means 85
44:35
percent
44:36
then ht happens 5 yeah so this is
44:40
correct so this
44:44
compute percentage now is correct now
44:47
you see writing code is
44:49
so tedious you know imagine this is a
44:51
day job
44:52
how long i've been talking probably 40
44:54
minutes
44:55
52 minutes and
44:58
no bar chart yet oh my god
45:01
so compute percentage that is the um
45:05
so we got this okay so
45:08
so we got we got the compute percentage
45:11
hello is it crazy so we're doing
45:14
javascript
45:15
today um okay so what's next what
45:21
and hello bot uh what
45:25
so what so we got the percentage yeah
45:28
now we can start to draw svg
45:30
right yeah so create a svg element there
45:34
uh and
45:38
okay then
45:42
okay then
45:46
okay now we need to think so here is the
45:49
input
45:50
for each one of them
45:53
okay so let's write it down
46:02
for each element in a bi-gram map
46:06
such as
46:11
we need to loop through them
46:15
and for each
46:18
create a bar as a create
46:22
a svg rect element
46:25
okay yeah let's do that so
46:30
yep so
46:34
yeah so so so wait so so compute
46:37
percentage here is the
46:41
uh here is
46:44
actually we need to say update here so
46:47
cons console.log compute percentage yeah
46:55
uh
46:56
compute percentage of
47:22
filter map filter map returns a map
47:26
object okay so
47:42
too many parentheses
47:49
so background map then sort it
47:54
then filter it out then compute
47:56
percentage yeah
48:03
let's try again just make sure
48:09
it is correct okay yeah we
48:12
actually we forgot to compile
48:15
yeah diagram calculator cannot find
48:20
name car1 cir1 okay so here's the arrow
48:25
again
48:28
uh coming down compile
48:33
okay refresh
48:37
is it working yes
48:45
refresh something
48:49
in the water okay
48:54
okay so so now we need to yeah
48:57
so we need to for each element in a
49:00
diagram such as that we need to loop
49:02
through them
49:03
and for each create a svg rectangular
49:06
element that's right
49:08
so okay so
49:13
copy that
49:19
actually yeah
49:26
so remove the console log so here is our
49:29
diagram
49:34
data x okay
49:41
so here's the data data x
49:47
let's just say good diagram
49:54
data good diagram data so good diagram
49:58
data
49:59
dot for each it's a map
50:03
right so we do for each map has a for
50:06
each method
50:08
then we need a arrow function
50:12
and the value
50:15
key is the argument
50:24
for each let's see
50:28
value key yeah so
50:32
given a good diagram data we go through
50:35
them for each
50:37
and then we do a you know then we give a
50:41
function
50:42
then what's the function going to do the
50:45
function is going to
50:48
uh the function is going to
50:52
to to create
50:55
a rectangle object which is here
50:58
okay copy it put it here
51:03
so the function is uh
51:08
a bar a rectangle object of svg
51:12
there then
51:17
set the attribute basically we want to
51:20
set the coordinates
51:24
the coordinate of the
51:28
rectangle so basically it looks like
51:30
that let's copy it okay
51:38
let's put it here so for reference
51:41
so we need to create something like that
51:44
so x and y so attribute x
51:49
okay the coordinate for x
51:52
coordinate not for y we don't know i
51:55
you know i don't know what's the value
51:56
yet
51:58
uh then you need the width and height
52:02
okay
52:03
so okay
52:08
okay so width
52:12
height okay uh then style okay let's
52:16
just add style
52:17
oops style
52:21
ah okay so let's just copy the style
52:24
there okay
52:30
okay so this this part is creating
52:34
a single bar in the bar chart
52:38
now there are more things we need to
52:40
figure out
52:41
because what is the coordinate
52:43
coordinate for x and what is the
52:45
coordinate
52:46
for y we don't know uh
52:50
okay so this is getting more tedious
52:54
uh first of all what is the width uh we
52:57
need to find out
53:08
what's the width of a bar and what's the
53:13
height of the of the bar so so first of
53:16
all what is the width
53:18
the width is going to be
53:22
you know we we want pixels
53:26
uh okay so we want to pick we we want
53:29
pixels
53:30
so so first of all you have to know what
53:32
is the width of
53:33
your entire svg graphics
53:36
uh i don't know but let's just set it
53:39
myself okay let's just
53:40
set it svg1
53:46
set attribute
53:50
width i believe so let's go to
53:54
viewport viewport this is how you
54:00
set the width and height of a
54:03
svg here is an example
54:08
uh so width equals to
54:14
900 okay
54:18
900 pixels wide that's our svg
54:23
box and height let's say 600
54:26
okay okay
54:32
yeah okay
54:36
yeah so so now we know the
54:40
okay we need to define
54:43
actually better it's better to define it
54:58
so that as we define them as parameters
55:02
so we can change it later
55:12
okay so wait
55:24
okay so here we have the width and
55:28
height for our svg box
55:32
now now we need to find out what's the
55:35
width and height for each bar
55:37
okay and
55:46
okay
55:49
so bar width equals to
55:54
svg width
55:58
divided by
56:02
divided by the number of bars
56:06
so the number of bars will be
56:13
this okay
56:20
size that right is that right
56:23
map object size
56:27
yeah it's a property not function
56:31
so bar width will be equals to
56:34
the width of svg box divided by
56:38
number of bars
56:43
number of bars times a
56:46
you know 0.9 so that
56:49
so that each bar doesn't you know touch
56:52
the other bar okay so that's the bar
56:55
width assume that's right
56:56
you know we we probably need to fix it
56:59
then bar
57:00
height bar height
57:04
will be dynamic
57:10
bar height will be dynamic because it
57:13
will depend on each bar
57:16
so we go back to the for each
57:20
uh so bar height will be
57:25
uh yeah
57:28
bar height will be basically the
57:30
percentage
57:31
basically the value okay
57:35
yeah by height will be just v okay so
57:43
right so bar height will be svg
57:47
height times
57:52
the value of the um
57:56
predefined uh the the value of the
58:02
of the diagram okay so let's copy that
58:05
each
58:06
this they will be here
58:09
inside okay so
58:14
uh so our code is now in a mess
58:17
so we need to uh maybe we should tidy up
58:20
right now so
58:21
clarify you know what's going on here
58:25
so we have a dummy input
58:28
number of diagrams number of diagrams
58:31
okay so here is just number of diagrams
58:41
number of diagrams number of diagrams we
58:45
don't
58:45
we need um
58:51
number of diagrams cut we should put it
58:54
down here somewhere
58:56
put it here okay so
59:00
so first of all let me input then
59:03
svg width and svg height
59:07
create a svg element then
59:19
then
59:24
create a svg element then
59:36
so then okay let me let me just
59:40
just put it here okay
59:44
so create a sg element then for each
59:47
element
59:47
in a diagram map we need to loop through
59:51
them
59:51
and for each create a svg rectangle
59:54
element
59:56
and attach it to the svg box
60:00
okay so
60:04
so let's change that to svg
60:07
box so it's easier to read to understand
60:10
okay so if
60:11
svg box so for each diagram we need to
60:14
attach it
60:15
to we need to create a rectangle element
60:19
and attach to this so that
60:22
so that you know like xml elements they
60:25
are inside
60:25
so you know so okay so
60:29
um okay so the good diagram data
60:34
is the our data and the width of the bar
60:50
okay so we need to uh how many bars we
60:54
gonna draw to find out how
60:56
fat to draw each bar the height of the
60:59
bar should correspond to the frequency
61:01
of the biograms percentage that's right
61:04
so number of diagrams is that
61:11
and the width of the each
61:14
bar is that
61:20
okay then then then for each
61:24
diagram data we compute the bar
61:28
height which is svg high times v
61:34
then create a bar now okay
61:37
here we create a rectangle element of
61:39
svg to represent the bar
61:42
but what is the coordinate okay that's
61:44
another
61:46
ah it's what a pen what a pain in the
61:48
ass
61:50
so you see what we are doing we are
61:54
let me show you okay so so you see we
61:57
have a bar chart
61:58
we that's what we want to draw each bar
62:01
you know each bar is a svg rect element
62:05
and one of the attribute is the
62:08
coordinate
62:09
x and y where it appears in you know in
62:12
the in the canvas
62:14
so x will be you know
62:17
incremental like increase increase for
62:19
each bar and the y will be
62:21
always the same be the bottom basically
62:24
the bottom of the
62:26
svg okay so the y element
62:29
is going to be constant
62:34
now svg coordinator you know the upper
62:37
left
62:37
is zero so y goes from top to down
62:41
which is uh different from
62:45
mathematics uh in general computer
62:48
graphics the coordinate
62:49
coordinate y goes from top to down so
62:52
anyway so the value of y for each bar
62:55
the coordinate is a constant and that
62:59
value should be
63:00
svg height basically okay so let's
63:04
let's go here let's there there we have
63:07
it
63:09
now the value for each x
63:13
will be different we we have to do some
63:16
kind of
63:17
uh for loop increment so much
63:20
pain so much pain in creating this
63:24
and we spent already what
63:27
an hour already so x will increase
63:31
um so what
63:35
so so okay so
63:38
so now we need to find out we need a
63:41
increment
63:42
to know which element you know the index
63:45
of the element like one two three four
63:47
five
63:48
so that we can time that by a value
63:52
to find the coordinate where we want to
63:54
draw it
63:56
okay so how do you do that well
63:59
we are using uh four each let's see
64:02
the for each method has do they have a
64:05
index
64:10
a value key map objects
64:13
no no
64:15
[Laughter]
64:16
jesus you know so you cannot do it with
64:19
four each
64:20
because we need
64:24
we we need the value and the key but we
64:28
need
64:28
also need an index so we can like
64:30
increase it
64:34
yeah so we cannot use for each
64:38
so the easier way to do it is
64:41
probably to convert the map into
64:44
a array yeah we convert the map
64:48
into a ray so so let's go back to
64:51
array javascript object reference
64:55
array then use the for
64:59
each here
65:02
you know in if you use array
65:06
then the for each the function will get
65:08
a argument that's the index of the
65:10
current index
65:12
okay so okay so let's convert this
65:21
entries okay so convert this map to
65:24
array
65:25
then i mean convert
65:29
it to a iterable then use the
65:33
dot dot dot spread operator
65:36
to convert it into an actual array
65:40
so that we actually have the for each
65:44
method for that array
65:47
uh what a pin what a pain javascript
65:50
is you know and what pain you know what
65:52
a pain it is
65:54
with these iterables crap
66:00
okay am i doing good how many people are
66:02
watching
66:03
uh this becomes a grueling
66:07
exercise night people watching
66:12
okay so okay so anyway so
66:17
we well we have to do it so we convert
66:20
it to
66:22
an array so that we have for each
66:25
element
66:26
then the function for the array is
66:30
actually different from
66:32
the map object yeah idiocy
66:36
so the function you know will actually
66:39
take
66:40
current element current index and array
66:42
okay so
66:44
the function will take three arguments
66:46
current element
66:47
so let's use argument destructure
66:51
okay now what does for each return is it
66:56
key value or value key yeah
66:59
so let's go back to map
67:04
entry key value you see if you do for
67:07
each
67:08
it's value key but if you use entries
67:10
key value so the javascript is one of
67:13
the circuits
67:14
language so any anyway so map.entries
67:17
it returns a key value pair not value
67:21
key okay so key value
67:22
key value okay then
67:28
then then for the array
67:35
then for the javascript array for each
67:43
you have the current element okay that's
67:45
the first element
67:46
key value then current index okay so
67:50
uh this will be index let's say i i
67:54
k vb i like to double them up so that
67:59
so so we have referential transparency
68:02
we have unique identifier through our
68:05
code
68:06
hopefully you know something like that
68:07
anyway so
68:10
current index uh yeah okay so so i
68:13
i is index so
68:16
yeah that's that's what we have okay so
68:19
this v
68:20
will be v and it's not to be
68:23
it's not be too weird okay because
68:25
people don't understand what we're doing
68:27
what i'm doing so okay value v is value
68:31
uh so now we have now we are able to
68:36
compute the coordinate for each bar
68:41
okay so the i increases so basically
68:45
this will be
68:45
i times
68:49
the width of the rectangle okay
68:53
so let's fix this bar width
68:57
so width will be bar width okay here
69:02
okay so so the coordinate
69:06
of x will be i
69:12
it will be um
69:19
i times spa with
69:23
times point
69:26
yeah well okay so actually
69:29
it will be i times spot width okay
69:34
then hey we got a new comment greetings
69:38
from turkey i just bought my first
69:40
ergonomic keyboard
69:41
fantastic okay so
69:45
the corner nut for each bar will be
69:49
the x will be i times bar width is that
69:51
right
69:55
so let's say the seventh diagram seven
69:58
times
69:58
yeah kind of yeah okay that's right the
70:01
height will be svg
70:02
height yeah okay
70:05
let's see what what is the orientation
70:07
of the
70:09
svg rectangle
70:17
oh it actually draws from top to bottom
70:22
damn it it draws from top to bottom
70:27
so let's say the y is zero then
70:30
we have to do we have to do kind of
70:32
inversion
70:33
geometry to get it right but anyway
70:35
let's say zero
70:36
so now the bar chart will be from top to
70:39
bottom instead of bottom to top
70:43
okay so the width will be about width
70:46
what what what about the height
70:48
okay the height will be uh bar height
70:51
okay we computed here
70:55
actually so and we compute it here
71:03
okay here's of our height then feel
71:06
green okay we don't care about that
71:08
stroke with
71:09
uh stroke with two okay
71:13
then you need to now once you create a
71:16
created
71:17
a a bar element you need to attach
71:20
it to the svg element otherwise it
71:22
doesn't work so
71:23
ba dot uh actually svg
71:28
box
71:32
dot append child okay
71:36
i believe that's what it is a
71:39
child let's go back let's go to let's
71:41
see
71:42
a scripting svg
71:45
yeah a pen child so
71:50
okay let's try to compile the program
71:53
wait not yet
71:54
so
71:58
so we need to actually dummy input so we
72:01
need to
72:02
copy all these
72:16
this we don't need the dummy input
72:20
svg we need to put the whole thing
72:23
into a function actually
72:26
yeah let's let's let's uh let's just say
72:30
draw svg okay
72:35
function okay constant arrow function
72:37
draw svg
72:40
then cut cut cut cut cut cut cut
72:44
cut cut cut okay
72:47
then put it inside here
72:51
pretty fine okay let's go back
72:54
so the draw svg
72:59
draws inserts the
73:02
svg element into
73:06
into a area in the html
73:10
into yeah where did it go
73:17
into somewhere here okay so a pen child
73:20
okay
73:24
into display okay into um
73:34
okay let's let's create a new element
73:44
okay so this is gonna be called svg
73:48
display
73:49
area okay copy that id
73:53
open that go to the top then we
73:56
create a new constant
74:00
this will be called svg display area
74:04
then get document by element by id
74:07
svg display area so we have that element
74:11
then go to the bottom so once we draw
74:15
the svg
74:16
we need to
74:21
svg display area dot append child
74:27
append child append the svg box
74:30
okay uh in fact
74:37
yeah is that right
74:41
yeah okay anyway we are probably we are
74:44
not doing something efficient right now
74:46
but uh but whatever so
74:49
so draw svg
74:56
okay so draw svg will take a
75:00
argument let's call it good diagram data
75:11
okay let's review the code uh because
75:14
otherwise it's gonna
75:15
arrow out so dummy input we probably
75:19
don't need it
75:23
yeah we we yeah we probably don't need
75:27
this
75:30
okay it's coming up
75:34
so where is dummy input so actually
75:38
good diagram data
75:46
okay cut this out
75:53
comment it out so it takes a bigram data
76:13
so it takes a
76:17
map map object
76:21
and draw and create svg
76:26
bar chart and
76:29
insert the svg element into
76:34
into into this display area element
76:46
okay
76:48
so it begin by width create a
76:52
uh you know width and height then create
76:55
a svg box
76:57
then insert it into the
77:01
display um
77:05
into the display area
77:09
a pen child right that's that's right
77:11
then
77:14
then compute the number of diagrams
77:17
that's right
77:18
then bar width that's right
77:23
then for each
77:31
then then create the bars
77:34
okay so for each
77:38
we do that constant by height
77:43
then bar x equals to that then
77:48
then blah blah blah x y with
77:52
height style a paint child that's right
77:59
so this is the example okay so this is
78:01
the example
78:05
okay so i think that's it let's we can
78:08
try it okay
78:12
compile javascript it's probably errors
78:15
i know it
78:17
okay uh error 106 32
78:24
106
78:29
error argument of type number is not
78:31
assignable to parameter of string okay
78:34
this is a common type script error so
78:38
all you have to do is two string
78:40
okay two string okay
78:45
yeah let's
78:48
compile it again
78:51
again you need two string
78:57
so line 127
79:10
this is a very annoying type script
79:14
tediousness to string
79:17
to string because you have a number here
79:21
but when you set attribute it requires
79:25
you know the argument should be string
79:27
but if you do it in javascript there's
79:29
no error because
79:30
the browser will automatically convert
79:33
so anyway
79:34
so let's compile again
79:38
so it says error an identifier for
79:42
keyword cannot immediately follow a
79:45
numeric
79:46
literal line 128
79:50
oh okay so wait uh zero two string
79:54
idiotic javascript
79:57
so you know so what you have to do is
79:59
you add the parenthesis
80:00
i think that'll work
80:04
compile again
80:07
okay error 126
80:11
132 oh yeah
80:15
we got element we
80:19
this should be bar okay so append child
80:22
append the bar to svg box okay
80:26
compile again yay compiled
80:29
now let's shall we try it refresh
80:32
and see what happens refresh
80:38
nothing happened nothing nothing
80:41
what's going on f12 to turn on
80:47
what is going on why is why is there no
80:50
um let's go to inspector
80:53
let's see where we didn't did we create
80:56
the svg element
81:03
no because if we did it should have been
81:07
inserted there oh yeah obviously because
81:10
because we did not call this function
81:13
draw svg
81:15
in the in our code for update you see
81:18
we are actually updating you know we
81:20
need to put the draw svg
81:22
into the update so pretty good
81:27
so what's the comment a pen pen yeah
81:30
that thank you yeah
81:31
so i found that error so almost you know
81:35
we are doing this without much
81:38
tryout and error you know actually you
81:40
know that that's a style of coding i
81:42
prefer
81:43
you know you just um okay so we need to
81:47
call draw svg into the
81:50
update function so we have it here
81:54
we copy that part so basically we want
81:58
to
82:02
yeah draw svg you know draw svg first of
82:06
all the
82:07
background map which is the crude
82:10
diagram data which includes punctuation
82:13
then we want to sort them then we want
82:16
to filter them actually we should filter
82:18
then sort that would be better because
82:21
once you filter you'll be less
82:23
uh item to work with okay let's let's
82:26
let's fix
82:26
okay uh filter okay
82:32
you filter it
82:36
then you
82:41
okay then you sort it
82:47
okay so so
82:50
so background map it's a map object
82:54
you filter it it returns a map map
82:57
object
82:58
then you sort it okay
83:01
actually we have a problem with sort
83:03
because our sort returns a
83:05
array not map
83:09
okay but but when you feed it to
83:13
[Music]
83:14
i think javascript automatically
83:17
converts array to
83:22
uh to object
83:26
yeah let's just be safe let's use the
83:29
old code forget about efficiency
83:33
okay so then we compute a percentage
83:36
right
83:36
then we feed it to draw svg right
83:40
yeah so i think that's that's
83:43
uh that's it and yeah so yeah
83:48
okay let's hope everything is good
83:50
compile
83:53
yes sir refresh yes sir
83:57
[Laughter]
83:59
actually we can call it a day
84:03
we can oh oh oh okay so every time
84:07
you type
84:09
you know it's just going to draw a new
84:11
svg that's what happens
84:14
yeah so you see you see the th is like
84:17
increasing
84:18
increasing increasing fantastic we
84:21
you know okay let's do some fixing
84:26
maybe 10 or 15 minutes and that that's
84:28
it uh
84:29
you know you know we it takes a while
84:33
one hour and you know we've been coding
84:35
for 90
84:36
90 minutes so so what
84:39
in order to fix this is that before
84:42
before you generate svg
84:44
you want to remove whatever remove the
84:47
child okay so you can you know you draw
84:49
a new svg
84:51
so so we need to fix the draw svg
84:55
function
84:57
now draw svg function should be above
85:00
the update code
85:01
so let's uh i don't know why it even
85:04
works
85:04
because usually when you define a
85:06
function using arrow function
85:08
you know these you know the syntax of
85:11
arrow function
85:12
it does not you have to define it before
85:17
uh before you use it you so i don't know
85:20
why
85:20
is it actually working here because we
85:23
defined it at the bottom so anyway let's
85:26
move it up so
85:27
let's move this update down okay
85:31
so let's move this update down yeah so
85:35
wait what what happened
85:40
cut the update code
85:44
move to the bottom here paste it here
85:46
okay
85:47
compile okay
85:50
now in the draw code we need to
85:53
remove the svg okay so before we do
85:56
anything
85:59
um
86:04
yeah so here display area
86:09
we can say uh inner html okay
86:12
inner html equals to empty that will
86:15
work
86:16
now there are many ways to delete all
86:19
children of a
86:20
element uh and
86:23
i researched over that to see which one
86:27
is the most
86:27
proper and fastest uh
86:31
and so i have article here somewhere uh
86:34
wait it's
86:35
it's part of dome so let's try
86:40
search for children okay
86:43
get element okay basic dom methods
86:47
element attribute get nod
86:50
navigate nodes create new nodes
86:54
insert remove replace nodes there it is
86:58
uh wait uh
87:01
replace child okay you can actually do
87:03
replace
87:04
child apparent child change
87:07
elements text content okay change
87:10
elements text content
87:12
ah let's let's just say you know html
87:15
okay that's the easiest
87:17
so before we do anything we remove the
87:20
in
87:21
html then we append the svg box
87:25
into it okay compile
87:32
go back go to the top
87:35
refresh now
87:38
type and see fantastic
87:42
and now now it is
87:45
working select or delete
87:49
so that we start
87:52
fresh again now there
87:55
is a problem that the
87:58
bars do not have gaps
88:01
in between them okay
88:04
so anyway now what we need to do is we
88:07
need to add
88:08
labels uh you see these spots you know
88:11
you need
88:12
to have labels like you know like
88:15
here uh and also you
88:19
need to invert the box not from top down
88:22
but
88:23
you know from bottom up but okay that's
88:27
more work you know that's you know 20
88:29
minutes 30 minutes so you know there's a
88:31
lot of cleanup we need to do
88:33
so let's call it a day for for this
88:36
video thank you guys for watching
88:39
uh if you guys like my you know you like
88:41
my
88:43
tutorial if you like my style go
88:46
buy okay go back saw javascript in depth
88:50
okay thank you very much oh donate me
88:55
or patreon me uh okay
88:58
so now so yeah so we basically done
89:01
we're gonna close down
89:02
uh maybe we're gonna do some cleanup of
89:05
the code
89:06
just let's go over what we've done today
89:10
clean up the code so
89:13
so our goal was to create a program
89:19
our goal is to write a program
89:22
that generate that
89:26
computes diagrams in
89:30
in english and
89:33
draw a svg bar chart for
89:37
it okay so we
89:40
basically have the prototype you know
89:42
prototype to prove
89:44
that our idea works
89:47
okay that's the end let me show you my
89:50
face instead of my let's have some human
89:53
touch
89:58
you know some human touch so we finished
90:02
fantastic and so we have a prototype and
90:04
we know
90:05
we have a outline of how to
90:09
how to do it so
90:12
so you can so here is the code
90:17
so last in my last video we we
90:20
actually wrote the code to compute the
90:22
statistics
90:23
to find all the diagrams that took one
90:26
hour
90:27
and today to draw the actual ssvg
90:31
takes you know one and a half hours
90:36
uh you know last time we wrote this
90:37
function string two diagram
90:39
which computes the diagram of a given
90:43
giant string of you know then we wrote
90:46
sort map then we wrote
90:49
map filter to filter out diagrams that
90:53
contain spatial punctuation
90:55
then we wrote then today
90:59
we wrote compute percentage you know
91:02
given a
91:03
diagram map object we want to
91:06
instead of number of occurrences we want
91:09
to change that into
91:10
uh percentage
91:13
you know so which is you know the value
91:16
divided by total
91:18
okay we wrote that today then the big
91:20
thing today we wrote is the draw svg
91:23
so this you know it's actually 10 lines
91:26
of code
91:27
if you remove the comments yeah let's
91:30
remove the comments okay
91:31
it's just 10 lines of code but you know
91:34
that's
91:34
coding that coding is usually tedious
91:40
you know anyway anyway so so this is uh
91:43
this
91:44
thing is what we did today 10 lines of
91:47
code to
91:48
for each diagram element we want to
91:51
create
91:52
a rectangle svg element
91:55
and you know it's tedious to find the
91:58
coordinate for the rectangle
92:00
where to place it and also how wide or
92:04
how
92:04
high the rectangles are so that's our
92:07
code
92:08
then finally we um
92:12
you know we have this function update
92:16
and this update is the is responsible
92:20
for
92:20
actually adding you know this
92:23
information
92:24
in the bar chart as you type you know
92:28
so you know it just caused the function
92:32
we wrote
92:32
before to do the job so we don't need
92:36
the console log
92:37
uh you know we don't we don't need that
92:39
you need a
92:40
let's remove it okay so it's just like
92:43
three line
92:44
five five you know three lines of code
92:46
this update
92:48
then we have the event listener that
92:50
means whenever user types
92:53
it cause the update function to refresh
92:56
the graphics
92:57
okay thank you guys for watching
93:01
fantastic thank you bye
93:09
you