Developing a Web App with the Power of Node.js | Guy Yachdav | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Developing a Web App with the Power of Node.js

teacher avatar Guy Yachdav

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

30 Lessons (3h 57m)
    • 1. Course Introduction

    • 2. Language Basics - Introduction

    • 3. Language Basics - Lexical Structure

    • 4. Language Basics - Data Types

    • 5. Language Basics - Scoping and Hoisting

    • 6. Language Basics - Loops

    • 7. Language Basics - Conditional Statements

    • 8. Language Basics - Summary

    • 9. Server-side JavaScript - Introduction

    • 10. Server-side JavaScript - Anatomy of HTTP Transactions

    • 11. Server-side JavaScript - Node.js and NPM

    • 12. Server-side JavaScript - What is Needed for a Web Application

    • 13. Server-side JavaScript - Our Example Application

    • 14. Server-side JavaScript - Web Application Components: Controllers and Models

    • 15. Server-side JavaScript - Web Application Components: Views

    • 16. Server-side JavaScript - Summary

    • 17. Server-side JavaScript - Demo 1: Working with an Example Application (Optional)

    • 18. Server-side JavaScript - Demo 2: Running an Example Application (Optional)

    • 19. Data Visualisation - Introduction

    • 20. Data Visualisation - Data Retrieval using HTTP Requests

    • 21. Data Visualisation - Data Visualisation with D3

    • 22. Data Visualisation - DOM and SVG

    • 23. Data Visualisation - Data Binding with D3

    • 24. Data Visualisation - Controlling Element Styles

    • 25. Data Visualisation - Event Handling in D3

    • 26. Data Visualisation - Summary

    • 27. Data Visualisation - Demo 1 (Optional)

    • 28. Data Visualisation - Demo 2 (Optional)

    • 29. Data Visualisation - Demo 3 (Optional)

    • 30. Course Summary

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

JavaScript is the most trending programming language on the web today! Facebook, Google, Uber and countless so-called Unicorn startups have now made JavaScript a cornerstone of their technology stack.

This online course requires no prior knowledge of the JavaScript language. In the first module of the course you will explore the language's basic concepts and fundamentals. While JavaScript is recognised primarily for making web pages interactive within web browsers, this course covers the use of the Node.js library - a platform that enables running JavaScript code outside the browser and allows the development of an end-to-end applications in JavaScript.

In the second module, you will cover the basic architecture of a web application by getting an up-close view of the different parts that make up this application. You will see how data is being exchanged over an Application Programming Interface (API) and what are the different tools and libraries that will allow you to construct such an application. The course will then cover the basic steps required to set up a Node.js server that can process web requests and interact with various set of databases. In the process, you will also be introduced to the Model View Controller (MVC) pattern, a software architecture that organises the JavaScript application into modules.

Finally, in the third module, you will also learn how incredibly easy it is to create beautiful data visualisations that your boss will be proud of. You will gain a basic understanding of the technologies used to present data on the web and will learn how to visualize interactive data using the popular Data Driven Documents (D3) data library.

Whether you are considering a career as a full-stack web developer, pondering developing a mobile app for your next startup or just want to pad your toolbox with a highly sought out skill, this course is definitely for you!

What you'll learn

  • Basic programming in JavaScript
  • Introduction to the Node.js library
  • Introduction to data visualization using the popular D3.js library

Meet Your Teacher

Teacher Profile Image

Guy Yachdav


Hello, I'm Guy. I believe that data is the key to understanding and solving problems that affect every single aspect of our lives. Therefore I have a keen interest in beautiful data visualisation and meaningful presentation. I am involved in many JavaScript development projects with a focus on visualising genomics data. I have a multidisciplinary academic background in the life sciences (PhD, Technical University of Munich, Germany), business (Executive MBA, Columbia Business School) and technology (BSc Computer Science, Columbia).

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Course Introduction: Hey there! And welcome to developing a Web app with a part of node first. JavaScript has been consistently the most popular language on Get Hub, the world's most popular code repository. Second, JavaScript has the fastest growing and by far the largest library repository called note package Management. We'll talk about that Warren module number four third JavaScript is everywhere. More vendors are adopting JavaScript, and you can now run the same JavaScript code across many devices and platforms. Maybe these are the reasons why Javascript has become the number one technology choice of so called unicorns, unicorns, or start ups valued at more than $1 billion. And because JavaScript is such a hot language, JavaScript developers are in hot demand. It is now easier than ever to find work as a JavaScript developer, and the salaries offered are competitive. Before we begin, let's take a look at the history of JavaScript. Jealous Group was first developed in 10 days back in 1995 by Brenda Knife, who was at the Netscape Corporation. It was first called Boca but was quickly renamed to Javascript for marketing purposes, even though it has nothing to do with the language called Java the first official standard for JavaScript ECMO script one appeared in 1997. Then, between 1997 to 2000 and five, competing standards for JavaScript appeared, and this has resulted in several different versions of JavaScript that were not fully supported by major browsers. In 2000 and five, a new set of technologies called Ajax were developed. Agents allow JavaScript to low data in the background. We don't need to do a full page reload and enabled more dynamic JavaScript based applications to be developed. This resulted in a JavaScript renaissance led by open source communities, which started releasing many libraries. The new libraries enabled the development of a new generation of JavaScript applications and overall accelerated the functionality, acceptance and popularity off the language. Yet in 2007 the standardization battles will were still raging. Microsoft promoted their own Acma script 3.1, while Mozilla and others worked on creating Acma script for finally, in 2000 and nine, all parties came together and decided to move from Acma Script 3.12 a unified standard called ES five harmony. All of these then brings us to today with JavaScript entering a completely new phase. No Js platform allows JavaScript to be run on the service side, and angular Js provides an easy way to create powerful JavaScript based Web application. D three allows data to be easily visualized and made interactive. There are many more applications and now is an exciting time to learn JavaScript. Let's see what is ahead of us and what we will cover over the next few modules. First, you will get a crash course in Javascript. It is important to remember that we adapted the good lectures, encode examples to be compatible with Atmos script six. The latest JavaScript standard. Then we will cover the basics of writing JavaScript code on the server using no Js Express and longer to be. Finally, in the last part of the course, you learned how to bring data to life using a stack of data visualisation techniques. All parts of the course are accompanied with hands on exercises that will help you put your new skills to practice 2. Language Basics - Introduction: welcome to the Language Basics module. Together with HD male and cascading style sheets, JavaScript is one of the core technologies for building websites. However, JavaScript is not only for building Web site, it can also be used for game development and application development. While JavaScript may resemble general purpose programming languages such as C, for instance, it is still have very distinct features. For instance, it is an interpreted language that does not require a data typing and that its code is being evaluated during program execution. In this module, we will make our first steps and learn the basics of the language that Deanna will first show how to edit and run your code. She will then survey some of the most essential parts of the JavaScript language to Dion is an experienced data scientist and a JavaScript developer. She uses JavaScript in our work researching bacterias role and disease. 3. Language Basics - Lexical Structure: welcome to the first lecture off the lexical structure model. Getting started with JavaScript is easy. All you need is a Web console, which is included in any modern browser off your choice. It is always a good idea to work with the latest version of a Web browser. The full injured, the strength of JavaScript have a console shows information about the current Lord Page. It also provides you with a common line that allows you to execute JavaScript directly in the current page. There are two ways for opening the console. You can either press the combination off three keys control shift, and I, or you can open it through the menu off your browser and fire folks. You click on Menu Aslef Developer Menu and then the Web console in chrome. You're also first click on menu, then select tools for refined developer tools, which will open the Web console for you. The Web console appears at the bottom off the browser window and the common line friend in the blue box on the figure. We'll be ready for you to enter the JavaScript code. You can try out the console by tapping the introduction console. Look look Hello world, and you will see Hello world appearing in the console below your command. This instructions are also called statements in JavaScript, similar to C C plus plus and Java JavaScript statements and with a semicolon. In principle, you can omit the semicolon. At the end of your statement, JavaScript will add it for you. However, it is considered to be a bad practice to do so. Semi colons allow your goat to be more readable, and they also make sure that your gold is free from side effects. JavaScript is a gay's sensitive language. This means that language keywords, variable and financial names must always be typed with a consistent capitalization of letters. For example, a different capitalization off the name. My bar will be understood by a program such that if you're using three different names, all JavaScript programs are reading. Using the Unicode character set. The standard, Unicode said, supports veritably every written language currently used on the planet, making JavaScript independent off the operating platform and the language used. JavaScript ignores white spaces. Tabs and new lines that appear in your code accepted a part of a streak or regular expression. Because of this feature. You can format your programs in the need and consistent way, and in general it is a very good idea to four months programs because four months in Mexico programs easy to read and understand. JavaScript supports as some other programming languages to styles off comments, namely any text reading between two slash characters and the end of the line is treated as a single line comment and is ignored for JavaScript. Also, text reading between Slash star and star slash characters is also treated as a comment. You can span this comments over multiple lines. You can't, however, nest comments as it will result in the syntax error shown in your console. Variables are symbolic names for values in your coat. The names off variables are cold identifiers, and they conform to certain rules, for example, and identifier can start and contained on the letters numbers on the scores or dollar signs . An identifier cannot start with the number, identify IRS, are always case insensitive and finally identify. IRS cannot match any off JavaScript reserved words and what they are we will see on the next slide. JavaScript reserves a number off identifiers as keywords off the language itself. The words listed on this light cannot be used as identifies in your progress because they're part off the JavaScript Syntex and have a special meaning for JavaScript. This include Break case, catch, class and others. There is a number of other keywords not listed on this light that I reserved for future versions of JavaScript and therefore should also not be used. Please refer to other sources for the complete list off this Q Wirtz before a variable can be used in JavaScript, it needs to be declared. Note that while declaring a variable is not a requirement, it is considered to be a best practice to do so. And this Halle encouraged declaring a variable can be done in three ways. First, by using the key word of our the key word, VAR tells the programme that variable can be used both globally throughout the whole program. If it is declared outside of a function or locally, meaning that the variable can be used within the function, it is declared note. In our example, the variable X has no value specified. Second, we can't declare a variable by assigning it a Valium doing so we always declare a global variable that is a variable available throughout the whole program. Finally, we can declare a variable using the keyword Let, which tells the programme that the variable is only available within the bloc, scope off its declaration and the identifier with an associated cost of value that is a value that cannot be changed anymore. It's called The Constant Constants are declared with a constant you word and have to be initial initialized upon declaration, trying to re declare the constant with a different type or trying to assign and you validated with result in a tad era printed in your console To bring out the declaration of a variable, it is sufficient to just enter its identifier name in the console. If the variable is undeclared, the console will return the reference at our error message if the variable is declared, but for some reason not initialized, meaning it has no value assigned than the console will return to. The valley is undefined, and if a variable is declared and initialized, for example, the variable see is initialized with the value of three, then accessing the variable will result in no ever message printed to the console so far. We talked about variable names, the identify IRS and variable declarations using the key words far let and constant. Ideally, each variable is assigned with the value I fixed. The value that is literally provided toe variable is called a literal. There are several types off literally, including integer, floating point string bully and regular expression array and object drills. 4. Language Basics - Data Types: Welcome to data types, the second lecture off the JavaScript language basics model. In the previous lecture, we talked about JavaScript, language, syntax, and to find the term variable, we learned that a variable in JavaScript needs to be declared and ideally initialized with the value. In the current lecture, we've been learned different types of values. That the variable can be initialized with JavaScript is an untapped language. This means that unlike in other languages such as Java and C in JavaScript, we do not declare the data type off variables explicitly. JavaScript automatically converts one data type to another when it's needed. For example, it can upend numbers and strings by automatically converting numbers. Two strings data types in JavaScript can be divided into groups, primitive types and referenced times string, number of boy and undefined and now are primitive data types. Objects and the race are referenced data times, while primitive data types have a fixed size and memory. For example, a single number occupies eight byte memory referenced data types do not have a fixed size, for example, a race can contain any number of evidence and therefore, and the rate cannot distort in eight bites off memory. Instead, it can hold a reference to the values, and that's why it is called referenced type. Let's have a closer look at the primitive data types. Numbers are a basic data type. All numbers and JavaScript are represented as one type floating point values. JavaScript numbers can be positive and negative and can also be represented using the scientific exponential notation. Numbers without decimals or exponent notation are integers in. The jurors can be as large as two to the power 53 their small is minus two to the power off 53. Using integers outside, the strange made it to a lower precision in the representation off your number. JavaScript provides standard Earth my dick operators for numbers such as addition, subtraction, multiplication division and modular. JavaScript also provides special numeric values such as infinity, and not a number if a value becomes smaller than the smallest possible number that can be represented in JavaScript, then minus infinity is printed for this Valium. The same rule applies the large values that are larger than the largest possible number that can be represented in JavaScript. For this JavaScript Prince Infinity, given the outcome of for mathematical operation is an undefined resolved or an error than JavaScript brings, not the number value, also known as an M. One of the drawbacks, or JavaScript numbers is that floating aromatics may not always bear Keret toe overcome this problem, multiplication and division can provide help. In addition to standard arithmetic operations, there is also a large number of mathematical functions that can be used in JavaScript. All this functions are stored its properties off a single math object, so you always need to use the object name man to access them, for example, to compute two to the power of them. You can use the power function off meth. We can use string literal to represent any text in German script. The text can be enclosed in matching pairs off single or double quotation marks. It is possible to insert a special character in the string by using the Escape Backslash character. Finally, the length of US drink girls, both the number off characters in it. Like many other programming languages, the first character in the string has positioned index zero. In contrast, the number and string that the types the bullion type has only two values true and falls and voil value represents if something is true or not. In an American presentation, true evaluates to bottle and false values to zero. Typically, bull invalids are used for comparison in JavaScript programs, for example, to check whether to values are equal or not, if their values and data types are equal or not, or if one value is larger or smaller than the other. Valium. Another important data type is called undefined. Undefined is returned. When the variable was declared but never initialized. That means it never got value assigned to it. It is also possible to manually asan Undefined Variable is a Valium. The last primitive data type is called No now means nothing and is used to indicate an absence of a Valium. It is considered good practice to use now in your code instead of undefined. The variable food or example is assigned the value. Now it means that food has neither type nor Valium. So why to use this data type at all? Well, it can become very hands. Actually, when used in blue in context, now, converts to false and been used in an American text now converts to zero note that now does not equal undefined. If the values off both tax air compared, then choose returned. However, if both values and types are compared, then forces returned. An object is a reference data type that consists off a collection off named values. This time, values are also called properties. They describe the object. A property is a mapping between keys and values. Keys are always represented. The strings and values can give any data type. For example, the object king holds properties named first name, last name and H keys off. The properties can be listed using the object of keys function. A value off a property can be returned by calling the variable name of the object and the key name off the property. Additionally, the value of any property can be changed by assigning it a new Valium. And the ray is another referenced data type, which also stores a collection of values. While each value in an object has a name, that's the key name. As we saw in the previous light, the values in an array are indexed by number. The first value in an array has index zero, the second valve it has index month and so on, similar to objects on race, are dynamic and on typed, meaning that they can change. Their size is needed and conserve values off different data types, including other arrays and objects, and the rate can be created a stone of the example after declaration and initiation. Any value in an array can be changed and new values can be added. The length of Honore can be printed using the property called length. 5. Language Basics - Scoping and Hoisting: welcome to 1/3 lecture off the language basics model. In this lecture, we've learned the fundamental aspects off the JavaScript language, namely scoping and hoisting. But before we do that, we first need to introduce JavaScript functions. The function is a book of coat that before was a particular task. In the example, we defined a function called some function, with two parameters for Vandenberg to the budget of the function calculates the sum of providing for two and returns. The result. Once a function is defined, it can be invoked but name, followed by the comma separated list of arguments within paradises, for example, the variable X invokes function. Some function with arguments train for once X is executed. Its result which equal seven, is returned to the console. We will get back to functions in a few moments. Now let us take a look at the concept off. Scoping scope defines the context in which variables and also functions can be accessed. The lifetime off a variable starts when it is declared variable declared outside. The function has a global scope. Global variables can be accessed modified. Throw the program. In contrast, invariable declared within the function has a local scope. Local variables can only be accessed and modified within that function. Global variables are declared with a keyword farm. If a variable is initialized without being declared, it is automatically considered to be global. Global variables are available to any code in a JavaScript program. For example, the variable X declared outside the function Bryn Mawr, in the example, has a global scope and can therefore be excess and modified from anywhere in the coat calling. The function bring you are in the console will result in the value, want to be printed. Local variables are declared with the keywords let or bar. In contrast, global variables that are accessible and modifiable from anywhere in the coat. Local variables are only available within the function there, declared Let's have a look at the code. Example. Printing X at the bottom of the coat will return one because X has a global scope. However, printing Why at the bottom of the code will return a wise and defined error, because why has a local scope hoisting means moving variable declaration to the top of the script or a function. This means that the declaration of variable is used before. The variable is actually declared on the variables, declared the keyword bar can be hoisted. Hoisted variables return undefined. It is important to mention that on the variable declarations, air hoisted, not variable initialization or assignments. In our example, the variable X gesticulated with a bar and can be hosted two before Dickens a lock statement, while the variable why is declared with a let and thus cannot be hoisted function declaration is also hosted. This way we can invoke a function before it is declared high stink lift the declaration of a function to the top of the block. In the first example, the declaration off the function at one is lifted to the top, which allows us invoking this function without error message being shown. It is very port to mention that only function declaration is hoisted and no to the function expression. The faction expression basically corresponds to function being assigned to if you're able and therefore, the rules for variable hosting apply namely that the variable declaration is moved to the top, but not the variable initial organization 6. Language Basics - Loops: Welcome Toe Forest lecture off the language basics model. In this lecture, we will learn about the concept Off lips loops are used to execute the same block of code repeatedly until a certain conditions met. For example, one way of printing all integers from 0 to 9 can be to use 10 statements off console lock. A shorter way is to use a for loop with variable that changes with each iteration of the loop. There are several options off how a block of code can repeatedly run in JavaScript. The four loop is probably the most frequently used look in any programming language. It consists off three statements separated by semi column. The first statement initialize is one or several values, and this executed exactly ones in the example below. Statement one is the initiation off the counter I. The second statement is the loop determination condition, which is I less than five in the example. Once of this excitement about its to force, the look terminates. Finally, the third statement is the update er I lost. Plus, in the example, this statement is invoked after each loop it oration. Typically, it increments or dick prevents the counter All three statements are usually reading in one line, and each of them is optional. A for in loop is especially useful when working with objects. It iterating over the properties of an object and returns the name off each of the properties. In the example. At each iteration of the loop, the variable, I is said to the name off each property off the object kink at each iteration. The value of I is printed to the console. As result, we have the strings first name, last name and age printed. While the foreign loop is great for iterating over object properties, the fur off loop should be the choice when Iterating over array values. As a matter of fact, using for off for other reference types fails through the type error. If using the foreign look for in a ray than the Indians is instead of values are printed as shown in the second example, the four look is repeated a specific number of times. The wild open contrast is repeated an unknown number of times as longer. The condition is met a while. Loop works by first evaluating its condition. If it is true, the cold block within the wild Hope is executed until the condition evaluates to false waas . The conditions falls the while up terminates note. It is very easy to create an infinite loop If the condition never evaluates to false and the example we bring the numbers from 0 to 4 by initializing the counter I and implementing it by one in Egypt orations them. We check if I smaller and five. If this is the case, then the program prints the updated value off I the while loop first ever lets the condition and then executes the coat. If the condition is true, the do why look does it in the opposite way. It first executes the coat and then ever with the condition because the condition is a really that only after decode is executed, the coat is executed at least once, even if the conditions false. 7. Language Basics - Conditional Statements: Welcome to the fifth and the last lecture off the language basics model. In this model, we will learn about conditional statements. An example for a conditional statement could be the following. If you know javascript, you can implement. However, conditional statements are used to perform different actions based on different conditions . There are four ways to construct a conditional statement in JavaScript. First, if a specified condition is true, the code bloke following an if statement is executed. Second, if a specified conditions falls, a bloke following an else statement is executed. Third, if a specified conditions false a condition following their else if statement is evaluated . Finally, a switch statement compares the values off the switch expression for the values of the switch cases and executes code block. Associate it with a match. Your statement includes the condition to be evaluated and the love of goat to be executed in case the condition restroom. In the example, the cold block is executed in case the variable X holds about you larger than zero. If else statement includes a condition to be evaluated and the block of go to be executed in case the condition is true, it also includes a book of code to be executed in case the conditions false. In the example, the program evaluates if the variable X is larger than zero. If true, the variable text is said, Teoh Acts is a positive number device taxed, a sad chief max zero or a negative number and if else, if statement evaluates a new if condition. If the first condition is evaluate to false if a subsequent if condition is evaluated to truth than the block of coat that follows this else, if statement is executed in the example, the program evaluates if the variable X is larger than zero. If true, the variable text is said to you. X is a positive number. If the value of X is smaller than zero, the program sets the variable text to X is a negative number If both if conditions are false, the program says the variable text to X is a zero. A switch statement compares the values on the switch expression with the values off the switch cases and the executes a code block associate with the match as which expression is specified. At the top of the switch statement, which cases are evaluated from top to bottom. Once a match is found, the block of goat following the match is executed. If there is a break statement within this bloke coat, then the whole switch statement is terminated in the program moves on now. Attention. In case there is no break statement, execution goes through all consequent code blocks until a break statement or until the very end of the switch statement. Finally, the default key work can be used within a switch block to specify a block of coat that executes if no matches are found. 8. Language Basics - Summary: thank you to Tanno for this comprehensive lecture about the language basics. As we mentioned at the introduction to this module, JavaScript may resemble general purpose programming languages, but it is also very different. As we've seen, JavaScript is untie popped, which means that you can assign any data, type two variables and convert them during runtime. His tatyana also pointed out JavaScript has a distinct feature called Hoisting, which pulls variable declarations to the top of the function. What to the top of your program? Remember, the JavaScript is a very forgiving language that will allow you to do many things without complaining. This gives the programmer a lot of power but can also lead to many mistakes. The's find references provide great guidance on how to properly and effectively right JavaScript code. 9. Server-side JavaScript - Introduction: welcome to the service side JavaScript module. JavaScript was developed as a scripting language that can only be run into Web browser. Yet modern Web applications are not composed of one single component. In the past, all of these parts could not be written using a single language. For example, we could use Ph. B on the backhand and flash on the front end. Today, we can use JavaScript to develop the back end part of the up using no Js framework while still using JavaScript to generated enemy content off the front end. Since the first version of note appeared, many developers have found it useful and, if chose to build the back end of their applications using JavaScript. Chris is a master student in infra Matics with a solid background in software engineering. He has over three years experience developing full stack applications in JavaScript. He's also a mentor into Google Summer of Court program and a tutor off the intro to JavaScript course. Given it a T U of Munich. By his own admission, Chris really likes to turn pizza into code, and this module Chris will take you through the first steps of building it back in JavaScript application. Grace will review some of the technologies we use to handle data control requests and present the results on the Web. You will also get a chance to experiment with no Js using code examples we provide. 10. Server-side JavaScript - Anatomy of HTTP Transactions: Welcome to this lecture about anatomy off. Http. Transactions in this lecture, we're going to see how requests are made and what your I'll stand for. Let's look at the first example. What we see here is the browser that is trying to access a location on the Web, which is example, dat along without us, its rise to access the root and asks the server, Do you have something to deliver to me? The server will answer to the browser. Yes, I have something for you and it's an HTML file, which is called index dot html. Later, when the browser executes the index dot html, it will most likely require some further components, which are specified in the HTML five. These components are usually script and images. In this specific case, we see that the browser is asking the Web server again for a script which is called script of Javascript and an image which is called imaged a PNG. If everything went according to plan to server with an answer to the browser, yes, I have this files and there you are in the HTML the locations where we find this requests are attacks like these. This is an E m g or image tech, which stands for a location in which we want to load an image. What we see later in the H ref is Ah, you're well off where the image is to be taken from. In this case, the image is located. That example not the light without yes slash image that PNG most likely in modern my pages You see each references like these What? These are our relative pets. So what we're saying here is if we're executing our HTML file, which is located in the route, we want to access the image in the same location, which is again the route. So we want to access the image at example, not along without us slash imaged of PNG. This is different if the HTML was, for example, noted from a sub folder off a Web server which could be, for example, the public sub folder. So if we're executing an HTML file which is located, in example of the lack of that u s slash public and we have a name DMG Tech, like this one which is trying to access image to PNG. What we're actually asking for is the image at example dot ilaga that u s slash public slash image dot PNG They're different types off requests that you can perform on the Web, the ones that we have seen up until now our get requests there, what your browser usually always performs. There are also other types of requests, which are, for example, post requests there used to create an update. Resource is, and I usually found in Web forms on your webpages for type off requests are put requests. This are conceptually similar to Post Request, but they're mainly used for updating. You can also use them to create. Resource is, but you have to specify a precise your where you want to put this resource in. So if we're trying to, for example, upload an image of a cat, which is called cata PNG, what we would say is we want to put our image at the location example that allowed without us slash cat PNG, the last type of requests that we're going to talk about our delete requests. These requests are used to the league Resource is, as the name says name says, so that we don't have them anymore on our Web server. There are other types off requests, but we're not going to discuss about them because they're not relevant to the slide set. The next thing that we're going to talk about are your else. There are different things you want to look at when you see a your So the first part is the protocol. It's https in this case, but usually you see, also, http, they're actually two different kinds of protocols. Http s stands for secure http it ensures that when you're accessing a resource, the resource comes exactly from the server that you are requesting it from, so that you are not putting a situation off having someone between you and the Web server which can read information that is flowing between you or your browser and the Web server. The second part is the house name. This is a friendly name for a server on the Web, which is usually addressed with a set of numbers which are going to see in the next light. The first part that we see here is the location or path. These are usually sub folders on your Web server, and and it's just as if you were opening sub folders on your computer. The last part is the resource that you're going to ask and in this specific case is a PNG image, and it's called Protein that PNG. So here is a different representation off the euro that we have before we see the first part. The protocol and the host name the house name maps to this address on the top, which is 10 1 29 31 45 This is actually the way justice are fought off on the Web, but you can view them similarly as the address off where you are standing right now, your home or work address. It's just the in computer science. We like numbers, so we put them everywhere. Their second part that we see are sub folders. In the specific case we have. We're accessing assets, and then we're accessing images. The last part is a resource that we worked to access, which is the image off this protein, which is called protein a PNG. So what we have seen up until now is JavaScript, as used for front end. It's used to extend normal HD America toe, allow us toe, perform some nice and better functionalities without which our with our court JavaScript in these cases is executed within the browser or in the browsers consult what we are interested in. Looking at next is actually JavaScript for back and development. What this means is that we want to see how JavaScript can be used to answer requests which come from the Web, which is what we have seen up until now. JavaScript is also able to be interpreted as an ordinary computer language, as you would, for example, with python or C or Java. And this is also being enabled by the same framework, which is called Moshe. Yes, which we will look at into data videos that is used to create Web back ends, or AP eyes, which are also going to discuss in the next videos. 11. Server-side JavaScript - Node.js and NPM: welcome to this session about no Js and NPM. Let's start right away with Moshe. Yes, what is it? No GS allows it to interpret JavaScript in your computer. It's similar at the way JavaScript is interpreted in your browser, but it allows you to access things which are usually not accessible from within your browser. So, for example, it allows it to access fires. You can read and write files on your system, and it allows you to access different layers off your system. For example, the network layer, which is used by Notre. Yes, if you build a Web application, it provides you with the tools to use the same language and concepts that you have already used to build JavaScript for the front end, which means the language is still event based. It's still a synchronous. It uses callbacks and things like these. When you run node, it actually runs on a single friend, which has 1.8 gigabytes of RAM allocated to it. As I said, it provides it with different libraries that, for example, we let you read and write files on your system. We know you can build many things. The most important ones. I've three. You can build common line scripts. You can be a P eyes or Web applications with back in front end common land scripts are what you would usually usually right with Bash. See Job bison. You can write scripts that allow you to advise on your system and then produce some output , always in the system. On a P I is a Web service that allows it toe send and receive messages on the Web. It is what most of your applications use, especially if they cross platform. So, for example, if you have an application that is running on your smartphone, your computer, your tablet, usually the programming language off the application itself is very different. But they all communicate with a server, and this communication haven't happens over a B. I calls AP I cause, as I said before, is just a means off standing and receiving data and with no yes, you're able to write very quickly and very nice baby eyes. The last thing that you can build with note is a Web application, a complete Web application that means our application that has both back end as well as front, and it's as if you were to build an FBI, but you were to extend it with some views. Views specifically are things that you see. So when you connect toe, for example, in a mattress on example doctor like a lot us, you see a webpage, and that's exactly what the front end is. It provides you with the tools to build issues, to reuse them and to use the coat from the server toe, for example, give meaningful objects meaningful later to the view itself. So how is no different from things that we have already seen in the past? The traditional approach off, for example, Ph. B. And Apache is that whenever our request is coming into the server, Apache starts a new a new friend, a new process on your machine toe. Answer exactly this request. So the request is the coat off for the represses executed linearly. As we see above one request one functional for the other and once it terminates it on suspect to the requester, with some data notes approaches, that is, to run the entire note engine on one single Fred. If requests come to this one single friends, the note engine puts them in an event que this event, you basically executes the function, and once the function is terminated, it runs a callback function. We have already seen these in previous lectures. When the request comes in as a set, it gets put in the bank. You The first function gets executed. Then the second cut function gets executed, which is the call back, and then the first and so on until the response is provided to the requester. Once this responses provided they call back, will terminate, and the request will have been answered. When you start note, you actually installed also NPM, which is its companion. NPM stands for not package manager. It is, ah, set of tools, libraries or packages that allow you toe expand your application or to download, for example. So my script, as I said it provides the packages for both front and as well as back end, and it provides you a library off script. You can imagine no to be your smartphone, where when you buy it, you have a phone app on the messaging app and then PM to be wrap store where you can download every kind of application. MPM though is not like an application on itself. You can download applications, which are scripts, in this case, but you can download specifically extensions, which are the things that you use when you build applications. Using note as every app store, you have to be very careful. There are some good APS and there's some bad abs. You can almost easily find what is a good application and what is a bad application by looking at the documentation off this up. Same thing is for AM PM. Let's look at the growth of MPM over the years. You can definitely see by the red line that it's above everything else. Specifically here we have a baggage manager for Rubio. Raise a package measure for PHP, a package manager for Go, which is Google Initiative, and a package measure for C Plan, which is pearl. There is nothing growing as an PM, so you're on the safe side if you start quoting now with note. As I said earlier, you can use note as a scripting language to create scripts on your computer that execute like they wear, for example, by Finn or C programs. In this case, we took example off parts Js, which is actually up to that. I have freed myself a couple months back. What parts just allows you to do is to translate comma separated values into Jason objects , specifically an array of Jason objects, because you have more than just one comma separated value file. So what this tool allows it to do is to say I have a file with comma separated values. Please translate it into adjacent file with an array off all the exact exactly same objects . But in Jason for months, what is actually Jason Jason stands for JavaScript object notation. It's a way to represent objects in JavaScript. It's actually not just using JavaScript. It's a very common used for data exchange on the Web. So I was almost saying before many, many AP eyes provides you with messages and these messages are included in JavaScript rotation. You can also store different types, different former types in Jason objects. As we've seen this example, we have we can store every primitive JavaScript type and also compound types, which is example the objects inside the object. An example of this is the reference reference has an object as its value, and this object has then another two sets of keys, which are name and phone and two values which are Christian and my phone number. I don't example these locations where you have an array off different strengths, availability and price instead are jobless people data types which you have already seen like, for example, afloat and a 1,000,000,000. The finding dependencies is a very important part off building your application using note when you start building an application, usually start with ah Fi called Packaged Up Jason, Off which we see an example right here. This package just that Jason has a set off key and values which are necessary for it to exist. For example, the name diversion, the description off the application, the author and the license. There's another set off attributes which are the dependencies, and these are very important. This is where NPM comes in the game here, he defined the dependencies that your application has from NPM. So, for example, if you're building an application which has back end and which needs affront and as well these three dependencies which we define here, which are expressed back, and mangoes, other ones that you, for example, would like to go with what this tells is that once you start running moat, if you don't have to, dependencies, download it in the same fuller your application. One. Run So you really need these dependencies. You can also install NPM packages, which are thought as standalone scripts. So as example that I said before in the specific plays, we can install the parts to yes as, ah global script on your computer so that you can execute it from every location within your computer. What we have seen in this video in the session are what note is no yes, and what NPM is, how we can use them toe create ap ICE how we can use them to create scripts In the next sessions. We're going to discuss more specifically how to bring your first FBI and how toe create a full stack application with, which means both the FBI and also the front and part with views 12. Server-side JavaScript - What is Needed for a Web Application: Welcome back to our videos about service side JavaScript. In this one, we're going to talk about what is needed for a Web application. So let's start right off with the most important part off. Ah, Web application, which is a request handler. Request Handler is something that it takes on requests and answers them and gives it the power to answer them. It wants to them in a meaningful way. We have seen what requests are in previous videos, so I invite you to look back at previous videos. If you don't know what we're talking about. The first request hander that we I would like to talk to you about is expressed. Yes, it's de facto standard for no Js. You would hardly ever find anything else. But there are alternatives, and we just listened another to off them. The first alternative isco R, which is a simplified version of Express to Yes, it stems from the same developers as expressed yes, but it's a much lighter version. Another request hander is testifying. Rest if I ISS focuses on Lee on constructing a P I. So you would not have views, which we're gonna explain in a moment rest if I also heavily based on expressed yes. So, as you see expressed yes, always comes in. The next thing you would probably need when you construct Web application is a database off the data that you usually see on websites eyes stored in a database and they're too big categories off the races. The first category is called Relational Databases, and we see a list of three databases off this type in the first line. Ask your light, prosperous SQL and my scale are all relational databases, and they can be used and are actually used with Notre. Yes, but with no yes, it's much more common to use non relational database system and specifically mongo DB. What would they be allows it to store Jason objects as we have seen them in previous lectures into a database, which is Mongo. You can then retrieved this objects or retrieves only certain fields off. This object radius is another alternative. Ready is a key value store, which is now again different from mongo DB because you can only store a key, you have a key access this key, and you can only start value by this key. So for example, if the keys age in my case, it would be 23. So keep by the stores are maybe fought for smaller applications, but nonetheless, you always need a database. More want to be as well as radios are non relational databases. And if you want to know more about this, I invite you to look at the weapon. There's plenty of gods. The last component that you might need to build Aware application is called a view engine, I say might, because it's actually not necessary. View engines are only necessary if you build a few full application with front and back end . But if you only want to build an A P I u Want need of your engine. Here is a list off a couple of view engines, which you think you might find interesting starting with angular. Yes, angular is important because it's part off something called the Mean Stack, which stands for Mongo Express. Angular and note, as we have seen Mongo, would be the database part of our application. While Express would handle every request incoming and outgoing angler, wouldn't this be a case being the view engine, While note is the base of our application. Another popular framework is react. It was developed by Facebook, and it's widely used. Buck is another framework, and it's maybe one of the best. If you're starting with no Js, this is because it's very similar in syntax toe plain html. So if you're used to writing HTML, if eyes park might be the choice for you. It was previously called Jade, but due to some copyright issues, developers have to rename it into bug, and it's actually fun name. So why not? Amber is a lot of choice among small communities off developers. It's very nice, in my opinion. So that's why we chose toe also put it into this list. What we have seen in the previous lights and in this one are the components that you would need to build your Web application. You don't need all off them as we have already discussed. You might not need view engines if you for example, 12 billion a p I. I think the basis also not always needed if you want to build something simple or just access files on the five system. Nonetheless, we wanted to give a complete overview off what you might need to be the replication and actually this three components we're going to use in an example. The example is coming in the next videos and the next lectures, and there's actually two off them. The 1st 1 is only an FBI example, so it won't have use. In the second example, which we call a complete. We will also provide some views which are done using the park template ing engine. 13. Server-side JavaScript - Our Example Application: Welcome back to our lectures on server side JavaScript. In this video, we're going to talk about our example application. What we use, for example, application Are this four components. If you have not seen the previous video, you might want to look at it because we're way are explaining what the components are specifically for. Application. We used express GS toe, be able to interpret their become incoming requests and produce a meaningful answers we use back for the views. But actually, we have prepared to example one with back and one without park. In the first example, we won't use park because it's simply an FBI. So it only uses the other three components, which are expressed moment to be a note. We used that moment to be to store our information and to be able to retrieve it in a later stage. We used note as the base off our application as it allows us toe interpret our JavaScript and present everything that we have discussed so far. So let's actually look at our examples. They are too, as already set. The first example is on the NDP, I example, so it does not have use you can download it, download it following the first link, which is example that lag without us slash public slash ap. I don't sip the complete example. On the other hand, you can find on the second thing, which is the same as the first. Just that last part is completed. Zip the running example off The complete application is available at example dot the lagoon at us at the first glance, you might immediately see that example is very easy, born in terms off cold complexity as well as in terms off. Example off the view itself. So what you see on your browser? When we developed our example, we saw very common pattern, which is called the model View controller. Specter. What this pattern tells us to do is to divide our application in tow different parts first , the models which are representation off the data which we use in our application. So if, for example, we're going to develop an application that deals with the block, we were to have different models for the user, which is writing the block post the post itself, the comments on the block post and so on. The views on the other hand at the representation off the state objects, so there would be a view for the block. There would be a view for the post of of you for the comment that would be beautiful in your own user. The controllers is what bring these two things together, the combined data and they combine the views and calculations to produce or meaningful outputs specifically if, for example, we want to view a block post, we want to see in the same location both the information about the user, the information about some previous posts and the information about the comments. So here is the full of structure off a first example application, which is the A P. I. Example. We have the first folder do GST APP folder, where we have our controllers are models and our views. These are also folders, but the view father is empty because we don't have any views in an A p I, On the other hand, in the controller and in the models refined to files which are about the relationships between game of Thrones, characters in one specific book off game of Thrones. Also we see on the root of our example application. Some other files which allow us, for example, to connect to the database, which in this case is the database. Talk to yes, file the router dot Js, which takes care off, knowing which requests are incoming and how to answer them the back. It's Jason, which we have already discussed in a previous video, and I urge you to look at this video if you're not, don't know what we're talking about. And the index to yes, which is the starting point of our application. Them for the structure for the computer example is a little bit larger here. You can actually see that there's more fires, but most of the this files are either executed in the browser or just their toe. Give views, which are there things that you actually see in the application. As you see in this folder structure, we have four views which are debase the home, the navigation and the visualization Park Air Views has already said in previous videos are modular components. So, for example, the navigation that park is going to be used in the base as well as in the home. In the visualization that park the public folder which is a new father, which you find in a full A structure is going to be exported two people connecting to application as is, which means all of the fights that are in this father are going to be accessed by people connecting to our application. That specifically means that if you are, for example, connecting toe example that the Lago that u s slash public slash lips slash t three. Doctor. Yes, You will actually access the content off this file on our server. You can also put it on your own computer. And if you just put some fights into this public fuller, they will be exported to your application and you can view them in this father. We only have JavaScript, which is executed in the front end. So this is a very important distinction. This is not going to be executed on your machine, but only in the browser off the machines connecting to your application. Here, we also find the style sheets or cascading style sheets which are in orange in our representation. Now, another important part is how do you do You get these applications to run on your computer where first of all you need to download the ZIP files, which we presented in a previous light, and you have to accept them on your computer later. You have to make sure that you have installed no Js and NPM. When you start nauseous, you automatically installed NPM as well. So don't worry. It's not two separate things. You can stand node.js by following the link on this light, which is no Js but or you don't have to use a common line to navigate to the folder where the applications are, and you will know when you are in this folder. If you have. If you can open the index dot Js file, which is the entry point of our application to run the application, we actually need our dependencies, which are described in the package. Jason. As already discussed in previous videos, toe install this dependencies. You would need to run NPM install, which will create a new folder in the root of your application or in the routes off the application, and it will. This is four that we contain all of this system elements that note needs to run your application or our application to actually run the application. Then you will need to run note index node.js, which will output some some lines to your consultant saying that it was successfully in connecting to the database and that now you can navigate toe your your application to later viewed application, which is being serviced from your own computer. You will have to collect to connect to the link, which is on the last line off the slide. What local host means is that you're connecting to your own computer. 3000. This support on which your application is running and slash slash ap i slash relationships is the a P I end point in which we will expose data about our relationships between the different characters on the game of Thrones. So we're pretty sure that FBI and relationships their endpoint a p i slash relationships. We've worked on both the complete applications and the example of the application. So this is just to give you an overview about our example. But we will discuss further in detail about the code in the upcoming video 14. Server-side JavaScript - Web Application Components: Controllers and Models: welcome back to our videos about server side JavaScript development. In this video, we're going to talk about controls and models which are two off the components off our example applications. Firstly, I want to talk to you about Express. We have already seen what request tenders are. So if you're not familiar with them, let's go back to the previous videos. Express, in short, allows it to react to incoming requests and send responses. It's possible to extend express by putting some layers between the incoming requests and the final function, which is going to execute bigger executed to produce a response. This layers can, for example, distinguish between a user which has identification and the user that has not so that the final response is different for someone that is identified and different for someone who's not express can also be extended using other packages. But for our simple applications, we didn't need to use them, so we're not going to discuss about these. If you'd like to know more about these, please go on the web. There's plenty of guides toe. Find out more about this. In our FBI example, you will find express in the feisty that highlighted on the left side, you will find also express in the same files on the complete example. But for the reference off these two components and what we're going to discuss in this video we used the FBI, you will find express starting in the next. Yes, and that's the first by we're going to look at so in the next two. Yes, we define express. We actually have to require it. So the first thing that we do is we require express and we define it as a constant variable because it won't change during the execution of our court. The second thing that we do is we define our application, which is up, and it's an express application. So we define it as an express up With express. We can set values, and specifically in the first line of code, which will be combined. We will see that you can define the port number on which our application is going to be listening and the sport number is by the fourth going to be 3000 later. We see that we can define a router, which is the logic that stands behind knowing which requests are coming in and what output or response to produce in the last lines of court. What we see is that we actually listen toe incoming requests and we do so by listening on the port that we defined earlier. We also have our function, which is a cold back, and dysfunction tells us that are expressed. Server is listening on the port we defined earlier. The other files that we want to look at for Express is a router dot gs and the controllers slash relationship that yes, in our APP folder in the router. We define that if I get requests is coming at slash ap i slash relationships The relationships controller has to perform a function which is relationships. Dysfunction is defined as below. So relationships is a function which accepts a request on incoming request and as as a second object, the response, the outgoing response. What we do is we find objects in the relationships model, which we're going to explain shortly. So don't worry. If they find find a successful we will return return the results off the find in the last meaningful line of court off this example, which is response that status 200 that send results. Notice the status 200 in. Http Protocol Status 200 means that they request Waas answered successfully that there was no problem and that we're answering back. Okay, we have to date. Um on the other hand, if there was an error, we are sending a status 500 which http means that there was a never and that we're sending back another object as well. The next thing that we will look at his mom would be We have already discussed about databases before, but specifically, we will use moment to be in our example has already said, Mamadou visa document or rented these of these management system and its non relational. Which brings us to the most important part off non relational database management systems, which is? They don't have a schemer. Ah, Schema allows you to say that whenever you have an object from a database, it will always have the same look and feel to so say specifically if we have a relational database system, we always know that we're going to find the same fields when we ask for the same data. So if, for example, I have an object which contains my name in my age, and I have a scheme of which defines that there's always the need off my name, my surname and my H all objects will always look like this. They cannot differ. On the other hand, in long with the B objects can differ. They can have more fields, for example, that could be name, age and location from where I come from. Or they can be less fields that could be only the name without a surname, because someone forgot to put it in Andy age more going to be actually stores objects in binary chase and format. It does so because finery Jason allows you to store not only the usual Jason Files, but it also allows it to store music and images. This is three example off adjacent five being stored into among the DB entry On the top, we see unordinary Jason fight and on the button we see what we would see if we insert. Is Jason fired into Mongo DB, as it seemed Mom would be will given a tribute to the object, which is underscore idea. This is very important because you will need an identifier in the object to know that desist e on the object off. It's kind. If, for example, we have two people which have exactly the same name surname and are off the same age, then we would not know which objects we actually want to get. But thanks to the I D, which is a randomly generated information, we always have just one field, which is for that specific object. The other fields which you see on the bottom are the same fields that we have already seen above, which are the name the surname and the age to actually use more. Would they be in a note application? You need something called a driver. The most common driver with no Js is called Mongoose. Mongoose allows you firstly, to connect to the database and handled connection events. The second important thing that it's that allow it allows it to define models. Models allowed you for some type of a schema, which is the thing that we have discussed before. So from uncles, you could define that your objects always have to have the same structure and that mongoose want except objects. If they're not off the structure that you have to find them in. Yes, I think that mangoes allowed it to do is to perform queries so you can find objects, create objects, update and remove items. Let's see some court examples. First, we will find mongoose in these fires. As you see, there's one fire, which is highlighted a little bit differently than the other ones. This is because we're not directly using mangoes, but we are using the mangoes model created in the relationships model in the controller, so to produce meaningful response when an incoming request is coming, let's look at the model for the relationships here. We define the model off our relationships. Firstly, we require mangoes, as we did expect, waded with express in our previous example. The second thing that we do is we define our relationships model. Here we have three feels which are compulsory, so they are always required. If you're trying to. If you will try to create new objects which doesn't have one of these fields, it won't work. Mongols will complain. The three fields that we're going to need in our objects are sourced, target and wait. The 1st 2 source and target are of type string, while weight is a number type object. The second location in which we find mangoes is our relationships controller. Here we we can find objects in our model as seen from their fourth line off court. So we have our relationships model and we perform a find without filtering for yourselves. Filtering for results would be something like if I'm only interested in those objects in which the source is equal to, for example, me. I would put this as a filtering before I perform to find you can look at how filtering is done in the examples on their mongoose website. Margo's allows us to do also other things. It allows us to create objects as already said before. So in this specific case we are creating a new objects which has a source me as target you and has wait six. If the objects were the object was successfully created, we will return on anonymous callback function which we look to created object as we see below here. The next thing that we can do in bongos is to find and remove objects. Be careful. We're only finding and removing one object. This is very important because you can easily remove many items for your from your database and maybe it's all what you want to do. So you have to be very careful when recording this parts of your application. So here what we're doing is we're finding one object which is the first object in which the sources me and we are removing it. If the removal is successful, we will look into consult, they removed object. Another thing that we can you do is update objects. Also here you have to pay attention because the updates function out of the box will only update the first filtered item that they will find in the data base. So in this case, the first time, we will find an object which has a source me, it will update it and put or set the target as Tillman. So if we only have one object which is the one that we created to slights back instead of having source me and target you, it would have sourced me and target toman The weight will always be the same. What we have seen now we're four basic operations which are needed in every database. They're called to crud stack the Stanfel create, read, update and delete. We have also seen which function you can use to perform these operations, which are on the model to create function on the model defined function on the model, the update function and on the model they remove function. I urge again to pay attention when implementing update and remove function, because you can easily to generate mistakes within your data. So we have seen two off the components off our example applications. And in the next video, we're going to discuss the missing component, which is the view. We decided to split these three components into the 1st 2 and the last component, which are the views, because sometimes you don't need The last component has already explained in previous videos. 15. Server-side JavaScript - Web Application Components: Views: welcome back to our videos on service side JavaScript. In this video, we're going to see the last component that you need toe build a complete application, which means an application which has also a view component, the view engine that he used this bug as ready mentioned in previous videos. Park was renamed offer after legal matter with the original name, which was called Jade but gives us a way to define reusable and extendable HD my components . What this means is that you have to view webpages as pieces, a set off pieces. So there is the navigation. There is different menus, the resection content off the page and, for example, the footer. You can use park to define all of these components and use them dynamically in the different views packages of simplified syntax. It's very close to the syntax that you would ordinarily see your normal HTML files, but it's simpler in the sense that you don't have the closing brackets and you don't have all of this. My major and minor signs in Pakistan also use control statements like each and if which allow you to, for example, handle variables that you passed the view through the controller. So, for example, for the controller you pass the title. You can specify a location that if the title is defined, you want to show the title at that location. Let's look at where we can find back In our complete example, we can find park in our carpet. Example. In the four highlighted fires, these are the base park, the home buck, the navigation park and the visualization bug. They are inside the views further, which again is inside the APP folder on the route off our application, we take a look now at the base home and navigation bug. They are simplified version off this files, but the actual fires are pretty similar and the concept are definitely the same. So let's go get them on the top. In green, you see debase buck on the bottom in orange, you see anti navigation park and on the bottom on the left, in blue, you see the home park. This is actually what we want to access. When we navigate to the home off our application, we're going to go to home back. But the whole block extends the base book. So we will start from there. The base back starts with in HTML Tack, which is the starting point off every HTML file. It doesnt has ahead part which contains, for example, metadata about them. I am encoding off vegetable file, which in this case, is utf eight. It contains also a link to a style sheet which in this case, is public slash style that she s s and it contains a title. The title of the page. As I said, you confessed variables toe the park files and in this case, we passed the variable title as the title off the page. So when we construct the park file, we actually pass. It is variable and I encourage you to look at the controller for the front and where this is very visible. The next thing that we're going to look at is the body, As you see that there is that there is dot forever. This is similar to see assassin rotation, which means dot rapper represents live or are dividing. I item off class rubber. Similarly, in ul hashtag navigation, we have a UL element off idea navigation. We're going to see more what CSS is used for and how it works in later sessions. So let's look at include navigation. This is an important directive. It does spark that when you're loading this file, which is the base back. It has to include the navigation pack precisely in that location. It will then include everything that is in Navigation Park, which in this case, is just, um, or a new order list with the hashtag navigation, Which means it has the idea navigation one list item which has on a h ref, which is a link to the home. Also, the name off this link would be home itself. The next interesting part off our base back is the block content in. But we defined blocks which are extendable parts off our HTML fire. In this case, we want to extend the base in our home bug and we want to extend the base based on the block content. So we extend the content by writing the content and every element that follows that Locke content statement. When you put exactly where the blood content where the block content is in the base bag. So in this case, we put there on each one which would be here is a tighter and that be for the paragraph. A nice paragraph. So let's look at the outcome off TheStreet fires combined. If we connect to the home, which means example look like without us, This is pretty much what we see him. As you see, the navigation has been loaded as another ordered list with one this item and then h tag to the home. And then we have the extension off a base which is the home back with the H one title. Here is the title and the people paragraph a nice paragraph. So with this part, we have covered also the last part off our applications. We have seen the views and in the previous videos we have seen the models and the controls . I invite you to look more at our code together with me in the demonstration which is going to follow this video 16. Server-side JavaScript - Summary: Thank you, Grace, for covering service side JavaScript in this module we saw that node makes it easy to write JavaScript code for the service side component over a Web application. Thanks to employing a non blocking i o model, no GS scales very well to support thousands of simultaneous connections. This module Chris talked about no Js and a note package management system. Chris introduced some of the components needed for Web application development and how those could be found and integrated using NPM. Finally, we saw a code example for a small app that pulls veda from an A p I and visualize it in the next module. Venice will shows. What are the current techniques to visualize data on the Web and how we can use the D three library to do data visualisation in JavaScript? 17. Server-side JavaScript - Demo 1: Working with an Example Application (Optional): Welcome back in this feed a lecture on going to demonstrate to the coat that me and Dennis are using in the RV elections On previous video lectures we're going to see in my specific case, the A P I code done this is going to use the complete code in his demonstrations, which come after mine. So, first of all, what we need to do is actually I'm not the coat. So we navigate. We want to open up a browser window and navigate to example Sample don't like without us slash public slash ap i the zip and then we press enter. And this will download, as you have seen from the animation, the A P I code onto my computer. So let's minimize safari again going to the downloads. And here we see db i fuller. And we just drag this onto the desktop so that it's here. Good. Now we can use our favorites, um, editing tool editor to in my specific case and going to use Web storm. Um, it is an i d. So it has some nice features. Like quoting her coat highlights. It tells me if, for example, I mistyped the name off available that this variable has never been declared before. So maybe I did a mistake in typing the name of it. There is also free tools, for example, brackets, or you can also download Atom, which is going to be used by Dennis in his videos. But I and I'm gonna use Webster. Um, so let's fire that up. Good. So now that what's that Web stream is open. We can start opening up our application just by clicking, open, navigating to the desktop and selecting the folder. Then we select open again and Web Stream will open up our application. What we see then on the left side is our folder, and I love defies that I contained in it. And the same thing is reflected If we just opened up our fuller with the finder and these are the same fire still, we're going to find in Webster. I'm here. Good. So the first thing that we want to look at when we open up another application is the package that Jason Fine. I talk about this also in my video lectures, and there are some nice and I mentioned worthy things to look at, like the script section dependencies in the main. So the main Tassos, which is the most important squid. Usually in our application and specific cases, it's Index soldier. Yes, it is this fire. The script section tells us how to start our application so it has. We need to have note installed, and we start by calling note and then starting from the next RGs file, which is again this one. And then there is the list of dependencies which are expressing mangoes. It's only two dependencies. It's a quite easy application, and both of the dependencies are at the latest version. So when we see actually that there are dependencies, we know that to run the application, we first have to install the dependencies that are specified here. And we do that by calling NPM install from from a terminal window. We can I do that by opening up a terminal window here and and PM install. But just to explain for the people that might not be using Web Storm, we can just open up a terminal window from the terminal emulator Amy Emulator from our computer, navigates to the desktop and then navigate to the A P. I Fuller we know that we're there because we're doing ls we see the exact same files as well here on the left side. And then we can run on PM install. And this will install off dependencies while the twins dependencies there are specified here, but also a lot off co dependencies. Because express to actually perform its function, it will need some co dependencies, which are, for example, it's except Ari flatten and so on and so forth. So there is actually a bunch of thesis which come with expressing one goes. And now if we need to get back to our application here, what we see that that we see that there is a new folder which is called Nim modules, and this would collect all off their different dependencies that we just installed. Good. The next thing we want to do is actually to look at the next such yes s. Let's go ahead and open up that fire. And what we see is that in the very 1st 2 lines we have two requirements. The first requirement is expressed. It's a dependency. We have just seen it in a package of Jason and we have justice solid with NPM install the fact the second thing that we require is database and this is actually a file and we see it from this stop slash at the beginning Off the name. We don't have to specify the extension, which in this case is Js as we see here simply because notice able to automatically gets the extension. If there is only one file with that name on, we only have one fact which is called database, and the file is either off the type JavaScript So GS or Jason so that Jason. But and this is exactly case we only have one file. It's called Database, and it is off the extension that JavaScript so we don't really need to specify thought. Yes, Here it is. Good practice to actually see what this database file at us. So let's go ahead and open up the database togs again. Here at the very beginning, we have two requirements. The 2nd 1 is just a dependency again, as we have seen in the before. It's definite defining the package, Jason. And the 1st 1 is so again the file and we see this again from the dot, slash here and is, it is the conflict fire. But this time the conflict violence That about Jason. And as I just explained a few seconds ago, no disabled toe automatically gets the extension if there is only one fire with that name. And if that file has either the extension don't JavaScript or or dot Jason, in our case, we only have one file. It's that Jason. So we don't need to specify here, Jason, but if you wanted to, we could again. It is good practice to see what actually this fight contains. So let's go ahead and open conflict with Jason. In a conflict that season, we have only one object. We might have an array of objects. E for example. We started our file like this. This would then be JavaScript, Jason file with an array of object in this case, on the one object inside the area. But again, the file as it is, is only one object. It has one key, which is the database. And this key has value associated to it, which is again an object and has a few keys associate id. So that object? Uh, yes. So when we require the conflict fight here. What? We actually requires the object that we just saw there. And we can go ahead and look at our database connection string here. And what we do here is assigned to the state of its parameters the conflict, the data risky. So we're assigning to this value this constant value, the database object here. So all of the values that we see in this object we don't want to construct a database connection, string through this plans of court here and what this will perform A T. And so what we will get After executing this last line of court, we expect to have something like a mongo DB columns Life slash, which is the first part that we see appear there might be a user name and password required to connect to the database or user name password it some house name, which might be, for example, example to come. Ah, port. So wanted before Ah! And then slashed the two bass collection that we want to use. So, for example, relationships. So at the end off executing this coat and after this land of court, what we expect this variable to hold is this specific string or while not too specific but something similar to this where we have usually in password, the horse name, the port and the collection that we want to use. So the next important bit that we're going to look at is the modular exports. This is an A P I off a note, and it basically tells us that when this file is being required by another file, So, for example, it's been required in the next larger. Yes, what is actually being required is what comes after this equal sign, and what we're requiring in this case is, ah, function that accepts a cool back and that it executes some court when the function is being called. So let's look at what happens when the function is actually being called. The first thing we do is we connect to our database connection string. Someone goes connected with connection, and then we assign the date of his object to a variable, which is called DP. We didn't have four events here. These are for events, and basically what this does is it is react to certain things that happen onto the database or when we connect to the database first of all, we want to react when there is a connection to the database. So we're able toe connect to it, and what we want to do is block onto the console that we have been able to connect to the database. The next thing that we want to do it is on to react on it. If there was an error, so if we were not able to connect to the database, we want to lock this into the consult. Telling there was some kind of an error here is to stack, and the next thing we want to do is we want to exit our application because it wouldn't make sense to started application if we cannot connect database as most off the data that we're going to require toe answer. Some roots comes from the database, so there might be some inconsistency if we keep the application running. So we want oh, exit it. The next thing that we want to do is to react on disconnected. So if we were connected to the database, but then for some mysterious reason, the connection gets dropped, gets dropped or something like that again, we want to look this into the consult saying Hey, we've been disconnected and we close the application just because it's safer to do so. Last but not least is the on open event, and this is Ah, similar to connect, though it's slightly different because open actually means that we are connected to the database and we are able to query the database at at the time that this event is happening . So, uh, this is every time the connection is open. So this is the most important event that we have to react on and because off that this is where we call our callback function here so again we we have to function. Defined appears, ah, parameter off our function, and we call it when we are fully connected to the database. This ensures that when we execute this callback function were only executing it. When we're sure that the date of his connection is up. Let's go back to our index dodgy. Yes, and let's see what happens after we required the Tavistock Jason file A. Sorry, the database structure. Yes, fine. Ah, we are only going to look at the database connection here for a moment and in the next video. I'm going to talk to you about the rest of this coat. How? On the road the router calls controllers and what the model stand for. But for this video, we're only going to see, um, that we connect to the database. And then we started application. So again, require a database file here. Ah, and the next place that we see our database variable being used is down here, and we're using it as a function because again we exported it. We set model export, and we export a function. The function accepted the call back, which is this anonymous function here. And what this tells us is that this function, these lines of court that we see here are only going to be executed when the database connection is up and running when the connection is open. So we are stored that our application is going to listen to incoming requests on Lee when the database connection is open. So this is very important again because obviously we only want to answer to requests once their connection to the database is open. Because otherwise we have no access to the data. And and this is exactly what this ensures us. So now we can go ahead and start application. We can do that either by opening up a terminal window here or for the NPM tap here at click on Start or from the terminal. Just run and PM start. And what we see him is that it will tell us what we are going into a note in next. Archer? Yes, because that's what we have specified in the package. Stop Jason to be the start of our application. Then it will look to console that mongoose has connected, which is the event connected that we see here. Money was connected. Ah, And then we see this other locks which stem from this lines of court, which tell us, OK, that we are fully connected to debate database. So we are executing this callback function and are expressive is not listening in on specific ports and it is running. Um, our application is running and we should be able tow open up this website and see some content. So what we will actually dough is we will open up this website to a copy. It I opened up safari I pasted in here. And what we seize. We have all of our, um, Java Jason objects representing our relationships here, which is exactly what we expected from calling that specific route. So thank you. In the next year, I'm going to talk about the router at the controllers, the models and the floor of the application. 18. Server-side JavaScript - Demo 2: Running an Example Application (Optional): welcome back to our demonstration about how our demo applications actually work. So in the previous video, I have explained briefly how the database, what the database fire looks like and how it works and what this function down here actually executes. And that only executes once we are really connected to the database and were able to query the database. And in this video, we're going to see what what the router is, what the different control, what the controller is and what the models are. And we're going to implement a new route into our applications. First of all, lets again go and start application. We can do this again. I showed it in the previous video fruit the time in the emulator from our computer. Or you can do it from the terminal here. My preferred waged actually to just click on the NPM tap and the president starts script, and you will see down here that this is the same output that you get if you run this on a terminal. I did this in my previous video. Um, just to show that it actually is working, I'm copying this. This'll Inc over here. Let me just hide the sections open, safari paced, enter. And this is exactly what we want to see. So application is running, and this is the relationships that I get back from our application. So back here in our application is running. This code is loaded into a process. And let's actually see what lines of court what these lines of code now do. So we have seen that at the very beginning we are requiring some files and some components of RAB And next line, of course, that we want to look at this. This one, we define our application. So are up to be an express application. Ah, Later we set some some variables and we at some components to it, One of their variables that we want to sign. It's the port number on which our application is going to be listening. And we have seen I'm going to switch back to safari right now that we're listening on Port 3000 here. So this is exactly what we're studying here. That if there is no a port specified in the environment, environment variables, then by default it will fall back. And that's But what the end and stands for here. Sorry day or or stands for here. The default fall back is the board 3000. This is also important bits to talk about one second on its three environment variables. Because here we can specify some variables. For example, the port number that might differ when we're executing our coat on our production servers, for example. So it's always good practice to have, um, this variable things like, for example, the port number or the database connection string to be environment variable friendly or two full back on some default values. And next thing that we're going to talk about is the router, and we see that here we create a router and we create routed by requiring ah, file. I have already explained earlier that we can omit the extension here. So when we are requiring this, if I were actually requiring the file is called router dot Js because we see it here. It's route Doctor. Yes, and since it's good practice, let's go ahead and look what is actually contained in our files. So we fired up around two Dutch. Yes, and we seem his vice very short. It starts with two requirements what? Sorry, Just one requirement and one destination. We require express again here on top, and then we define it. Our router router story is a new express router. That's what we do in this line here. And then we can assign some some routes to it. For example, get requests. Or we can also sign Post requests, put requests. The lead requests, this other request that I talked about in my in my video lectures. But before that, let's see here we're actually requiring something else and recorded their relationships controller. And this file is actually located somewhere, not right at the root of our application. It's located in the folder App that we see here on top. So let's expand that. Then we're going to controllers, and then we're requiring relationships, which is this file over here. So let's double click on that and open it up. And what we see here is again, First of all, that we're requiring something else. It's again the file, and now the two dots tell us that we have to look one folder before the father were in. So we are in controllers on. We need to look at app and then we want to look at models, so we open up the models and then there might be it should be a fire, which is called relationships. And in fact there is, and we're going to open up debt. And now here we actually see an entire coat that there is no requirements off other files within our file treat so we can start reading this file and from here, work backwards and see how a router and her application works. So let's get started on that and the first line again. We require mangoes, and that's because we want to create a model, which is the relationships model that is a mongoose model. And we call this model relationships, and it has some feels that we want to specify it, that our model has told year toe so specifically, we want our, um, objects inside the relationships, um, database. To be to have a source to have a target and to have a weight the sources off type string. The target is also of type string, while the weight is off type number, which might mean we can store integer numbers or double or float numbers all off the three fields are required, so we cannot pass. We cannot insert elements into our database which do not adhere toe to this slander to so say so. All off the fields need to All of the objects need to have a field which is source off that string I feel, which is target off type string and the weight of type number. The last line is the model exports this we have seen before. This is what happens when we actually require on this specific file. And what we're exporting here is exactly the model. So the model that we defined over here is what we are exporting down here. And when we go back to our controllers, um, we see that we a re crying it here and we are actually requiring the relationships model. So inside the relationships controller, what we are exporting is an object. And this object has not tribute, which is called relationships. And this attribute actually executes a function which accepts two parameters, the 1st 1 being the request in the 2nd 1 being the response, these air toe um parameters which are palace passed by, let's say, to conform to the expressway off dealing with requests. So when you have an incoming request there some attributes which you can read off. For example, where does the request come from? From which I p address Who's the user? So is the user using safaris the youth are using chrome is the usually using Firefox or something like that, and then the next one is response. And this is actually what we're gonna answer back to the user that performed the request. So that's going to dysfunction. What we do here is we have our relationships models that one defined over here, the one required from this file. And what we do is we want to perform a find. So we want to find the objects inside the model. And we do not just want to find ah specific object. We want to find all off the objects. So we're not specifying anything more. We're just saying from our relationships model, I want to find everything and once relationship model returns all of the object that it contains, we want to execute a certain callback function, which is this one here which accepts error and result. This is the type off callback function return from a defined operation. And if there is no error in finding the objects inside my database, then I want to return Ah, response which contains our results and off status 200. Which in http means it was a successful request and I'm returning some results or I'm returning. What you expect me to return? On the other hand, if there was an error, So if they reason ever whether want to return is a response with a Status 500 which again in http means there has been an error on the server size and I want to send my error back to the user so that the user knows, or what kind of problem might have happened. Eso Now we have seen what calling this relationships Ah, function actually does it. It will answer to a certain response is, well, answer to certain requests with a response that is either an error Oh, our success response and and to return the results off, finding all of the objects in our relationships model. So we go back to the router and we were here on this line where we actually required our relationships controller And, as I said before in the in the rather, we can specify requests that we want Toby available from a router. So, for example, here we specify that if an incoming requests is a get request and it matches this u R L. Then we performed the function from the relationships controller, which is called relationships, which is the functions the function that we have just seen one second ago. We can also change the get toh, for example Post, and this would be done a post request or or a put request or a delete request on this obviously depends on what you actually want to do about in our specific case, but we want it. We want to get data, so we want toe. Specify. I get requests and the difference between get put post and the lead request I have explained in my video lectures. So what we see here now is that if we navigate to this AP relationships and said before, we're executing dysfunction and you might have noticed that at the end here, we actually not calling the functions were not specifying one specific call off the function. But we're just specifying, Let's so say the blueprint off the function were specifying what needs to be called if a user is trying to open up this route. And this is because when this court get gets executed for the first time, If we had something like this here, we would actually execute the function at on that moment. So say, today I start my server. Ah, this court gets executed after I started my server. It performs this request, and this will be stored. Um, let's say here and then Every time someone calls this this call, the same object will always be returned. So the same array off relationships will always be returned. But obviously, in our database, the data might change over time. So what we want to say is, every time a user is calling this request, I don't want my application to just return the result off the first time I executed the coat and I executed its function. But I want to execute a function on the spot at the moment for that user, and I want to answer for to the user exactly the data that, um that we got back from the database at that specific point in that specific point in time . The last thing that we see here is that we are exporting again because this is necessary for our for three. The other files requiring this file to know what would we actually want to achieve by requiring this fine and what I'm exporting here is exactly the router object, which is the one that we have to find over here and to which we have a signed, um, a route. I get requests over here. So now we can go back into the index or Jason, or we actually required the router. And we assigned it to this variable here. And we can say that our rather is listening on the route here on day. We're using the route off our application. And if an incoming requests get on the route and it matches one off the routers pacified incoming requests, for example slash ap ice Less relationships, as we have seen here, then you have to answer Sorry. You have to answer with, um, with this call off dysfunction, which is but basically we're telling the application here. The last part off the code in our index Dodger. Yes. We have already mentioned in the previous video. Basically, what we do here is we actually start listening. This is the most important part. This is really where we say, um, now we have loaded all of our controllers. We have floated all of our roots. We have executed off our logic that we need to bootstrap our application. And now we actually want to start listening to incoming requests. And the way we do that is basically we say we start listening on a port that has been specified before. So apt get port will get this variable which we have set here and then once the server is actually listening, we execute a callback function and we print on the lock that are expressivity is listening on the port that we have specified and the application is running and we should be able to connect toe local host, port number slash AP eyes last relationships, and we should be able to get back the data that we see here. So this is exactly that the flow of application, what we have just seen. But now what we want to do is we want to specify that we want to get we want to have a request where we're getting date Some, but we're only getting the relationships for the source. That is, for example. Amen. So how do we do that? We go back to our Web storm and we start implementing a new route. So we know that the roots are defined into the router, so we don't have to modify index, but we have to modify router first and a route to specified exactly here, so we can come up with any name that we want. I'm gonna delete the semi column at the end of this line. I'm gonna copy paste this line one line below. It's not get request, cause we're getting data and we want to get the relationships for the character. Ayman, Um, we obviously change the type off the function that we're going to call, so we want the relationships on the for amen. And we also have to out the semi column here because I deleted it from here before what? You can actually immediately notices that the color off this toe blue prints off the function are different. And this is because Web Sturm automatically knows that in the file controllers relationships, there is no um key that has the name, relationships, aim and defined. So if I hover over it, it actually tells me there's an unresolved bearable relationships. Ayman, it doesn't happen here because this is obviously defined. So what we have to do now is actually toe, um, to define this dysfunction over in the controller. So what we do is I am copy pasting the name of dysfunction. Just other simplicity. I am navigates two controllers relationships. I append at the end here a common Then I specify my new the new function that I want to to implement a column. And basically I can copy what is written up off here. I say function. Then I put request and response and automatically Web Storm has already put the branches for me just to be consistent with the way half written them over here. I will eat some off the spaces and then what we want to do here is we want to return. But we want to find in our relationships modeled on Lee those objects which have as a source, Ayman So we can copy what is over here because this is actually good cold, and there's no reason why not to reuse it, so we can just copy what what we have over there. And if we look at the documentation off goes, we will see that in the find function off a model we can specify as the first parameter on object. So that's put an object in on. And then we put a comma and we leave the callback as it is. And in this object on gonna now return just to have more space here in this object, we can specify what filters to apply on our data before we get it out. So the filters we want to apply, as we said before, are not the source must equal. Um, Ayman. So this is all we have to do now to be sure that when we perform the fine operation on that relationships model, we only filter out those elements off which the source is Ayman, the the rest. As I said before, the callback is actually working pretty well because we will have a very similar result off that we have above here. We will have if we have an error than we just returned. There was some kind of an error, so this is the error. And if there was no ever, we will have some results which are most likely and hopefully gonna be the, um those elements in which the source is Ayman and we really certain elements to the user. So now I am saving this, and as you have noticed, I have actually not needed There is no need for me toe change the model because the model eyes the same. There's there's no difference there. The only thing again that I'm changing here is just I am filtering out. Um, the relationships such that what I get is that the source off our relationships is aiming. Ah, Now I have saved this file. I have saved this file. Um, there's no modification here, so there's no need to save anything here. Ah, if I go back to my run tap here, I can restart the process. And this is needed because, as I just mentioned, we have modified files here. And when we start the process here, what actually happens inside your PC or you're inside your Mac or Linux machine eyes that the files that you have here, they're being collected inside a process and the process contains a copy off the files. So since the copy is outdated, I need to restart my server. And I can do that by place. Pressing this button. If I was using the terminal, you would have to press control, See? And then you can just type in NPM start again. So just for the sake here I I press run again Out What is gonna be the same? Because I am not logging anything. Ah, new. And But when they go to safari now and they have my FBI relationships route If I now append Ayman, as you see here, um, what I will get is a new array. So this is the history of objects with only two objects. And the two objects that I get are with the source. Ayman, these are the only two objects that I have in my database which have to source. So we were successful in implementing this route. And we can also confirm that by going back, looking at our complete relationships, roots with all of our relationships data and that you will see that at the very top there's only two objects which, as as a source, Ayman and they're exactly the same ones that we get if we never get back to this route. Um, so, yes, this is exactly what I wanted to show you. You have seen that it's actually really, really easy to implement a new route. Probably You want to do this in a more systematic and the more a reusable way. So instead of a defining really specific names for character since we're dealing with a database on the names my change you can define a variable here. So basically can say ah, column name, source name is even better source name. And this way I can use this variable. Um, later, inside my relationships controller to just filter out those, um, those sources those Sorry. Those objects off which the source is the name that I specify here. So, for example, I might I might write, um, ABC here. And then what Theis value will hold is ABC So somewhere in the routes over here during the controllers over here, I can instead of hard coding in the name, I can use something like, um, source name. There is more to that. It's actually not that easy. You have to define a couple things here and there. But this is just to give an idea of how to make this coat more reusable. This is all Dennis is going to talk to you about, um, in the visual part, off our application in his example. Application. There will be also views defined inside of the coat, which I am missing in this coat simply because out of simplicity, this is just an A P I in the views part if even if you never get to a next torture, yes, there will be some some new lines of coat which you should look into their interesting. And I'm pretty sure that if you understand those lines of quote, you actually understand how the application works. So that is a good test for you to try out and have fun. 19. Data Visualisation - Introduction: welcome to the data visualization module. Data visualization is an important aspect of data analysis, creating images, diagrams and animations. Help us in the process of analysis and data communication. In this example, we can see that by simply visualizing a large number of data points into a graph. We can stop recognizing patterns and trends in our data. Over the past couple of decades, more and more their days communicated online. And so JavaScript is playing a unique role in enabling data visualization and this module. Dennis will survey the current techniques we used to visualize data on the Web. Then it's will then show how we can use the powerful JavaScript Library D three to tell the story of our data in a Web browser. Danish Warts is a master student for bioinformatics. He has developed several JavaScript based visualization tools, and he's passionate about open source communities. 20. Data Visualisation - Data Retrieval using HTTP Requests: welcome everyone to this part of our course. This part will be with data visualization and we'll start off with data retrieval using http requests. So let's take a look at what we plan to do at this part. We're going to create a simple website and brief data down from the no chess application that you build in previous lectures. That means we are moving away from the beckoned now and towards the front in. We'll use data from a data set called the Network of Phone, State has said, and that contains a number of character interaction from the novel Osama sorts. That is the third book in the game of Thrones Siri's so you might have heard of it. We will then use this data that we retreat from the FBI and create a nice craft specialisation off the interactions off these characters. We will use the park template ing engine that you have been presented in the last part of this course to create the site and then use the D three chalice script library for the visualisation itself. Let's take another look at the architecture of this application. The beckoned is to know she s application that you were presented previously and at this point we're going to look at the front end, which is going to be the website. This website will also contain JavaScript, and the travel script will be used to query our A p I for the relationships off these characters, which will then return them as chasing data. And once we have it, we'll try toe. Visualize it nicely. The first step in this is to use the park template ng eight engine and compile template into an HTML file that will be displayed in the wet process. Then, with the help of travel script, we were created back end server and get the data from there. So let's take a look at the code you were provided before in the Fuse folder. Off the APP. You can find four files. You can think of these puck files as building blocks for the website. These templates will be put together and then compile into HTML. For example, the navigation file contains the navigation bar, obviously which we can then, which can then be referenced in other parts, for example, in the base file. So we don't have to include the code for navigation in every site. De visualization dot park file is where the content for our re solicitation page will be hosted, and we'll try to have a look at that in a second. So it is looks quite complicated on the first plans, but basically what it has are three major parts. It has a block for meta data, as in the head off the HTML file it and it has a block 40 content and right on top. It also says, extend space. This means it will adhere to the basic structure that is to find the base, that park file and then Onley in. Check the content in the relevant areas. So we have in the styles block linked a style that CSS file. We'll talk about that later. Right on the button, there are two JavaScript files. For one, we used a D three library, so we have that one linked, and then we have another travel script filing that will host the code for data retrieval and visualization. But let's take a closer look at the content itself. There are three parts. You the title itself. This will be provided by the A P I already the router off our application. We have a button, this button when clicked cause on the travel script file and we'll call the load data function within dysfunction. We will define coat that would create direct request toe r p. I received the data and then create division ization. And finally, we have one more diff with the i D route. This is where we'll inject d visualization using JavaScript on d three. So this is what the page looks like again. It has the navigation bar on top. It has a title. In this case, Specialist isn't this realization and a button that, when pressed, will initialize divisional ization and data retrieval. So let's have a look at what the data retrieval actually looks like. This will happen in the travel script file. You can file individualization folder, which is host the in the public folder off our application. Descriptor chess will host all the court we need. So let's talk about that code. Creating http Requests is a classic application off front and and even back and javascript . There are many libraries out there which tried to make this a very simple task. Jake Riri is a very popular one that we will try to stick with the building. Shall a script functions for now? One way of doing that. It's the so called XML http request object that is building the travel script when it's done. She hated this can be sent off to any given your l in this case our a p i endpoint, which returned the relationship data. And it is also a object which supports a number of events that will be fired at various stages off this process. For example, when the request arrives at the beckoned, there's only went for that when it starts sending data. There's a second event for that, and there's another event when it is finished with transferring data back to the front end , and this is the one we will be looking at the next slide. So here we see the coat that is needed to send the http request using natives javascript function. It is rather simple. In general, it has three major parts. The first part is instead she ating to request object and saving it into a variable. Then we need to define what should happen once this data retrieval is finished meaning As soon as the data has been sent back to the front end, this on load event is called and we now need to define what happens when this on Lord event is called. We do that by defining a anonymous function. And since this function is called directly on the request object, we can actually access to request object using the this keyword. And the interesting part in this case is to response text. This is where the data received from our A P I I will be helped hosted, and then we can do something with that symbolized by the do something with functioned in this case. And lastly, we need to tell the request object. What kind of HDP requested is in this case, it's against get request and we have to tell it where to send it off to in this case, our a p i. D. Relationship and point. And finally, we need to send it away. That is all the code is needed to create a javascript. Http request also take a look at the demo video that is part of this course. I will demonstrate how to exactly to use this and code and out built unload function presented before 21. Data Visualisation - Data Visualisation with D3: hi and welcome to the next part Off this lecture. In this part, we're going to discuss data visualization. Now that we have the data retrieved from the FBI, we will try and create a nice looking craft from the character interaction off the Storm of Sorts novel. Let's talk about visualization in general via brutalization. Technically, all the information that is displayed initialization is already available in the data itself. But a good example for why visualization is important. So called Unscom's quartet you concede on the left side here. So what you see is a bunch of data. What you see is that you can't see much at first glance. However, Luckily, we have some mathematical tools to analyse these 42 dimensional distributions. However, in this particular case, if you look at the main distribution that the distribution means off X, they're all exactly the same. The same goes for the variants off the X distribution, and if you look at the why part off this distributions, they're also very similar to at least 2% points. And even more complex things, such as a linear regression line, are almost identical for all these four distribution. So you would assume that they follow a very similar pattern that they are even mostly identical. However, as soon as you bring in a visualization off these data points, you will notice that they are vastly different and definitely follow different patterns. So this is the reason visualization is vital for data exploration, and by now it has become a very common theme to use specialization on the Web. And for that we use JavaScript. Obviously, there are a number of JavaScript library for Web based data visualization available, such as the ones you can see listed on the left side. Off this slide today, we'll be using D three, and we'll talk a little bit about why we will be using the three in a minute. First, let's talk about ways in which we can visualize data in the present General. There are three major ways, basically the most simple one. Our html lemon elements. They are actually part of the HTML language. That means they are supported by any browser day support all the things that any HTML element will support. That means don handling and events and call backs would make it really easy to make it responsive and interactive. However, they only its support. Very simple shapes such as circles and lions, and to create more complex shapes is very. It takes a lot of effort together, done. Secondly, a whole different way of creating graphics in a webpage are the canvas and veggie L elements, now chemist and FDLR, but different. But days are related, and they work in similar ways. Canvas is for two dimensional graphics by Web. Shell enables three dimensional graphics, and we're process. And if you have a lot of elements and a lot of shapes to draw, they are very fast. However, they also require a lot of effort to get it done because every shape needs to be explicitly stated by the user itself. That means that they do not natively support events or callbacks, which makes it very hard to create a very nice interactive experience. They also are based on pixels like a Che peck or a bit more picture, for example, which means that they're elusive, resolution dependent, and if you would like to assume into it, the quality may degrade. The last way to visualize data in the process is a very common one and these are called scalable. Vector graphics was known in the SPG, and they are similar in the way they work to HTML. Elements they provide don handling ability because they're basically part of the HTML file . That means that you can create events and call backs when clicking on them, which means they are very good for interactive crafts and visualizations. And because SVG doesn't actually place any pixels anywhere, but rather provides a description off how shape should look like it's completely resolution independent. The problem, however, is that if you have a lot of elements and shapes to draw s in thousands, it can become very slow, and we would probably need to move to a that G. L or canvas based specialization. Let's talk about I want to use d three. If you go to the website at defeat, JSTOR or you will see that most of the examples are some form of craft or a bar chart or some other form off craft based specialization. However, the three is not just the crafting libraries. Like some of the other ones that we have listed on a few slights ago, it is a more flexible trouble script Lavery. It is focused on a more abstract concept, off binding, arbitrary data toe page element and then applying data driven transformation to them. And those can be, for example, s PCI graphics. They can also be tables or text elements or any other kind off HTML element. So the main point for D three is the way that data binding works with D three. And let's talk about what that actually means. Data binding in Web development refers to the assignment off data toe specific elements off for you, I or, in our case, a website. So, for example, imagine we have a star shape that is displayed on a website and that has a attribute defining its color. And we also have a variable, you know, script that is called star color in this case, and it holds the color we want to start to have. We can now assign this variable to the color if you believe the star so that they are bound together, meaning that if either the star Variable Star Cal available in our script changes, for example, programmatically that will also influence the color off the star on the website immediately , and whites worse as well. If the stock all on the website is, for example, through use, a contraction influenced, this will be reflected in our code and data as well. So decode. And you I are kept consistent across changes, and D three uses this as its central working paradigm. It allows the user to buy an arbitrary data to the document off check model, for example, when providing craft data to create a SVG visualization. And now I have already mentioned the document object model our dorm a couple of times. So in the next part of this course, who will talk about what it actually means? And we'll also look into scalable vector graphics before we go on to actually create a graph using the three. 22. Data Visualisation - DOM and SVG: Welcome to the next power or for a lesson on data visualization. This time we're gonna talk about Dom and SVG Dom Stance the document, object model and toe talk more about that. We have to look at the structure often. Html file. Many of you will know HTML already, and if you want to live, have a close look at it. There are many great resource is to learning online. We will only take a very topical look at it. So festival html stands for hypertext markup language, and Michael languages are there to a structure data you might think off. HTML is away to tell the process what your website looks like, but in reality it's main focuses, stared to structure data, for example, into pictures or text, and only give a very rough, topical structure to the fire. Now, as many Michael languages, it works using tax, as you can see in the pointy brackets. And this tech has an I D. For example, HTML. And for each tack, that's also a corresponding closing tag, which has the same idea proceeded by a slash. So if you can see here on the top, it starts off with an HTML and then the bottom. It has a closing HTML, a swell, with all the rest off the webpage contained within it for the other tax who works in a similar way in the way that that's an opening tack. Then there's more content. And then there's a closing tack. This example here is actually to compiled version off our visualisation site we had discussed in an earlier video using the park template, but if you want to look at it in a different way, you could also see legged. It's the HTML tag itself. Contaminant contains everything else in the website on the first level D head and body tags , which then themselves also contained more data. They had contains the meta data for the website, for example, title off the page, or it links to style sheets and again, Asian males there to structure the data and de linked style sheets, then decide what it actually should look like in the browser. Now to write, the body contains the actual content off the HTML page, such as, in this case, script files and def like a division element that is there to croup other elements. But it could also easily be text or an image. And basically, what you see here is what we call a tree structure. Because if you're turning on its head, the top part, it's also called the route, and then it branches out into more and more complicated structure. So you could also call it the model for all the objects that are contained in a document. So that's why this tree structure is what we mean when we refer to the document object model or don't for shorts. And then when we talk about dumb manipulation, we talk about manipulating this object, for example, by changing, deleting or adding new elements to the whole structure. For example, we could add more data to this development, which again could be pictures are text or, in our case, the EST ICI elements for our official ization. And then when we talk about dumb manipulation, we talk about manipulating this object, for example, by changing, deleting or adding new elements to the whole structure. For example, we could add more data to this development, which again could be pictures or text or, in our case, the EST ICI elements for our official ization so when we talk about data binding in the D three. What we actually mean by that is that the three is able to create Tom Elements or update or delete, um, dynamically, based on the data it has again in this example on the left foot. Right now we have a bunch of names and a bunch of relationships, which is going back through the data we got from our novel from the network of Phone State A set. So technically, as I said before, the three could create all sorts off dorm elements. We could create a table from the state and we could create text. But in our case, we would like to have a nice looking traffic. So we're gonna use scalable vector graphics. So we're gonna talk about them next. What are scalable? Vector Graphics Festival said she is a flexible solution for drawing on a website and visualizations, and it is also very good for craft trying. So, in contrast, toe a classic picture like a shape peg or a bit map that is a bunch of pixels. SPG is actually also a XML based microbe language similar to HTML. In a way, the great advantage of dead is that we can add sug elements into our HTML file and they become part of the document object model. And because they then implement all the features of regulation will elements, it becomes very animation friendly, and it becomes very interactive because justice about Nora's a link. The elements register when they get clicked on. And besides drawing shape, we can also render text in SPG. Let's have a look at how it works. You can hear, see a much more simplified HTML version. And in the body we added a simple SVG element. The element itself again has a tag idea. In this case, as VG, it is a closing tag slash SPG, and it also has a number of attributes. The route SPG element. Just as the dimensions has attributes such as the height and the width, and then the child notes off, this element contained the actual shapes to draw. In this case, it's a single path element and path element are freestyle shapes, so to say, where the shape off the element is defined by the user in this case, through the d attribute. As you can see, it looks quite complex and complicated, even though the resulting shape on the right is a simple triangle. Now, obviously, if you want to create more complex animations and graphics, we would like to automate this process, and this is again We're D three comes in here. You can see a more complex example on the top U. C. D S Ritchie element with six sub elements are child elements flew them circles three of them lines, and you can see the result on the bottom, right? It's, Ah, simple craft with three notes and three links. No, the color and the shape of all these objects is for one determined by the type of objects such as line or circle. But it us also determined by the number off attributes that can be found in these elements . And this is where we can determine most off the features off such a shape and where d three concretely help us. So in the next section off this lesson, we will take a deeper look into how our data binding works in the three, and how we can use it to create and dynamically create these kinds off shapes and graphics 23. Data Visualisation - Data Binding with D3: Welcome back to Election Board data. Visualization in this part will take a closer look in the data binding with D three, and we will also create a craft model that will then translate into a visualization on our site. So first off, too great a graph visualization. We need a mathematical model, which will use to calculate the layout or the placement off the notes on the orographic. At the same time, we need to then bind the position off the notes to the position off the shapes in a graphic . First off to create a craft visualizations really two parts. We need a mathematical model of a graph that will use to calculate aesthetically pleasing positions for this notes on our graphic. And then we will need to translate on mirror dispositions to the shapes off our actual visualization. So this is where the data pining parts confident, will bind the North position to the position off the shapes in on the craft, which realization? So to start off, we'll start off with the craft model itself, and the three provides a number off layouts for crafts right out of the box. We'll be using a force directed layout today, which works in a way that there are forces that are interacting between the notes off a craft. You can think of them as crab ity. Well, then set a negative value for this gravity, which will cost these knows to repel each other. And ideally, they would spread out evenly across the surface off our graphic. But because they are connected by the links that will cost them, too, create a shape that will still ical accommodate the links while being as nicely spread out as possible, which will usually result in a very nice looking graph. For this to happen, we need to set a number of options on our force layout. You can see them down here on the button. There are things such as the charge, which is the force which interact. So the strength of the force between the notes D link distance, meaning the four length off connection between notes, and it will also have to give the whole simulation size. So we need to set the dimension off the area in which the notes can move. And we obviously want this to be the same size as our graphic on the screen later on. So we'll use two variables for with and hide, which will pass to the size function. And we also reuse them later for the size off our graphic. So one more thing we actually need for our craft model is obviously the data itself. And de craft layout, provided by D three has two more functions we can call to actually pass that data. They're called notes and links, and we'll pass a set of data that you've already seen before, the one about the characters in game of Thrones and the interactions. In this case, the characters are notes in terms of data. It's Justin Ray of names, basically, and the links, which are the interactions between those and finally to actually start assimilation. We have to call the start function, and the start function will cause D three to initialize a number of things internally and will kind of come back to that in a later slide. So now that we have the data model for our graph layout, initialized will move on to actually initialized a visual ization, and then we'll try to bind the model and the position off the notes to the graphics and the position off the shapes on that traffic. So first thing first, what we need to do to initialize a visualization is we now have to use D three to manipulate our Dom. In this case, we would like to set or select the route def that we have created in our template, if you remember, and then we would like to use the three toe append a child element toe this route death in this case, a sug element. And now we need to talk about something else as well, because the way that D three actually select elements from the Dom is by using CSS selectors and we'll talk about C. S s a little bit later. But generally, if you want to learn more about CSS, there are great resources online for that as well will only go through the basics for now. So basically, in CSS, you have different ways of selecting different types off dom elements. There are three actually we only used to funnel you can select on element by its i d. And to do that to use a pound or a hashtag in front of the I D. So if you look at the top row here If you If I want to select the HTML element with the i d route, I can use the JavaScript function on the right, which is provided by D three. I can say the three thoughts select hashtag route. And that means that the S, which Yvonne left will now actually hold the I d equals root element on the left. Similarly, I can also use the full stop. In this case, this will select any element that has to class root attached to it. So in this case, instead of selected by I d. I'm selecting by CSS class and we talked a little bit more about that later. So But for now, if you c hashtag rude, that just means I want to select the Dom Element, which has the i d route. So this is what we're actually gonna do. Now we'll take The three will select the route i d from our HTML file and then we'll tell it not that you have it. Please append a child element off the type SPG which will use which will do using the apparent function. And then we'll also said a number of attributes on this SPG in this case will set the dimensions. And as I mentioned before, we would cease dimensions to be the same as the ones off our actual mathematical simulation off the North positions so well, reuse de with and height variables that we set before. And if you actually execute us, we get what you wanted. We created a new Tom element in this case, this sug element as a child element off a route if with the correct dimensions, the next thing we need to do is we need to populate this svg elements with shapes corresponding to our craft model. So let's take a look at this slide on the left. You can see some demo data. I think off the top ones as characters from the books in this case that just called ABC and the bottom on the left will have a number of connections between those and no. Remember when we called to start function on our layout, I told you that a number of initialization is happen. This is why you see on the button on the links data points that dealings actually connect numbers and not necessarily the names like the ABC on top. This is because as soon as you initialized the layout in D three, D three will replace all the names with the indices. That means that ordinarily would be replaced by the position off this name Indian name rain . And obviously that is a way to handle cases where, for example, in our case, two characters might have the same name and to distinguish them instead of calling them A and B will call them Name zero and they want. If you now try toe at this data toe a visualization, we would like to see something like we see on the right. So we would like to create a child element for us with SPG one circle element for each note and one line element for each link. And we would also like to attach a glass to them so we can label them as links and notes, because you could possibly imagine that there are other circle or line shapes on our graphic that do not necessarily represent a note or link off the craft. What we actually trying to do here, in terms of data binding, is we would like to represent the data we have on the left on the same fashion in are you I or in our traffic and would like to keep those consistent as well. Data binding in this case refers to the consistency that if we remove a note, for example, on the data on the left, this should also be represented in our traffic on the right. And if, for example, the user could remove notes on the craft in orange traffic, we would then like to relay this information back to our data and keep it consistent. Now, let's take a look how we can use the three to add new elements to our graphic. Potentially, you could think that we could use the same technique that we used to create the SCG element before toe also create the shapes on the S egy itself so we could possibly select the SPG and depend a line element by hand, of course, mean that we have to repeat this process for every line and for every circle element that you like to add. But instead the three provides a smarter way to do it. The three is a lot about selections and sets of elements and how to join them together. So when we try to add elements to the SPG using the three, we will actually try to select all the child elements off SVG that have to class link. And as you can see on the right, there are none at the moment. So this election would actually return an empty set on MT array off elements. We can now pass our data to this selection using the data function off the three. So that's basically passes are three links are three data points to the selection and compassion, and we now have two sets off elements. We have the empty set off elements in the SPG and we have a set of three data points in our data. Now we would like to combine those together so that for each data point, we also have an element on the traffic. So again, the links on the left on the left side, three data points We would like to now represent those on the right on our traffic as well . If you think in terms off sets, this is only one off three possible outcomes. You could, for example, also imagine that we have elements on our data. I'm sorry on our graphic on the right, but not in our data. All you could imagine that we already have the same elements on both the right side and the left. So these are actually the three outcomes that you could have when comparing two sets on the left and yellow. You have to set of data points and on the right, do you have to set off elements on a page and the three provides a function for each of the three cases that can happen if we combine or compare these two sets. If we want to deal with all the data points that are not yet on the screen, we can use the enter function if you want to deal with all the elements on the webpage that do not have any representation in our data, For example, because we moved that data programmatically used the actors function. And if you want to just deal with all the data points that are already in data and are elements but, for example, have been updated in the data or the website, we used the update function to have it again and text who used to enter function off D three to deal with every data point that has not does not have a Christ bonding dom element yet, and we can use this to add new elements. Tour SVG. On the other hand, the exit function does the exact opposite if you want. If we call the exit function, it will return us every element that is underside but does not have a corresponding data point. This is mainly used to remove elements from the from the webpage that are not in the data anymore. And then if we have a number of elements that are in the data and on the side as well. We used the update function, for example, to update any attributes that might have changed. So if we actually do this, you can see we get the desired outcome on the right. So in the left, let's go through it again. We select all the links. Are all the elements that have a link Class in SPG, which will return an empty set, will also I used to date a function to provide the data points on on the bottom off, discreet after slide. So these are three sets and then we use the enter function to deal with all the data points that are not yet on our page in disguise. The feeling spill Oh, and then we'll say for each off the data points we have a penned a new line element tow rs witchy and then also said the attributes class to Ligue so we can actually label thes lines nestlings. Now, we would also like to do the same thing with the notes in this case for circular elements. But we will skip this for now. You can take a look at our accompanying video where we demonstrate how to actually do this and coat now that we actually created a craft model and recreated a craft specialisation using SPG will take a bit off a closer look into how to control to look off this svg using CSS and style elements in the next lecture 24. Data Visualisation - Controlling Element Styles: in this part of our data visualization lecture. We'll be talking about controlling element styles using d three. We've mentioned CSS a couple of times before in this lecture. So now we're gonna take a closer look into what it ISS and how we can use D three in tow. Actually use it so C. S s stands for cascading style sheets and what HTML is responsible for structuring the data on a website CSS that's actually responsible for how it looks. And if you take a look into the code provided to you during the no chest example individualization folder, you will find a style CSS file. You can see the content of that on the right. So in the previous example, we used CSS classes as a label to denote a line element as a link. You can see it here. So while we attached this attribute class and set it to link toe our line element in the SPG, besides labeling and as a link, we also attached all the styles to find in the C S s class linked to it. In this case, as you can see down here, we said a stroke off the color gray because this hashtag 99 this a hex code for the for a great color. And we also said a stroke capacity, meaning this stroke or the color off the line should be slightly transparent and on top. You can also see we have a similar CSS class for notes. In this case, we also set a stroke with a white color with the with off 1.5 points. So if we go back to our code, you can see on the right that declasse link has been attached toe the links between the notes and the color off this off these links is actually great, and it's slightly opaque. Also, if you can see it here in the notes, the links don't actually touch the nose directly. This is student effect that the note has a 1.5 point with, um, stroke off the white color. So if we would have a black background, would actually say, See a white line around the notes, which we have set in the CSS file up here. So now let's imagine we would like to change your own the with off our links, we could go back into CSS, and actually it changed a stroke with in the CSS file. But it would be much nicer to be able to have access to these sort of styles directly in our code. And luckily, D three provides a number off ways to do it. One way is the style function in which we can set CSS styles directly in the code. It takes two parameters. It takes thes style Toby influenced as the first parameter and then the value to set it to us to send. So in this case, we're setting the stroke with 22 points. And as you can see in comparison to the slight before the with off, the connections between the notes has doubled. So how about we would like to change the with off these connections, depending on something we have in our data, for example, or set them each you're different with. Usually you would have to create a new CSS class for each with would like to have, which sounds like a lot of effort and requires a lot of redundancy. So instead, let's take a little look into our data. We have to link state on that you've seen before what you haven't seen before us, that there are some ellipses here. And if you expand that in a single data point, you can see that behind those ellipses Eclipsys, we actually have hidden. Do you wait? Attribute off a connection. In terms of graph, many grafts are weighted, meaning the links between the notes have a certain weight associated with them. In our game of Thrones example, the weight refers to the intensity off interactions between two characters, for example, and it would be great if you could now set the connections between two notes to do with, depending on the weight off this connection, meaning the more intensive. The interaction between two characters are the thicker. The line between those two notes representing those characters should be. So instead of directly setting de with off all this for the links to to, we would like to access the data directly, extract the weight value and said it to this one. Luckily in CSS, I'm sorry. Luckily in d three, this link variable up here contains every link element that is in our SVG traffic. That means that as soon as we call the empty function here, anything that comes below this. Well, actually, it be applied to every single link element in our data. This means we can also access whatever data is stored in this link element in this case, the wait down here we can now set to stroke with depending on the weight stored in the data point. By passing an anonymous function, D three will pass the current data point to dysfunction as a parameter and are we now need to do is we need to extract the weight attributes from the parameter and set to stroke with just parameter and you can see on the right. We now have a different stroke with for all the links, depending on how intensive the interaction between the notes or characters. Actually, yes. One more thing you would usually like to do it in a case like this is you would like to normalize the data to a certain degree because the weight can differ drastically that we would like to keep the thickness off the line within reasonable limits. So you would apply, for example, the square root to each off the data points that you would say always take the square root off the weight, while you could also use the longer written for that. So it is a more natural looking with for the connections. So now that we have seen how we can use CSS in D three to actually influence the style and appearance off our visualizations and graphics in the next part, who will talk about how we can make them interactive using event handling? 25. Data Visualisation - Event Handling in D3: welcome to this part off a data visualisation lesson in this part. We're gonna talk about event handling in the three and how we can use events to keep updated with changes in the code and create interactivity for the user. In the last part, we created a graph model which calculates the note positions dynamically. And we also connected these positions to the graphics and the number of shapes and RSV cheese. Now, if you would not look into our example, what you could see is that you can't see much on you can see his little quarter shape on the top left off the visualization. And if you look into the code off the dorm, you will see that all the shapes are present. However, there are located in the default position off 00 in terms of coordinates. Even though deal they are is calculating new positions constantly. Now we have connected them. But we are not keeping up with the change position off the layouts. So what we no need to dio is me to take advantage off the events functionality of t three to tell the shapes off RSCG to be updated in terms of position every time our layout is calculating a new position for a certain note. This is handled by the tick event that is implemented by the Force Layout. De Force layout in D three actually implements three different events, a start event that is called when the event is first started. The tick event is called on every step off the simulation, meaning every time a new position is calculated for a note. This tickets an event is called on every note and finally a end event that is called A Soon as assimilationist stopped. We'll be taking advantage of the tick event for our and we will tell to force layout to do something as soon as there is a new simulations step completed. And that's something we're gonna do is we're gonna take the positions for the notes calculated by this layout and attached them to our SV's s. We treat shapes, so the actual position on our graphic get updated now the position off the note calculated by the simulation by the layout. It starts in an attribute on the data point called X, as you can see, but back here and why so decided car your coordinates calculated by the layout. However, SVG uses a different a tribute to define the position on the SPG graphics. These are called C X and see why? So all we need to do now is we need to a sign the c x attribute devalue off the data point X back here. This is working the same way that we used the function toe assign the line thickness depending on data on the on a previous video. And the same thing is working for the link down here. Except this time we have four co ordinates to coordinates 40 starting point of the line and 2 40 endpoint off the line. And if we now take a look again at our example, you can see there is a nice looking graph that gets updated dynamically as soon as no persistence change in the layout. And if you want to see this in action and actually move around, please take a look at our demo videos. Now, one more thing we would like to add in this and which is also a great example for the use of events, is some sort of user interactivity, meaning we can click around the craft may be tracked him around, Maybe transform the shape of a craft by clicking around. That's what we're gonna use the on click event in d three. Because sug elements are dom elements, they do already implement a click event just like buttons or links to in a website. So all we have to do now this provide a function that will tell to note what it will do if it has been clicked on. Remember here that denotes election actually contains every note on our traffic and D click event. So the function we define here will be called on the note that is clicked on. That is why we have to use the disc keyword down here to select the current note that has been clicked on. He was in the three. So three select this and then we can change any attribute. We can assign new attributes to this note itself. In this case will change the radios attribute, meaning the size off the circle to 20. In our case, this will increase the size off the note to 20 from five. Oil was before. If you click on the red note, it will start it will change shape from what you see on the left. So what you see in the right, however, this would happen instantly. Sometimes it would be nice to create a smoother transition and have a bit of a nicer animation. Luckily, D three also supports animations. Of course, it would sometimes be nice to have a bit of a smoother transition between the two sizes. This is where animations come in 23 already supports animations. In this case, all we need to do is before we apply to new attribute value. We tell the three that we wanted animated by calling the transition function, and we will also don't specify a duration for this transition. In this case will use 750 Millicent. So if it doesn't go back, for example, and click on the Red Note, it will slowly increase its size over the course of 750 milliseconds until it it stops when we have the right configuration. This has shown you how events can be used to keep track with internal changes and also provide some interactive features. If you like to know more Seymour examples off different events that you can implement and get a bit more detail of how it actually works in the coat. Please refer to our demo video. 26. Data Visualisation - Summary: Thank you, Dennis, for this introduction to data visualization in JavaScript. Summing up this module, we can use data visualization to effectively communicate data. Currently, there are three dominant techniques to visualize data on the way these air HTML elements canvas and SVG. One of the most popular library to visualize data with JavaScript is D three. It allows us to bind data to visual elements and then draw and transform these elements. Before we conclude this module, we recommend to remember these principles of data visualizations for more effective data communications. 27. Data Visualisation - Demo 1 (Optional): - Hello , everyone. Welcome to the first demo video accompanying the A P I calls and data visualization lecture in this first video, we're gonna look at what we're gonna build in this lecture, the tools we use some of the code structure of what is provided, and we're gonna make our 1st 80 p requests to our A p I to get some data to visualize. So after this lecture disorder and 1/2 simple website, it has very simple menu up here on navigation. The home page has some text. This is where we have the moaned and a visualization page. This one has a button, and when I click this button, there will be a A p. I called using http requests that returns relationship data from characters off the game of Thrones novels. If I click it in a brief that data and create a network visualisation using two D three library. And in this specialization, each of the notes represent a character, and the links between them represent their relationships. And in the end, the guards are gonna add a little bit of interactivity. So with the click, any of the notes they'll change their color and increase in size. And then a double click there should back down again become bread. So that's what we're gonna build. Now let's take a look at what we're gonna need first. So that's close, This one For now, we're gonna need a couple of tools. We're gonna browser. I'm using chrome, but Firefox and Safari will work just fine. I need a text that it's a I'm using atom. And if you're just starting out developing, especially in javascript atoms definitely a good way to go. It's a free and open source editor. It's actually built in Charlotte script. And yes, it has tons off themes and extensions and plug ins. Give it a go if you're not sure what to use. And then I'm also going to use a terminal emulator or, you know, a shell I'm using. I term to at the moment, but any terminal that comes with Always X or any little distribution will work just fine. Make sure you have knowed installed, however, so let's take a little look at the code that is provided from previous sectors. So I'm in the folder right now, and there's a bunch of loose files and two fold us up on public first thing to look at us. The Pakistan Jason, which is the heart of any North application. It has a couple of things like Name the Russian and a description and a test some dependencies as well, which are very important because we don't need those to run our local server to serve itself. It's in the in next, chess with express service of what we're gonna do later is type note in next up Js, and that will run server for us now, all the service side code starting the APP folder as the controllers, um, the models at the fuse. These Jews template files that will be rendered into HTML and then displayed in the browser just a quick recap about what's in the template off initialization page. It extends the base few, which means it'll include things like the navigation, and we don't have to type that code in any page that wants to use navigation justified once , and then we extend using the other fuse linking a style sheet. That's just a simple CSS file that defines things like the color off the links between the notes, and we have the content block that has the title you've seen before. Big dissociation on top. It defines the button, and we have an empty thank you rude element that will later populate using the three with our visualization and then for that to work. We also include some Charles could fires down here first wanted to do three library, and then the 2nd 1 is power initialization dot Js where we would put our own code. One thing to note here is that this button has an attribute coat on click. So anytime you click this button, the following coal is executed. In our case, it calls the load data function. No, to get to that load data function, take a look at the public folder. This folder holds all the client side JavaScript cold. So we have the lip folder that holds all the dependencies of the libraries will use. In this case, it's only 33 Laboratory, actually, to look at that, um, we have a visualization folder that has anything to do with specialization. This case, it's our little style sheet, just defining what the notes and the links look like. An untested association doctor. Yes, which is where all domestics don't happen. So this is what we're gonna get later from the FBI and then creative visualization. So we have to very empty functions at the moment. The 1st 1 is the load data function on. Remember, this gets called whenever we click our button. So we're gonna load data from the beckoned in this one, and then we're gonna send that data to the second function that will create the conversation on our page using t three. So in order to get started, we need to use the code that we already have. Meaning we need to run the server. So the client side coat get execute, gets executed and provides is with the FBI so we can get some daytime in this part here. So let's go to our terminal. I'm already in the folder that holds on the code, so you can listed here actually having a shortcut for that command. So she was seen typing else. It's just the one above, Um, what we need to do is basically randy in next up Js that will create a server and provide the A p I so we can work with it. That's a little problem. Still, if I run this, it will crash because they cannot find express module. It needs to run. So just clear my screen here. What we need to do first is we need to install any dependency. Luckily, because this is an NPM package you can show just from NPM install. Because if you remember taking a look back here de packaged up, chasing defines all the dependencies. So I'm gonna run NPM store. Actually, NPM I It's enough is if you type that a lot, actually save some time. And after a short moment, we have all our dependencies install exactly a screen again you can see here I cannot hide note Index that she s run it. One was connected to the database, the express service running and we can start getting some data from or a P I. If we go back to that personal navigate to local host 3000 we already get our That's a page because the service running and these what you can see here are rendered temple. It's still defined in service. That coat the visualization page exists as well. It has the button. However, when I ticks, nothing happens which makes sense that's going back to our code and opening the visualization dot Js file This load data function is called soon as they press the button and all of dust. It is writing this little message to our console now because this is running in browser. We need to look at the process consul to see the message in Google Chrome, the developer tools have the console safari and five foots have very similar tools. Chrome. If you clicked a little options button up. Here we go to more tools and developer tools. Or you can use the shortcut, which is our command J or Control Command J and Windows. And you can see up here we have a little message on sexual clicking this button. We'll get more messages. So far, so good. Let's take a look at what we need to do to actually get some data for my a p I. We will be using the classic native travel script way to do it with an XML http request object If you're lucky enough to the Onley for modern, processed, upcoming version of JavaScript, actually has a new I P I called fetch if you're working in mode. You can also use it already, but for now, which is going to use the classic way. And as you can see, for little example here, it's really easy to use. So it actually get going. When you three steps, we need to create the interview request. Then we need toe define behavior after a successful request. So what are we gonna do with the data that we received? And in the third step, we just need to send it off. So let's started at the beginning. Create a new variable. It holds our request at it, holds instance off a XML http request right. That's the first step done. Now we need to define what we actually want to do. If the request was sexed successful, and to request object implements a number of events, those will be called at different times off the request in on the interaction with beckoned . So, for example, when Theo the request next first contact with the beckoned there'll be an event when the beck and start sending data they'll be inland, and they're Austin's also event that gets fired soon as the request successfully, it has transferred all the data from the beckoned and that's the one will be looking at so we can to find the unload. You don't. What we're doing here is basically final function that gets called every time to request stunned loading data from the beckoned. And now we can create a new variable called response that will hold the data sent from beckoned to access it. We need to access to request. In this case, we can accidents existence with the this key word, and then we'll get the response text. So that's all that we need. However, this response text as assess its a string and in our case, because we know what the A p I sending Jason data, this Texas actually adjacent string. So what you need to do to use it as a transcript object This meat tracing dark parse this response test. And now here is where we defined what we actually want to do with the data in this first video. We're not gonna do anything with it. The next storm, we're gonna transform it in a way that we can use it with d three later on. But for now, let's just log in to the console so we can take a look at it. That's all we need to define here. Third step on the final step off. Sending http. Request this. We need to. Instead, she ated using the open function and the open functions To know what kind of http request type we are sending descending a death request. It would also have to define the your l that we sending that we are sending request to In our case, we're staying in the same domain that we're running currently. So on the local 3000 so we have to do is defined the route on that domain. So that'll be a P I. And then the important point relationships and the servants define. If that's a get request coming to that route, it'll turn the relationship tater. And finally they have to send it off. That's it. It's all we need to get data from the beckoned using an http request in transcript the native way. No external libraries needed. So let's get back to our browser, reload the page and click the button again. As you can see, we get returned an array of objects. If you look a bit closer this objects our relationships off characters. Um, so we have an object that has a couple of, um attributes. Some of them are for internal use of the A P I. And here are the interesting bits, which is the source of the interaction in the target off the interactions of two characters and the waiters all. And these are all two foot interactions. So that that's it for this video. In the next video, I'll show you how we can transform these interactions so we can create the graph. Isn't the three Thanks for watching and see you in the next video. 28. Data Visualisation - Demo 2 (Optional): Hello and welcome back. This is the second video for the data visualization lecture. In the first video, we talked about how we can use http calls to retrieve data from an A P. I in this video will be taking a look at how to transform that data so we can use it in the next video to create a craft specialisation like the one you can see here. The data we retreat former FBI in the first video was a list off relationships between characters in the game off Thrones novels. And you can actually see these relationships as the legs between those points in this graph . Now, to build a craft like this, we need two things we need to list of relationships. So the links we also need the characters themselves would represent the notes. So what we're gonna do now is gonna go through the list of relationships and extract a unique list of names so we can connect them, as you can see here. So let's take another look at what we did in the last video. I'm gonna go back to the terminal and I'm in the folder. Where are all our code? this host, especially in the top folder that has the index dot Js file. I'm gonna start running out server again using the command node in next up Js so are back and this running on Port 3000. I'm gonna close this one and go to a local host 3000. Go back to our visualization page. And as you can remember, when I click the button, we will get data from the beckoned, but normalisation is generated yet I'm gonna use the old command J shortcut again toe open up the developer console and grown. And you can see here is the list of interactions that we got from or a P I in the first video. Now each of these interactions is actually an object that has a number off attributes and the ones we're most interested in here our source and target, which are the source and target off the interaction or a relationship. And then the key for these they're the values for these attributes, names off of characters from the game of Thrones novels. So let's go back and look at the code that we generated in the first video. We're in our visualization doctor s file in the public section off our code. And we populated this load data function by generating a HDP request defining what we're gonna do with it after it successfully loaded the data and then sending it off. And now we're going to start working a bit more with this on load function, and we're gonna transform the response data that we had in a way that we can use it with the three later on. So the three for generating a craft initialization actually expects to things the list off note objects and the list off relationship or link object. So we already have a list off relationship objects. And the first thing needs to do now is to extract the unique list off note names thought we're gonna do to take another look at our browser. We're gonna go through all of the link objects on this off this list and for each of the source and target names, we're gonna check if this name is already part of our unique name list. And if it's not, we're gonna add it on to do the same for the target. And we're gonna do this for all of the objects. So first thing to do great. A new variable called names. And this list of names is going to be extracted from the array of relationships which is stored in our response object. So I'm gonna use a functional approach here using an array function that is native to travel script called reduce. I'm gonna call this reduce function on the response object. Oh, this array of relationships, which is starting this variable and what reduced us it is, goes over an array of objects and applies a function to it to each of one of those. It also keeps an accumulator variable that gets filled up as we go along. So what we're gonna do it than a greater function on dysfunction will be applied to each of those objects in this case dysfunction. We will extract the names and then back here we have anti array. This is a list of names. In the beginning, it's empty, and as we go along, we'll put names and their if they don't already exist. And by the end of the reduced function, this variable will hold filled up array back here, which is the list of names and dysfunction up here. We had just gonna create and another was functioned right here in place. So this reduced function is a higher order function calling this anonymous function on the elements off the array and dysfunction gets two parameters. The 1st 1 is to accumulator. In our case, that's gonna be an array. And the first step, it's the empty one. And then the second step, it's gonna be whatever we did with it in the first step. And it also gets a value in our case, that's gonna be a relationship that is stored in this response array. So now we would need to do is we need to check if the target and source names for relationship are already part of our names, objects, a list of names and, um, the list of names. The current one is gonna be starting our accumulator. So what we're gonna do is check if dis accumulator already has this name as part of it. So I'm going to use the index off function on devolve thought target. So dis checks. If the name that's stored in the target attributes off our relationship object, it's found anywhere in our list of names. And if the dust it will return the position off it in the ray. And if it is not already in there, it'll return minus one. So if the name is not already part of a list, we're gonna add it. So we're gonna push the name to our accumulator array, which is the list of names, and they were going to do the exact same thing except for the source name source equals minus one. Then you're gonna push this source name this Well, it's me. Now. We potentially now modified this accumulator array by adding one or maybe two names. In any case, we wanna return the accumulator. So in the second step or in the following step, this is now the new list in which there are any names to Edward that we added in this step . That's already enough to get a list of unique names from our array off responses. Gonna save the file, and I'm gonna lug it to the console so we can take a look at it going back. Excuse me? This type of right here going back to the process gonna reload the page, press a button as you can see we get a nice list off unique names. So one more thing that the three, it's a unique with, um, we already have a list off interactions or links between names, which are the relationships, except that if we cannot work with the names themselves instead, it needs i ds and the ideas are going to correspond to the position off the names in this array. So the next thing we're gonna do is we're gonna go over the response array, which holds our relationships one more time, and we're gonna replace the actual names with the position off those names in the names array. So we're gonna use in this case, we're gonna say new variable and these are gonna be our links. They're going to use in the visualisation later, and that's gonna be response. That map, this is another travel script array function, and it's very similar to to reduce, except in this case, we are not going to keep any accumulator. It's just gonna pass this and enormous anonymous function that will be applied to each of the relationships. In this case, dysfunction only gets value off the current position in the array. What we're gonna do. You gonna replace the source with the position? Um, off this name in the names array. It's gonna be another name. Start index off. No, that source. I'm gonna check where in the list of names is this name, and then replace the name with that number. We're gonna do the same for the target as well. And then we're gonna return this modified relationship so it'll be replaced in the array off relationships. We're gonna take another look at what that looks like. And I'm gonna look both the names and the links reload data. So now we have the list of names appear and we have a list of relationships. Except this time, instead of actually having the name grand here, um or actually Ayman, right here we have a number one, which is the second position in the names array. Corresponds to Ayman and the Tigers. This position zero, which will be grand. So that looks pretty good. Now we need one more thing. Toe work with D three a z. I mentioned before. The three actually needs a list off objects that represent the notes. Currently, we have a list of strings that are the names, and now we're going to need to transform those names one more time into a list of array. So basically, the list of notes looks like this. It's an array, and disarray has a list of objects and we're going to give it just one. Give it just one attribute. Cult name. So by the end of the next transformation, we want to have a list off on Ray off objects with the name attribute corresponds to the name. And this time you're going to go through the names using the four each function, another travel script, the ray function, and this one also takes a another was function, and that gets the current value. In this case, it's name. And actually, whatever you call this variable is relevant. You can call it X if you want. But in this case, we're going through a list of names, so name seems appropriate. And now, for each of those names, we need to create a new object. So we need one more bearable, which are gonna be our notes. That's gonna be an array. And for each of the names, we're going to create a new object so new note object that has one attribute. Code names. And that will be the name variable from up here. And then we're gonna excuse me. That should be notes as then multiple. And then we're gonna at this note object toe a list of notes that we're gonna use later. Now, this is really all we need. I'm gonna take another look at that just to make sure. So our notes now look like this. It's an array of objects now, and each object has one name attributes. So we have now a list off note objects told our names and a list of links which hold relationships between those notes and that's already enough for us to start to get to work with the three. And we're gonna do this in this great initialization function in the next video. The justice finishes off we're gonna do is we're gonna pass the state, are we just gathered from our FBI and transform in the correct format. We're gonna pass it to this create initialization function down there. That's just calling the function with the notes notes on the links as links. And that's it. That's already enough in terms off data information in the next video, we're going to take a closer look at D three. And how do you use to state out to create our craft? Thank you very much for watching See in the next video. 29. Data Visualisation - Demo 3 (Optional): Hello and welcome to the third demo. Video off the data visualization lecture. The 1st 2 videos. We spent some time getting data from an A P. I using an http request and the second video, we transformed that data so we can start using it for our visualization. Just a quick reminder. This is what we're building this a d three craft specialisation. And at the six relationships between game of Thrones characters? No. Let's start getting into it. Taking a look at our code. We have the functions that were you were looking at before. This is the Lord data function that we dealt with in the 1st 2 videos. Now we're going to spend some time to fill the creative visualization function down here where all the actual initialization will be built. Taking another look at the official a station theme. A few in our APP fuels folder. Um, we can see that we already imported the D three library. So because of that, we can start using D three in our own visualization file, which Hurst You create initialization method. So let's get right into it. There's a couple of steps we need to do. We need to create the physical stimulation off the craft that D three does for us. And then we have to start adding elements to the website toe are dom, so we'll start off with the first bit. Um, we need a couple of settings for a visualization. You don't just set a fixed height. And with for it, we don't just use 800 pixels. You can use whatever fits your screen best and just play around with it a little bit. So that's two things we need straight away. And then we also need a nodes and links that we got from the previous function found that we initially got from our e p I and then transformed. So we'll create another variable recorded force because it's gonna be a force directed graph layout. And now we can start using do three. That's just typing D three and we want a layout and it should be a force layout and now will use function chaining that D three uses a lot to set some settings on this, so we're going to set the charge, which is basically the gravity setting, and the gravity in this case should be Myers to 20. This is the fourth force, which with which the notes will repel each other. So if you set this toe a lower value, or actually ah, higher value sleigh, let's minus 10. The notes would stay closer together. And if it's something higher or more negative, like minus 220 in this case, they will be further apart because the links act like springs and notes are actually like magnets repelling each other. And then there's also the link distance. This basically tells us how long are springs are gonna be between those repelling magnets, and now we need to set the dimensions. This actually takes an array of two numbers heightened with, and we could just write some numbers in here, but we already set them up there, and it's always good practice to keep settings like these that you might need in several places outside of the actual coat right here and put them at the top or somewhere. You can just change in one place. It needs another. So more things. It needs the notes, and we already generated those in the previous video, so we can just give them the notes that are coming from a peer, but often it's the links. It's the same deal here. And then finally, we have to start the simulation. This is enough to tell D three to create a force directed layout for us using the notes and links provided and start a simulation and you go back, um, to our site. This one's actually currently empty. Yes, I still need to start our Web server. This one's to demo off the finished person. We're going to look at our current state gun. Local host 3000 the sensation going to run it minus You can see it's the Old State from before now in the background, D three is already calculating note positions and the craft in itself. However, we haven't actually told the three yet how to display it. So the next step we need to do is we need to start acting SPG elements to the page. And if you remember in our this realization fuel, that's this empty element with the I D route. And if you take a look at our browser and using the developer tools, you can look at the website. There's this route element. It's currently empty, just has the attributes route so we can identify it. And other than that, there's nothing in there. So we're now going to start using D three to manipulate the Dom by adding elements depending on the data. So because it's gonna be an S e g element, we're going to call the variable xvg Usti three select. And this will allow us to select a dom element in this case, the root element. And because it's half the I D route, it has the prefix of ah hashtag pound symbol. And then you want to add a new element, which is an SPG element for our visual estacion. We're gonna append element of type SPG that has several attributes. It has a what and again you can just use a variable. Another attribute. That's the height. If we now take a look at our side, reload the side, press the button. We have now added a new SPG element off our defined with and height. No. The next thing we need to do is to add a number off elements that represent a craft depending on our data and in this case, so we need a number of links and notes One of the fine what a link should look like. And for that, if you can remember or a lecture we're gonna use, um, de three way off adding data, which is by selecting all elements with the class linked attached to them, which will be none in the beginning. And we're gonna compare that to our data. Our data, which are stored in the links variable and this week will now do a comparison between the elements found up here and the elements found in here. And that will be a like a Venn diagram comparing these two sets. And then we have three, um, subsets we can access and we want to access anything that's in here that doesn't have a representation in the legs already in the page. And for that, we used the enter function and for each one off those elements, we want to upend a new element to our graph, and it's gonna be an element off tide line and that will already append a line. Now we already gave you a visualization Nazi SS file. That has to simple classes one for the style of the link and one for the style of the node , and it just has the color for the stroke and a bit off opacity. And the note has also has a color and again for the stroke and the setting for the with off the stroke that to get a nice little white, um, stroke around it. So we're gonna set this one as well. So we're gonna set any line element, will get a class attribute with the value linked, and that's gonna be enough to define the length. Now we're gonna do the same for the notes. Variable note sug select all elements the class note attached to them and compared them to the data and notes just made this need to be function. So then it the period in front of them and then give me anything that's in the data, but not in the page. And for any of those penned a new element toe our SPG graphics in this case, a circle element. And this one would also get the attributes class the value. This time it's gonna be note and realized that this one dysfunction to the class at route is not just important for the style off the class, but also because we are selecting any node element here. So Ellie element with the class node. So it's not just for the styling with CSS, but it's also a label. And then, because thes notes are circles on the circle, is that defined SPG element that needs another attributes. And this attributes the radius of the circle we want tohave and this one it's actually defined by the are attributes and our needs the number. And that's gonna be pixel so I can technically put five here. But as we said before, that's maybe not the best practice and step. I'm gonna pretend there's a new variable called Note Radius, and I'm gonna go back up to my settings and actually create that variable knowed radius. Set it to five. So now we defined the style or yeah, the style, um, and this case off the radius for the notes. And we told the three that we want a bunch of links for our links and a bunch of circles for our notes. Now let's go back to our website, refresh the page so the transcript gets reloaded. Andi, click the button again. As you can see, something has happened take a look into the root element again, we now actually have added a bunch off lines and further down circles in tow. Rs witchy visualization. Now, if you look closely, you might be able to see that, like a little something on the top left off our screen. And these are actually our notes. So this is like 1/4 circle, and it's because this is these are our circle elements, but all of them are positioned at position 00 Which and the visualisation world means the top left corner off the off the screen. So it's like the classic Cartesian, according the system that you probably know from your math classes except zero serious actually on the top left. So one more thing we need to do, because in the beginning we created our, um, force layout. That's this bit here that tells t three to take these notes and links and start a fourthly out simulation off the positions. And we told it for every link we want a line for every No, we want to circle what? We didn't do it. It's actually connect those together, meaning we now need to tell these three actually the position for these links and notes should be whatever you are calculating over here. And in this case, we actually start looking into events. So we're going to do and we need to do this down here because they're gonna need the note and the link, So we need to do it. After we define those, you cannot go back to our for stimulation, which is stored in the force. Variable fourth start on and on. It's the JavaScript way off dealing with events. So whenever a tick event, it's fired. I want the following function. Toby called and tick this the event that gets called every step off the simulation off this force layout. So whenever it's calculated new positions, this function will be called. So what we're gonna do now, every time the three calculated new position for notes, you're going to start adding attributes to our notes. So in this note, variable we still have stored or any element with class notes, and after calling this, there will be a class note element for any off our nose in the data. So what we're gonna do now on every take, we're gonna update two attributes off our notes, and those two attributes are defining the position. So the 1st 1 this c X arrestee position in the X direction and it's gonna be to find by a function. And in this case, this gets a data point. And that is the three comic convention. Um, this data blind is actually gonna be our, um, node s calculated in the force layout appear. So what's happening in this calculation is that we have our note Element two can remember from the, um, from the lecture before, and that one has a source and a target in the case off the, um, links and just the name in the case of the notes. So we're gonna do every time dysfunction is called, we can access the, um, note element used in our force layout using this the variable. So we're gonna do it's gonna set the exposition off a note to whatever D three has calculated for the explosive position. And, uh, um, graft simulation, the physics simulation that calculates the position. So we're now doing Yes. We're gonna connect the exposition off the node on the screen to the exposition to the node in the physics simulation and we're going to do the same thing for the white position turned this time. Do you? Why? Let's try and see if that works. Uh huh. And now all the notes get the position. That piece we have calculated for them in our physics simulation next to me to dio iss do the same thing for the links and let me just make that look a bit nicer. In the same tick event function, we're gonna also do the same toe are links. Except this time, we need to define four different positions because the link has a beginning and an end position, and then there'll be a line between those. So I'm gonna start off using X one, which is the exposition off the beginning off the line. And it's gonna be the same thing. Function D. And this time, all link element has source and the target and those get separate positions calculated by the physics simulation. So we're gonna say sore start X and, um, next one gonna be the white position after beginning off the line. And this one what did that target. So excuse me. Source Thought why Target's gonna come next. No, the 3rd 1 This X two exposition after end of the line target missed currently stands this time the target exposition and finally, the why to attribute watching the returned the d dot target. Why no, we set for each of the link elements. You said the X and Y positions off the source off the link on the X and Y position off the target of feeling. So after saving that fire, going back to our simulations. Reload. Close this over here. Reload the page, the buttons. It's what we do have a nice craft with notes and lengthen between them. Now it doesn't quite look like our demo in the beginning yet because that doesn't have any colors. And also nothing is happening when I click any of the North. So that's gonna be a couple of more things were going to do just for fun. So we added some styling using the classes, um, note and link in our visualization file over here but all day to find this a stroke, Um, and now we're going to try it and find the colors off the notes, depending on the name off the character. And for colors, the three um provides a number of functions. The first thing we need, um it's a scale. We're gonna define this one appear again just by going, um, bar color equals d three scale category 20. So what? This does this? It returns a scale off 20 different values, discrete values. We're going to use those to select 20 different colors, depending on the name off our character. So this function that this returns a function so we can now call this color function with any string, and it'll just return us a color. So going down toe a note again. And now we're gonna call another function on this one called style, and you want to fill the note with a certain value and this again take the function and it gets the D element, which is the current data point datum. And we want to set the, um, Phil element off that turned datum to whatever the color function gives us for the name. And we know that our current data point has this name element because we defined that in the last lecture that all the notes are, um, objects with this name attributes going back to the site reloading again. You know, all the notes have different colors, depending on the name off the character. And you can see that some of them, um, appear multiple times like the red one, for example here. That's because we have about around 100 characters, but only 20 different, um, colors in our scale, so they're not gonna be the same. Um, but if you're if you really wanna have unique ones, you can also write your own, um, color function, for example here instead of using two d 31 Um, just play around. But if you like, So there are two more things that have been in the demo that we haven't done yet. So one thing I'm going to do is I'm gonna define the with off our links dynamically, depending on the weight off the relationship object that we got returned from the a p I. So again, we're going to use the style function. But in this case, it's not gonna be to fill. It's actually gonna be the stroke with we're gonna define the width. Oh, the line between two notes again crunching receives the current data point. Remember the disk it's called for any element. Um, that has glass link attached to it. But this function returns. And, um, we could just return the the wait here because all of the link, all of the relationships that we got from my p, I actually have, um, await attribute. Now, if you take a look at that well, doesn't really look too nice, because there's a big difference between some of the smaller ones and the bigger ones. And some of them are quiet. Um, large, so it becomes a bit ungainly. So what I'm gonna do is I'm actually gonna use another built in. That was good function from the math library, Um, which is the square root. So I'm just going to square the weight, and now it looks a lot nicer. As you can see, the characters that I have more intensive relationships have no wider links between them than those that have like a less close relationship. If you remember the demo I showed you in the beginning of this video and the last few videos as well, we also can define a interactive behavior off the graph is a couple of things we can do. Um, if you like to see some more advanced examples go online and you can see things like dragging them around. So they respond nicely to input. For now, we're going to focus on making them clickable. And for that, we, um, are gonna add two more event functions. So we're gonna, um, take a look at to note. And this time you're gonna, um, implement a event on the note itself. So the note is a dominant, and the such it responds to click events. So if I click on it could register by the browser and will fire this click event on this note element so I can define what's gonna happen whenever this click event is fired. And I'm gonna use t three again and we're going to be. What I'm gonna do is I'm gonna select the specific note using t three and change some off its attributes. So I'm going to do it. D three thought select. And this time, because this function is called on the node itself, I'm going to select this. And now I can start transforming which ever note, I wonder the user has clicked on, and what I'm gonna do is I'm gonna set the attributes radius to 20 actually, because we already have a node radius. Let's just said it to whatever node radius waas times four If I saved that, go back, we load, run the visualization and I'll click on any of the links therefore, times to science them before Not it's nice, but it looks a bit abrupt. One of the things that the three is really good at is making consistence looks moved and nice. So we're gonna add a little bit more to this and you gonna add a transition. And this transition function needs to be called before the actual chance off change of attributes. So I'm gonna just tell it to transition. And then I also need to define how long that transition period it's gonna be. And this is Miller sentence, and I'm gonna make it nice and slow so you can see it. So 750 milliseconds for safety file and go back and reload our graph again. Now click any of the nodes, get it? It'll nice and slowly transition from one setting off like radio size to the next. And we can also just for the fun of it, Maybe at another, um, transition. Well, let's say we want to change the field color and I'm just going to change, too. Read. So if I click on it, it will increase its radius by times for and it fill the color red. And if you take a look at the E three documentation, that's a whole number of things you can do with this. And it's a lot of fun to play around. I just spent some time of it if you're interested. No, this is fine. But what if you want to go back? So that's a number of things we could do. We could, for example, start storing the previous size or color, you know, note itself. And then on a different event, go back to that. But for now, we're gonna keep it simple. Just gonna define another event on the notes. A note on double click. I want something else to happen more specifically, Um, again, I want to select the current note using D three and again, I'd like to transition nicely the same duration, and I'm just gonna return the attribute to its original radius. So note radius again. And I'm just going up, said the color two white to say OK, I've been here before, but this one has been clicked, so now I can click it. It'll get big and red on a double click. We'll go back toe white. So now, with a few simple steps in a few lines of code, we've created nice and interactive graph initialization using D three. There's a number of things you can add to that play around with it, and it's a lot of fun. Um, there's a whole bunch of documentation and tutorials available on D three online to take a look at it. We have been using the washing three FD three doesn't upcoming Russian for that changes some of the function and the way you interact with it. Um, so take a look at that if you see this video and a couple of months from now, so but the basic principles are all the same. Um, so it's just that some of the functions have been simplified or moved around a little bit, So this is all we need to create this initialization. We have our force layout for six simulation that calculates our note position. We created a new SPG element on our dorm on the HTML page two, um, actually populate with are, um Mutualization. We created a bunch off link and note elements in S E gs. So lines and circles And then we connected the acquisitions off the calculated believe the calculate positions off the physics simulation to our SCG elements on the page and then also added some events. Um, for interactivity. I really hope you enjoyed thes demonstration videos. Toe are with solicitation lecture. Um, thank you very much for watching. 30. Course Summary: congratulations on finishing the serious of lectures about developing a Web application using the power of no GS technology acquired Intellectual. Any of the exercises will enable you to develop your own Web or mobile applications entirely in JavaScript. In this year's of lectures, we first covered the language basics, explaining the syntax and structure of a jobs program. We then saw that you can use objects and functions to structure your code. JavaScript is no longer a language is just intended to be used in the Web browser. Instead, we saw the JavaScript can now be run on the service side, allowing you to write JavaScript code both on the front and the back inside. Finally, we saw that you can use JavaScript to turn data into interactive visual elements. So by completing this course, you should now be comfortable creating an end to end jobs group application. We encourage you to continue and explored advance topics such as learning more when how to use Web development frameworks or how to take advantage of functional reactive programming . We hope you enjoy the set of lectures and wish you good luck working with JavaScript.