[SOUND] [MUSIC] In this lecture, I will introduce ECharts, a JavaScript library that makes interactive data visualization online. I will use LINCS milestones overview. A website developed for the LINCS project as example to showcase how to use ECharts. ECharts is a JavaScript library to draw interactive charts on the webpage. It is an open source project from Baidu and a mature commercially oriented product developed on industry standards. ECharts utilize HTML canvas element for drawing. It provides 12 commonly used chart types, and also offers 7 interactive components. I think the most important feature is that ECharts supports Big Data mode on the cartesian type of charts. It can draw up to 200,000 data points in seconds with the full interactive features, and ECharts is modularized. The link below here leads you to the ECharts official website. Let's look at the example web app. This app is basically an overview of the LINCS data to be generated in the next few years. It seems the LINCS data focus on marrying the consequences of age and perturbation and cell lines. It is natural to plot the signatures by perturbation and a cell line. The x axis is perturbation. The lexical graphic order grouped by perturbation type. They are three types of perturbations. 140 chemical perturbations on the left, 17 genetic perturbations in the middle, and 107 micro environment perturbations on the right. The y axis is cell line also in lexicographic order. Each symbol on the chart represents a signature to be generated. The signature type and its generation center is encoded in the shape and a color of each symbol. For example, a red square symbol means this will be a image signature generated by the HMS Data Generation Center. Mouse over this square, you can see what are the cell lines and the perturbations in this signature. So here it's the EGF perturbation, applied on the WM115 cell line. The chart is interactive, for example, click the pencil icon. You can draw a line on the bar. And click the two icons on the right to delete or clear the mark line. You can also look in the graph and then click the next two icons to restore the graph. For example, you can zoom in on the very small part, charts, you can still zoom in even a little. And then you can click this icon to zoom out and this icon to restore the graph to the original state. Click the last icon to download the graph as a PNG file. Click the icon and click, it'll be downloaded as a PNG file. In the rest of the slides, I will explain how to draw this chart using ECharts. I think the best way to learn how to program in JavaScript is actually to play with the example app and the resource code. So the source code of this app is hosted on this URL. You can follow these steps to install the app on your local computer and then play with the app. The first step is to install Git and and the Node.js. If you don't know how to install these two softwares, just Google it. It is very straightforward. This slide shows the structure of how the lecture is organized. First, I will show you how to import and initialize Echarts on your webpage. Next, I will show you how to config the option object. All the information about the graph is included in the option object. I've divided the options into two groups. Those independent of data and those dependent on data. And last, I will show you how to set the option on the graph and how to use the API to interact with the graph programatically. First, let me introduce a concept called AMD. If you ever wrote a decent size of JavaScript code, you will know that if the functions in file A are dependent on functions defined in file B, file B has be loaded before file A. But the following AMD API, you can word this by writing a code in modules that can be loaded in random order. Basically, AMD, the asynchronous module definition API, specifies a mechanism for defining modules such that module and its dependencies can by asynchronously loaded. The module definition in an AMD API is usually like this. It is defined in a defined function ID in the ID of your module. Dependencies are the IDs of the modules your module depends on. The factory is a function where all the code about your module is written, and the function takes dependencies as arguments. For example, on the right, they define an alpha module that it depends on full and a bar module. The full and the bar modules are passed as arguments of the factory function of alpha. In the factory function, full and the bar were used to define the new alpha module. Obviously, AMD enables user to write JavaScript being a object oriented fashion, and it helps eliminate definitions of global variables in the app. There are many implementations of AMD specifications. The most popular one is the RequireJS library, which is actually used to build the Coursera website. Echarts uses similar library called the ESL.js. An object oriented app always has a main function and entry point In AMD, in the require function. The files in the example app are organized in folders like this. First, we have app at the root directory. Under the root directory, we have the index.html page. Then we have three other directories, the data directory, the scripts directory, and the libraries directory. Under the data folder, we have the chartInput.json, which stored the data to be visualized in our app. In scripts folder are the scripts which we write for our app. Under the libraries folder are the libraries our app depends on, including echarts. All the code about the graph I showed you is written in the main.js file. The searchbox.js is another AMD module that implements the search function which will not be covered in this lecture. You can look into the source code to can see how it works. The require function in main.js is written like this on the right. First, we have a require.config function. The require.config is basically a mapping from the js files on the file system to a module name so that the require function knows that echarts/echarts means that Echarts.js in the directory of libraries/echarts/build/dist/echarts.js. Notice that by AMD convention, .js is omitted after the file name. So echarts/echarts equals to echarts/echarts.js. The ES and SE are the part of the modules for our Echart library. The scatter component and the search box, then we use echarts.init to initialize a blank chart. There is a div tag in the index.html page with ID main. So document.getElementById, select the div, and the echart.init function initialize the chart under the div tag. Option object encodes all the information about the chart including data, metadata, color, label, title, and etc. There are various pieces of information about the chart are registered as properties of the Option object. These properties are also called options of the chart. The options configured in the example app are title, tooltip, toolbox, xAxis, yAxis, color, symbolist, and series. Use ec.setOption to draw the chart after building up the Option object. Detailed documentation about how to configure each option is available on the Echarts website. So to use the Echarts, you do not need to have comprehensive knowledge about JavaScript. As long as you know how to give an Option object, making it interact with your visualization of your data is very straightforward. So the first option, which is the simplest, is the title option. There are three attributes for the title option. Text, subtext, and append. Text is a LINCS Milestone Overview, the subtext is an interactive plot. You can see that the subtext is smaller and the color is gray, depending on the title to the left of the graph. Here we set it at 0. Tooltip.axisPointer, so axisPointer is a property of the tooltip option. The axisPointer property showed with dashed crossed lines that mark the current mouse position on the chart. The short delay specifying the animation time for the axis pointer to appear. Here we set it 0 because we do not want any delay. There are two type of triggers, axis or item. If trigger's item, only when you mouse over an item, will the axis pointer show up. Here, we wanted the axis pointer to show wherever our mouse is on the chart. So we set the trigger as axis. The properties of the axis pointer itself, like show, type, lineStyle are straighforward. We just set a show to true to enable the axis pointer and we set the type as cross, as we can see on the chart. And we set the linesStyle as dashed and the y to sync the line. The next option in the toolbox option again, we use show equals to true to enable the toolbox. The toolbox defines the interactive components the user can use on the chart. Here, we define four interactive components of four features. They are the mark lines, the zoom, the restore, and the saveAsImage. For each of the features, we also use show equals to true to enable them. Now I've set the title property for each of the four features. For example, for the mark component there are three parents, mark, markUndo and markClear. The titles are the text that will show up when user mouse over the icons. For the mark icon, I set the title as enable of disable markLine. For the markUndo, I set the text as undo mark line. And for the markClear, I set in the text as clear mark line. By default, the titles on these icons are in Chinese, so I just translated them into English here. Obviously, all the previous options are independent of input data. The next few options will be dependent on data. So now let's look at the input data first. In the overview chart, each item is a signature with four pieces of information. Pertubation, cell line, asset type, and the center. We set a pertubation as x-axis and a cell as y-axis for the pertubation of each signature is uniquely determined by its pertubation at a cell line. We then enclose center and color and assay type as shape. In input data, as you can see, there are four corresponding fields, perts, cells, series, center. Assays and the tooltip. The series in the actual theta each signature is represented as a coordinate of two numbers with the first number being the index of the perturbation and the second number the index of the cell line. The other perturbations and the cell lines that are next to the coordinates are specified in perturbations and the cells. This perts equals to perturbation. Each perturbation object in perturbations has two attributes pert term and pertClass. Each cell object themselves also has two attributes, cell and cellType. The coordinates are then grouped by center and asset so that signatures of the same center and asset is grouped together in an array. Your series is composed of several missed groups. The center and assay information is center assay arrays has a one to one mapping to the servers groups. The tooltip is a helper dictionary that maps each coordinate to corresponding center and answer. To load the data, we use the jQuery function, jQuery getJSON to load the input data and synchronize the input variable. In this line, we set up the xAxis. Since our input coordinates are numbers so the type of xAxis is set to value. The name perturbation is the name of the xAxis showed on the right most. The formatter is a function that takes x coordinate on the xAxis and formats it into an axis label. Here the perturbation attribute in the implemented data comes into play. Input.perturbation[v-1].perturbation get the perturbation name and the current perturbation. We use V-1 because the index starts from one, not zero in the inputted data. The yAxis is pretty similar to the xAxis. We just change the name of that axis to cell. Here, we set another attribute for the tooltip option. This is actually another formatter. Then it will format the content. Then it will show up when mouse over an item. The parameters argument in the coordinate of the mouse hovered item input the perturbation's parameters value 0- 1.perturbation. And the input the cells parameter is value 1- 1.cell. I used it to get the perturbation and the cell line name of the Harvard item which makes up the first line in the tooltip. The br is a new line character in HTML, the input of tooltip parameter is value 0. And then parameter is value of 1. The center axis gets the center and assay information of the Harvard item that makes up the second line in the Tooltip. The center color map and assay symbol map print defines a color for each center and symbol for each assay class. The color and the symbol list option are both arrays of the same and the input.centerAssays, with color and a symbol mapped to the predefined center and assay in the same order. Suddenly, we set this series option. The series is an array of several coordinates groups. Each coordinate group is defined by centerAssays and it has its own color and symbol. Each coordinate group is coded as a group of symbols on the chart. Group.names specify the name of the group, group.type tell the Echarts that the data will be plotted as a scatter plot, you can see that only until here that the Echarts realized that the chart is to be drawn in the scatter plot. Which indicates that you can mix grouped type in the same series, on a job different with parts on the same chart, here we only use scatter plot so the time is the same for all groups. Group data is the data in the group as defined in the input.data. Then the proteomic and the image if statement is used to customize this symbol signs from proteomic and images symbol. And lastly, we push the build group object into series. Now, we have finished building the option object. And then we use myChart.set option the object to set an option to the chart and you'll usually be able to see a scatter plot now. Echarts instance also provides API for customizing the interactions with Echarts from outside. The example code below triggers an item click event whenever an item is clicked and sends detailed info about the item to any registered listener. Okay, here is the end of this lecture. [MUSIC]
