All in One Interactive Plotting Using Daru View

Ruby

Prakriti Gupta

All in One Interactive Plotting Using Daru View

by Prakriti Gupta

In her presentation at the Paris.rb Conf 2020, Prakriti Gupta introduces 'All-in-One Interactive Plotting Using Daru View', a versatile Ruby library designed for data visualization. The talk covers a range of topics related to Daru View, showcasing its capabilities in creating interactive charts and tables without the need to switch to JavaScript.

Key points discussed include:
- Introduction to Daru View: A library capable of creating various interactive visualizations, including maps and charts.
- Personal Background: Prakriti shares her journey as a Senior Designer at NIT Hamilton and her contributions to the Daru project during the 2018 Google Summer of Code.
- Examples of Visualization: Daru View allows for extensive customization using CSS and can accommodate multiple data formats, including Daru Data Frames and Row Vectors.
- Different Chart Types: Examples include basic charts, combination charts, and maps, such as a map of France demonstrating interactive features like zooming and downloading.
- Integration with JavaScript Libraries: Daru View leverages established libraries like Google Charts and Highcharts, providing flexibility in plotting a wide range of visualizations.
- Usage Experience: The presentation illustrates how to create various types of charts (line, bar, pie, etc.) and tables using Google Charts and Highcharts, highlighting interactivity options.
- Highstock Functionalities: An explanation of Highstock's capabilities and how it excels in time-series data visualization.
- Implementation: Prakriti notes that Daru generates HTML from Ruby code, utilizing dependent gems, and advocates for reducing dependencies to enhance Ruby's capabilities in data visualization.
- Personal Experience: Prakriti shares insights into her contributions and challenges during her Google Summer of Code journey, encouraging others to engage with open-source projects.

Conclusions include Prakriti's encouragement for Ruby developers to contribute to scientific computing within the community. She emphasizes the importance of resources available through the SciRuby organization and expresses gratitude to those who supported her journey, reinforcing the beneficial nature of collaborative contributions to open-source projects.

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.

Prakriti Gupta

@Prakriti-nith

Paris.rb Conf 2020