Vega – A declarative language for interactive visualization designs

https://vega.github.io/vega/

by worble • 2 years ago

266 41 2 years ago

vega.github.io

acomjean• 2 years ago

We use Vega lite for our web base graphs at work. We love the “export as svg” feature. It’s by the same people but with fewer options but easier to set up.

Like all graphing libraries, it’s chasing the gold standard which is R’s ggplot2. It’s as close as we’ve found in JavaScript, plus it can be interactive.

https://vega.github.io/vega-lite/

They have a python version as well.

mdaniel• 2 years ago

heh: https://vega.github.io/vega/examples/pacman/ and https://vega.github.io/vega/examples/platformer/

remram• 2 years ago

Are those expressions evaluated by JavaScript or is there proper isolation from the browser context? I.e. can I safely embed a user-generated Vega plot or is that XSS?

edit: Found the docs: https://vega.github.io/vega/usage/interpreter/ They do have security features, and even a AST-based interpreter

bovermyer• 2 years ago

Could you use this for building infrastructure/dependency maps?

taeric2• 2 years ago

What sort of maps are you wanting to build? https://c4model.com/ seems to be the more popular standard for this style at the moment. https://github.com/plantuml-stdlib/C4-PlantUML makes this somewhat easy to code out. (And I think most cloud providers have addons for it.)

Veuxdo• 2 years ago

This looks more like data visualization, not system architecture visualization. Ilograph is worth a look if you want the latter.

captaindiego• 2 years ago

Also there's Vega-Altair for using this from Python: https://altair-viz.github.io/gallery/index.html

flutetornado• 2 years ago

Altair is superb. Have used it a lot and it has become my default visualization library. Works in VSCode and Jupyter Lab. The author has a great workshop video on youtube for people interested in altair. I especially like the ability to connect plots with each other so that things such as selecting a range in one plot changes the visualization in the connected plot.

One possible downside is that it embeds the entire chart data as json in the notebook itself, unless you are using server side data tooling, which is possible with additional data servers, although I have not used it, so cannot say how effective it is.

For simple plots its pretty easy to get started and you could do pretty sophisticated inter plot visualizations with it as you get better with it and understand its nuances.

domoritz• 2 years ago

Awesome to hear that you like Vega Altair. With the recent integration of VegaFusion you don’t need to embed the data in the notebook anymore and I’ve found Altair to scale quite well. Give it a shot.

taeric2• 2 years ago

I was expecting a more language like thing on the description. Something like gnuplot. Maybe the grammar of graphics available to R. Instead, this is json schemas, if I'm understanding correctly.

jppope• 2 years ago

this is one of my all time favorite projects... it blows away a lot of the other charting/ data viz libraries. shocked more people haven't picked it up

shcheklein• 2 years ago

Good to see this project on the front page! We are using Vega (specifically Vega-Lite [1] as an engine and templates spec for data-science plots / visualizations in DVC (e.g. how it looks like in VSCode extension [2]).

It allowed us to have:

- same engine in CLI (can generate HTML and open in browser), VSCode extensions, SaaS

- have a way to describe plot visualization / representation as a declarative spec that can be then used in all those products (plot spec). We were exploring plotly and AFAIU there was no easy way to do the same

- it's quite comprehensive and community is responsive, the project is maintained

To name a few downsides from our experience:

- DSL is quite complicated. It requires some time to master it. It hurts the adoption. In our case I don't see that many users doing custom plots / templates - majority is using pre-baked built-in stuff or use Python and export as SVG.

- In our case some features were missing (and are still missing) - exponential average - that is most commonly used to smooth ML training curves.

[1] https://vega.github.io/vega-lite/

[2] https://dvc.org/doc/user-guide/experiment-management/visuali...

christkv• 2 years ago

I found chat gpt to be half decent at generating specs but far from perfect. At least it helps as a supplement to the docs which are not great.

aldanor• 2 years ago

There's also interesting projects for serverside scaling of vega plots - https://github.com/vega/vegafusion

mukundesh• 2 years ago

Wish GitHub markdown would support Vega-lite to create charts that would be a great combination.

Here is a brief discussion on the same https://github.com/orgs/community/discussions/16963

breck2• 2 years ago

I don't see that ever happening in a pleasant way. Lots of little technical reasons why not.

However, we will likely have Vega support sometime soon in Scroll. Someone just needs to volunteer and add it (or someone has to fund us to add that).

We now have basics of ObservablePlot (https://observablehq.com/plot/) support (https://scroll.pub/blog/tables.html)

echion• 2 years ago

Lots of little technical reasons why not.

What are some?

clkao• 2 years ago

the uw data lab behind vega also has a new library mosaic[1] that seems pretty exciting. My impression was it allows flexible data transformation/slicing in both the client side and server side, with the same dsl.

[1] https://github.com/uwdata/mosaic

theLiminator• 2 years ago

Oh wow, that's very cool. Being able to push down queries all the way to parquet while existing purely on the clientside via duckdb wasm is very cool. This enables purely static visualizations with full interactivity and full query optimization.

openrisk• 2 years ago

It feels like Vega is a viable path toward something bigger, like a global, W3C type standard for visualization, but unfortunately not as adopted as it deserves.

It was used in a mediawiki/wikipedia extension for graphs [1] but the whole exposing graphs to editors seems to have been dropped.

[1] https://m.mediawiki.org/wiki/Extension:Graph

1attice3• 2 years ago

How does Vega compare to Observable Plot?

I'm going to be needing a JS/TS rendering option shortly at my job, and I'm comparing tins.

haberman• 2 years ago

Came here to ask this exact question.

As I understand it, Observable Plot also seeks to be the "higher-level abstractions on top of D3" layer.

The Vega docs address Vega vs D3 (https://vega.github.io/vega/about/vega-and-d3/), but I don't see them compare Vega vs Observable Plot, which would seem to be a more apples-to-apples comparison.

1attice3• 2 years ago

A little digging also yielded this, https://observablehq.com/@observablehq/plot-vega-lite

But again it's not Vega vs Plot, it's Vega Lite vs Plot.

fourthark• 2 years ago

As explained in the link, Vega uses many of the D3’s geometry and other utilities, but not the DOM manipulation that most people associate with D3.

So the layers are not even in this comparison - Vega is sort of on the same level as D3, and Vega Lite vs Observable Plot is a better comparison.

breck2• 2 years ago

You may want to kick the tires on Scroll Tables. https://scroll.pub/blog/tables.html

We will eventually have great support for both of those.

1attice3• 2 years ago

Thanks Breck; I watched the video and it's appealing; I assume the downvote (now cancelled by my upvote) was the HN aversion to self-promotion, but as the OP I hereby declare this comment relevant and useful.

datadrivenangel• 2 years ago

Python has a Vega-lite package called Altair, which is very pleasant and powerful. [0]

0 - https://altair-viz.github.io

neves• 2 years ago

And don't miss Altair, the Python library to use Vega https://altair-viz.github.io/

benrutter• 2 years ago

Was literally just about to ask if a Python api for Vega existed when you posted!

It looks great! I can't believe I haven't heard of it before. Have used Plotly a lot in the past, this looks like a great alternative.

nerdponx• 2 years ago

Just for completeness, you might be interested in the Holoviz ecosystem (core library Holoviews + additional libraries like hvPlot), which uses either Bokeh or Matplotlib as its backend.

hyperhopper• 2 years ago

I haven't used Vega in probably close to a decade, but I remember when I was working with it, it was often extremely limited and rigid compared to D3. Only maybe 10% of the time could Vega be used for our use cases. Overall, the work to support both Vega and D3 ended up being more troublesome than just using D3 for all visualizations

Silphendio• 2 years ago

JSON??

I don't want to programm anything without comments.

I guess you can easily convert from use yaml or json5, but all the examples are still in json.

Hasnep• 2 years ago

I think JSON is just used as an intermediate representation which is normally generated by a library in a more general purpose language.

ruuda• 2 years ago

Or if you write it by hand at all, use RCL, then you can also abstract away the repetitive parts: https://github.com/ruuda/rcl/blob/master/examples/vega.rcl

loa_observer2• 2 years ago

JSONC seems solved your issue

amardeep• 2 years ago

For people who have used both vega and Apache echarts, how do they compare?

Ringz• 2 years ago

Das würde mich auch interessieren. Apache echarts ist meiner Meinung nach mächtiger und einfacher zu nutzen.

mbb70• 2 years ago

I've used Vega as part of a complex dashboard builder (think Looker/Tableau) and it is quite powerful and flexible, but like all of these libraries once you stray from the well worn tracks things get tricky.

For example, it was difficult to build charts from pre-aggregated data, like a box plot given p5, p25, p50, mean, p75 p95 and a list of outliers.

mhh__2• 2 years ago

Yeah my take is that programmer's tend to make charting libraries for data they are likely to generate.

mhh__2• 2 years ago

I really like the idea of this, really like it, but the notation /json layout honestly feels a bit of a dud.

loa_observer2• 2 years ago

Wow, Vega is here!

All our projects for data analytic and visualization are based on vega/vega-lite, really impressive by vega's signals design when i learned it first time(it's like rxjs, which i also love).

Share some work based on vega/vega-lite:

- PyGWalker: turn dataframe to tableau alternative UI in jupyter: https://github.com/Kanaries/pygwalker - RATH: Automation of data exploration workflow with one click. https://github.com/Kanaries/Rath - GWalkR: drag-and-drop based visualization in RStudio, https://kanaries.net/gwalkr

Vega – A declarative language for interactive visualization designs

Related Stories