ahopp
commented
2 years ago @joshuarrrr Personally, I'm completely aligned on this recommendation. From my perspective, users don't particularly care about the underlying technology being used as along as they have a consistent, feature rich charting experience throughout. Given the integration and flexibility, Vega-Lite as the rendering layer and Vega-Lite as the declarative grammar to describe chart attributes and interactions seems like the best approach (versus the additional migration and re-writing with no direct customer benefit that something like Plot.ly would offer) seems like the best path to get to that.
It also seem pretty clear, that Vega Lite is the only option that adds no additional dependencies, no incremental complexity, and no new maintenance bloat since it leverages existing OSD integration and implementation. In addition, I think their design principles (e.g., "Provide sensible defaults, but allow customization", "Favor composition over templates", and "Support gradual specification") and their development principles (e.g., "Strive to remain backwards compatible", "Generate generic Vega specifications", "Enable transition to Vega", "Fail gracefully") are very sound as an upstream dependency.
Thanks for the research and recommendation!
brijos
joshuarrrr
kavilla
seanneumann
anirudha
Is your feature request related to a problem? Please describe.
Today, there are at five different charting libraries that are use to render different visualization types in OpenSearch Dashboards (OSD). This makes it difficult for developers to provide a consistent user experience across visualization types, because any vertical feature that targets all visualizations must be implemented separately in each.
Essentially we want to
Describe the solution you'd like
Describe alternatives you've considered
Additional context
Why Vega-Lite?
Vega-Lite is built on years of academic research to create a concise, declarative JSON specification for interactive visualizations that enables users to rapidly create interactive visualizations. Even complex combinations of charts, layers, and interactions can be constructed by merging or updating a single simple object structure. It also makes it easy to write API wrappers, because they only need to generate JSON output (or partial output) following the Vega-Lite specification.
OSD already has a dependency on Vega-Lite, and it’s one we can’t easily remove even if we chose a different charting library (like Plotly.js). The fundamental value of the Vega visualization feature is that it allows end user’s to build and create totally new chart types by writing Vega/Vega-Lite specifications directly so there’s no sensible way to migrate that rendering to another library with different syntax.
The existing Vega visualization feature also provides a foundation for a low-code visualization creation flywheel. Users can use the built-in Vega-Lite editor to prototype new chart types not currently supported in OSD, and share these with the community, and it will be easy to “graduate” these chart types to Vis Builder or other easy-to-use charting tools. In the other direction, we can provide the Vega editor as an “advanced” editor to tweak or change the behavior of officially defined visualizations. This approach provides greater flexibility and power than existing systems which only allow custom JSON configurations without an interactive environment.
Vega-Lite visualizations have already been connected into all the important plumbing of OSD - they can be rendered in dashboards, have
expressionsimplementations, and even some styling to make them similar to the built-in visualization types, so much of the groundwork has already been laid.Some developers may initially find the Vega-Lite grammar to be a bit different from other JavaScript charting libraries or APIs, but that's part of its expressive power. The best way to get a sense of it is to look at examples.
To see Vega-Lite's approach to defining interactivity, see this example of a threshold based annotation/overlay with binding. (Note the use of
params, which is Vega-Lite’s system for setting and using variables within the declarative data structure.) See the gallery for other examples.To directly compare it to more traditional JavaScript charting libraries like Plotly.js, here’s a multi-series line chart with a unified tooltip and guide implemented in both:
How we decided
We did a quick survey of 20+ JavaScript charting library APIs, adoption, and usage to narrow-down our decision to four contenders: Vega-Lite, Vega, Plotly.js, and Apache Echarts, each of which met most of our criteria, summarized in the chart below (you may need to scroll right to see the entire table).