00:00:14.580
Hello everyone, first of all, thank you for having me here at Paris.rb Conf 2020. Today, I am excited to present the topic of my talk, which is "All-in-One Interactive Plotting Using Daru View." In my presentation, I will be introducing you to Daru View, a recently developed library for data visualization in Ruby.
00:00:20.110
Before we delve deeper into the world of data visualization, let me tell you a little bit about myself. My name is Prakriti Gupta, and I have managed to learn a bit of French, but I still struggle with its pronunciation. I am a Senior Designer at NIT Hamilton in India, and I participated in the Google Summer of Code program in 2018, which is a distance internship program for open-source contribution.
00:00:36.699
In that program, I was responsible for enhancing the project overview and was also a contributor to the larger project, Daru. Now, I would like to take you on a quick ride with Daru View so you can know what to expect in the following slides.
00:01:07.210
With Daru View, you can create a wide range of charts, including maps. For instance, here is a map of France that I created using Highmaps. With this map, you can zoom in and out, hover over regions to see different areas of France, and download it in various formats such as PDF, PNG, and SVG.
00:01:24.100
Daru View not only allows you to plot a chart but also to customize it. I utilized CSS for customization and applied several options to configure this chart. Wouldn't it be boring to have just one series of data in a chart? Here, I've presented combination charts, utilizing two data series for plotting. This is highly interactive; you can click to display only one series of data and add it again with just another click.
00:01:44.140
Daru View is not just a visualization library; it accepts data in various formats beyond the standard array data that JavaScript libraries support. For example, you can also provide data in the form of Daru Data Frames or Row Vectors. Daru Data Frames and Row Vectors are data structures that help in storing, analyzing, and manipulating data. Has anyone here heard of Pandas in Python? It is used for data analysis in Python, and Daru Data Frame is similar to the Pandas Data Frame. Here, I have selected a sample dataset of the top 50 Spotify songs from 2019, which is formatted in a Daru Data Frame.
00:02:31.140
I have utilized the 'platinum' column representing the track names and the 'liveness' column for the liveness of a song to plot a column chart in Daru View. This column chart displays that the song "One Thing Right" has the highest liveness score of 58. These are just a few examples of what you can achieve with Daru View.
00:03:20.000
So, what exactly is Daru View? It is a data visualization gem used for interactive plotting of charts and tables. This means you do not need to switch to JavaScript for data visualization; you only need a few lines of Ruby code. Why do we require Daru View? Firstly, it has some fantastic features such as seamless integration with any web application framework, including Rails, Sinatra, and Hanami. It works well with Ruby Notebook, which is the Ruby kernel for Jupyter Notebook.
00:04:01.660
The examples I showed you, as well as the overview, were presented in a Ruby Notebook. Daru uses powerful and popular JavaScript libraries like Google Charts and Highcharts, offering a wide range of chart types for plotting, from simple line and column charts to complex ones like candlestick charts. Daru View provides numerous formatting options to configure your charts, enabling interactive features, such as hovering or clicking on the chart for important information. Additionally, you can export the charts to different formats, including PNG, PDF, and SVG.
00:04:50.290
Now, let's look at the various tools available for plotting with Daru View. You can create plots using Google Charts, Google Tables, Highcharts, Highmaps, Highstock, and Daru Data Tables. To create a visualization with Daru View, you first need to set the plotting library. This can be Google Charts, Highcharts, Nia Plot, or Data Tables. After that, you need to create a plot or a table object by passing three parameters: data, options, and user options. The data can be provided in the form of a Daru Data Frame, a Daru Vector, or a format supported by JavaScript libraries.
00:05:51.000
Options refer to a hash that contains various configurations for customizing the chart. User options are rarely used features that add extra capabilities not provided by standard JavaScript libraries. You can then use the 'show' method to display it in a Ruby Notebook cell or the 'dev' method to generate the JavaScript code for the chart in web frameworks. Here is an example: I've set up the library to use Google Charts and created a plot object with a Daru Data Frame without passing any options. Then, I've displayed it in a Ruby Notebook.
00:06:55.080
In this example, I'm creating a table using Google Charts. The table object is created with an array of data, while the width and height of the table are handled through options. The methods 'show' and 'dev' are again utilized to display the table in the notebook cell.
00:07:51.060
Moving on to Google Charts examples in Daru View, Google Charts can be used for both charts and tables. In this presentation, I've utilized basic examples to showcase Google Charts in Daru View. Firstly, I've created a line chart using Google Charts in Daru View with no options passed, just data as a Daru Data Frame. Then I provided some options to configure the x-axis and y-axis of the chart and plotted a bar chart accordingly. The next example involves creating a Google Table with a page set to display only five entries per page.
00:08:44.360
You can even plot 3D charts in Google Charts using Daru View. By setting the 3D option to true, you can create a 3D pie chart. Additionally, I've provided multiple page and pagination options such as previous and next symbols for navigation. You can also add formatters for finer control over the display, such as color formatters, pattern formatters, and number formatters, which are utilized to prefix values in specified columns.
00:09:45.360
Furthermore, you can visualize multiple fields in a single combination chart. I've created a Google Table showcasing some columns while visualizing them in a combination chart, where five columns utilize a column chart type, and the last column utilizes a line chart type.
00:10:44.900
Next, let's discuss Highcharts. This visual representation depicts the basic components in a Highchart: the title, series, tooltip, legend, and axes. I've briefly mentioned some of the Highcharts plots earlier during my overview with CSS and multiple series data. Moving on, let's explore Highstock, which is an advanced version of Highcharts, offering additional features such as scrolling, a navigator pane, and a crosshair function to visualize time series data more effectively.
00:11:28.600
For instance, this is a stock line chart that includes markers and shadows. The circular points act as markers, and I've enabled them in the options settings. You can slide the navigator to view past data effectively because Highstock represents data over a time range. Additionally, you can visualize a broader range of data using the range selector. Other types of stock charts include spline Highstock, which lacks sharp line endings, step line Highstock, and area Highstock, where the area beneath data points is highlighted.
00:12:28.160
You can also configure Highstocks using options. For instance, I've set up a stylish scrollbar and a range at a particular value—showcasing a data range from 5.1 °C to 15.13 °C over a specified timeframe.
00:13:10.370
Moving forward, we can plot maps using either Google Geomaps or Highmaps. Below are some examples: this Google Geomap represents the population density of various countries, where denser populations correspond to darker colors. This map highlights latitude-wise data for regions in Africa. Additionally, I've created a Highmap of India, demonstrating how colors can vary with data, which can be useful for showing population density.
00:13:56.500
Here is a Highmap view of the U.S. population density with data represented in a series format as defined by Highcharts' official website. Alongside, we can also utilize data tables. I've explored the deployment code of data table examples involving the Netflix dataset, which consists of TV shows and movies available as of 2019.
00:14:51.300
The data table provides pagination options, allowing users to switch between different pages of data, and offers an option to specify how many entries will be displayed per page. Additionally, you can conduct on-the-fly searches by entering keywords and receiving results from any columns that contain the searched term.
00:15:43.840
To visualize multiple charts or tables in a single Ruby Notebook cell or side by side in a Rails application, you can use the plot list feature. For example, I created a column chart and a line chart separately and then combined them in a single cell using the plot list object.
00:16:20.530
Plot list allows you to plot not just similar types like column and line charts together, but also to combine different types, such as Google charts with Highcharts or tables with plots in a structured array. More examples of plot lists are available in this notebook.
00:17:05.280
Next, let's talk about implementation: Daru essentially generates the HTML code for the Ruby code you provide to visualize the charts. For this process, several dependent gems are utilized. One of these gems is maintained by SciRuby, known as Nia Plot, while Daru Data Tables were developed alongside Daru View.
00:17:56.840
Unfortunately, the other libraries, Lazy Highcharts and Google Visual, are no longer maintained by SciRuby, which restricts the flexibility to adapt to the latest updates on JavaScript libraries. Moving forward, our goal should be to eliminate these dependencies to make Ruby fully independent for data visualization.
00:18:37.000
That concludes the technical details. Now, I would like to share my personal journey with Daru View, which has been quite a rollercoaster ride. It all began when I decided to contribute to open-source projects and applied for the Google Summer of Code program. I searched for an appropriate project in which I could make impactful contributions.
00:19:02.390
I learned about the Ruby Science Foundation through a college senior who previously contributed. Although I had experience in data analysis using Python, I was new to Ruby, which felt challenging. Nevertheless, I embraced the challenge and introduced myself in the Ruby Science Foundation mailing list.
00:19:53.600
To participate, I wrote a proposal detailing what I had learned and submitted it to contribute to the Daru View library. I was thrilled when I got selected. However, I soon realized the journey ahead would not be smooth.
00:20:29.060
The path after selection was often rocky; there were moments when I felt the targets ahead were insurmountable. I learned to remain calm during these instances and found that dedication and persistence are crucial, with support from my mentor aiding me during tough times. Ultimately, I successfully completed the project and stand here today to share it with you.
00:21:31.540
If I can do it, so can you! There is ample room for improvement with Ruby in scientific computing. As Ruby developers, I truly believe it is our responsibility to give back to the community. I feel strongly about my obligation to contribute, and the truth is, it isn’t that difficult to start.
00:22:29.280
Diving into open-source contributions can make your GitHub profile look impressive. When thinking about where to start, I suggest introducing yourself to the SciRuby mailing list. The incredibly talented individuals in the Ruby Science Foundation are always willing to provide guidance.
00:23:14.200
Here are some popular gems in the SciRuby organization, among others: Statsample, Narray, etc. I encourage you to explore these projects and contribute.
00:24:07.630
This is a link to the SciRuby repository, where your contributions are always welcome. Below are useful links to help you understand the usage and codebase of Daru View.
00:24:37.920
If you’re interested in the work I did, check the Google Summer of Code 2018 blog on the Ruby website or the wiki page covering enhancements made during that period. I want to extend my heartfelt thanks to my mentor, Shakya, the author of Daru View, to the admins of the Ruby Science Foundation, and the Google organization for running this fantastic Google Summer of Code program. Special thanks to Satish for providing additional sponsorship to attend this conference.
00:25:53.280
Finally, a shout-out to the conference organizers for putting this event together, especially Sylvan and Marion, and my co-speaker, EKG Kina. I apologize if I mispronounce any names, especially regarding my visa application, which faced a challenge during the initial process. Thanks to Michael Forest for his invaluable suggestions regarding the presentation.