![]() ![]() IJavascript is an npm package and requires: Ijsinstall -working-dir=/path/to/working/dir While storing things in window is almost NEVER a best practice when it comes to JavaScript development, I think that we can accept this compromise to keep the code a bit simpler.To run the Node.js session in a different folder: The UI needs to update the chart every time the user changes one of the selections. The only difference with the previous code is that we need e to filter the JSON according to the user selection. One containing the list of countries (this will be a multiple select, so that we can display multiple countries at the same time).The idea is to insert in the page two HTML select elements: This list needs to be saved in the xAxis property of the chart’s options: xAxis: The x-axis values This will contain all the dates we want to display. ![]() We need to create two objects: one for the x-axis, and another one for the y-axis. The “options” are simply a JSON object that instructs ECharts on what to do.īesides all the visual nuances (colors, tooltips, etc.), the most important part consists in generating the data starting from the JSON above. Set the chart options through the setOption method.Initialize an ECharts object on that element.create the HTML element that will contain the visualization. ![]() Simply put, the ECharts viz generation works in three steps: The second parameter describes what JavaScript callbacks need to be executed after Python. Without delving too much into details ( unfortunately, it appears that this function lacks of good documentation), the function accepts a string as the first parameter: this string is the actual Python code that will be executed (hence we stored everything in a single function to make this part cleaner). Within a %%javascript cell, we can execute Python code using the () function. While storing things in window is almost NEVER a best practice when it comes to JavaScript development, I think that we can accept this compromise to keep the code a bit simpler. we are going to save the JSON string in the global variable window.outputVar. A very simple way to make the data accessible to all the other cells is to save the output in a window property: i.e. To make JS and Python communicate we have to store somewhere the result of the get_data() function. Later, we’ll be able to use the above to store the ECharts object within the ech variable. For this reason, we are only going to implement a single visualization: a multi-line chart that shows the time series for each of the KPI available in the dataset. The topic of this article is not to create a super fancy chart with ECharts, but it is to show how to enable this functionality on Jupyter notebooks. *Google LLC “Google COVID-19 Community Mobility Reports”. Great we have everything we need, let’s dive into the code!
0 Comments
Leave a Reply. |