Deneb and Vega - How to Start Learning Them and Why?

[@michazawal7063]

Thanks for your contribution and providing this introductionary video - It encouraged me to try Denab and Vega in my Power BI works :)

[@power-of-bi]

Thank you for the comment. Such comments encourage me to make more videos.

[@nash_life]

Hi Andrzej, Great admirer of your work. Thank you for what you have provided to the community. I am a Vega beginner myself. I love to have more control over my charts so, I have preferred VEGA because D3.js has a long learning curve.
I have 1 question though, I saw all your complex charts that you have built, will I be needing JavaScript to create such charts ?

[@power-of-bi]

Vega visualizations (including interactive and animated ones) can be created using Vega JSON only. No JavaScript required. Basic JS may be required to embed Vega visualizations into a web page with some additional functionality, for example, Vega examples on my website are being generated using Vega JSON code stored in my Github repository. That required a few rows of JS code.

[@nash_life]

@@power-of-bi Great. Thank You. Hoping to learn a lot from you.

[@zacs7971]

great video Andrzej Leszkiewicz - appreciate all your videos!

[@totvabe1]

Sounds great! Great initiative! I've tried sometimes some graphics with Deneb but with Vega-Lite, but it hasn't been easy. I don't know if it's a good idea to go with Vega, or if it's better to try Vega-Lite first, which seems easier...

[@power-of-bi]

For some reason most people prefer Vega-Lite (less code?). From my point of view (but maybe it's skewed by the fact that I already know Vega) Vega is more descriptive and straightforward. I mean, look at the Vega mark. It's clearly describes what you see on the screen ("rect"), what data table it is based on ("table"), where it starts and where it ends (x, y, y2 and width properties), how values are being projected onto the plot (using xscale and yscale) and what color it is filled with ("steelblue").
Vega:
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0},
"fill": {"value": "steelblue"}
}
}
]
And Vega-Lite?
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
"y": {"field": "b", "type": "quantitative"}
}
What? Everything is based on default setting applied behind the scene.

[@totvabe1]

@@power-of-bi Very good example to appreciate the difference. Thank you.

[@朱世东]

Thank you for your contribution

[@DanielWeikert]

Great work. Maybe you can show a video where you build one step by step
br

[@power-of-bi]

Thanks. I'll do that soon. I'll start from a simple example (basic column chart). Then, in the following videos will go through other more and more advanced examples.

[@power-of-bi]

th-cam.com/video/HvIxqEC2_TY/w-d-xo.html