Choose a plotting library for the Plot Viewer

[robyngit]

Objective: To select the most appropriate plotting package for the Plot Viewer.

Packages considered so far:

1. D3

   • Pros:
     • Already in use in MetacatUI (though an older version), no new dependencies
     • Highly customizable and powerful - can create almost any kind of visualization.
     • Has a robust community and abundant resources, is actively maintained, and has been around for many years.
   • Cons:
     • Steeper learning curve.
     • More verbose compared to other libraries.

2. plot by Observable

   • Pros:
     • Built on top of D3 but offers a higher level API.
     • Easier and faster to get simple plots up and running.
     • Good documentation and community support.
   • Cons:
     • Might have limitations in customizability compared to pure D3.
     • This library is new as of 2021-ish

3. Vizabi by Gapminder

   • Pros:
     • Can create attractive and familiar animated bubble charts like those popularized by Gapminder.
     • Comes with time slider and play/pause controls.
     • Provide a simplified way to request, fetch and parse data in a unified data schema.
     • Responsive & optimized for both touch and mouse interactions.
   • Cons:
     • Not very flexible. For example, as far as I can tell, it only creates plots that have a time dimension.
     • Designed to display data with fewer points.
     • Has not been updated since 2020

Other packages to consider:

• Vega-Lite - A high-level grammar of graphics with concise JSON syntax to describe visualizations in a structured manner.
• Apache ECharts - High performance rendering based on ZRender. Built-in accessibility features like automatically generated chart descriptions.
• Plotly.js - Can do 3D and statistical charts. Has wrappers for Python, R, and MATLAB.
• Chart.js - Lightweight and performance-driven, responsive. Focuses mainly on traditional chart types.
• C3.js - Abstracted interface for D3. But no releases since 2020...
• TOAST UI Chart - Simple, various chart types, responsive.
• Frappe Charts - Simple, responsive, and modern-looking charts. Zero dependencies.
• Google Charts - Free but not open source.
• ...?

Packages ruled out:

• Three.js - We could make some pretty neat 3d plots with it and, since it uses WebGL, it could be performant for large datasets. However, this is really a 3d rendering engine, not a charting library, so it would require a lot of work to get it to do what we want.
• Highcharts - Not free for commercial use.
• Sigma.js - Specializes in graph drawing only (but does use WebGL for hardware-accelerated graphics, which is cool).
• nivo - React based

Criteria to consider:

1. Flexibility: Range of plots and visualizations the library can create.
2. Learning curve: Simplicity in implementation - how long will it take to develop the plot viewer given this library?
3. Performance: Efficiency in rendering, especially with large datasets.
4. Package size: How much time will this add to the page load?
5. Integration: Compatibility with MetacatUI.
6. Longevity & Support:
   • Library's activity, release frequency, and history
   • Community activity and backing organization strength.
7. Data Handling:
   • Capability for real-time data updates.
   • Data transformation and aggregation features.
   • Integration with data sources.
8. Mobile Responsiveness:
   • Visualization rendering on mobile devices.
   • Adaptability to various screen sizes.
9. Accessibility:
   • Features like ARIA tags, keyboard navigation, and alternative text options.
10. ...?

Tasks (suggested):

• [ ] Review the original and additional evaluation criteria.
• [ ] Explore other packages that might be suitable.
• [ ] Evaluate the packages based on the criteria.
• [ ] Create a shortlist of packages.
• [ ] Test the shortlisted packages with realistic data, considering the criteria.
• [ ] Gather team feedback.
• [ ] Make a final decision and update this issue.

[robyngit]

Another package consideration:

• deck.gl - high-performance data visualization library that's particularly powerful for geospatial data and large datasets.
  • Pros:
  • Ability to handle and visualize massive datasets in real-time because of optimizations and usage of WebGL.
  • Geospatial capabilities. It supports multiple coordinate systems and projections.
  • Designed to work with "layers", where each layer represents a specific type of visualization (e.g., scatter plots, hexagon layers, geoJSON layers, etc.) - can stack multiple visualizations on top of each other.
  • Highly customizable, yet lots of built in "layers"
  • Cons:
  • Seems to replicate a lot of what Cesium does (e.g. rendering 3d tiles: https://deck.gl/docs/api-reference/geo-layers/tile-3d-layer), so we will have redundant code in MetacatUI
  • Probably a lot more than what we need for our use case

Interesting point: It has a geohash layer! https://deck.gl/docs/api-reference/geo-layers/geohash-layer