Vega and Vega-Lite are open-source data visualization tools that enable you to create and share interactive visualizations. Vega and Vega-Lite are known as declarative visualization grammars as they provide a declarative syntax to describe the visual appearance and interactive behavior of a visualization. Similar in spirit to how SQL provides a declarative language for expressing database queries, Vega and Vega-Lite provide declarative languages for describing visualizations in a JSON (JavaScript Object Notation) format. These descriptions are defined as Vega/Vega-Lite specifications.
Vega-Lite is built on top of Vega and provides a more concise visualization grammar to build a wide range of visualizations quickly while offering control to override defaults and customize various parts of a visualization. As Vega-Lite can compile its specifications to Vega specifications, users may use Vega-Lite as the primary visualization tool and transition to using the lower-level language, Vega, for advanced use cases if needed.
Vega-Lite specifications represent a high-level description of what you want the visualization to include, in terms of data, graphical marks (point, bar, line, etc.), and visual encoding channels (x-axis, y-axis, color, size, etc.). The key idea is that you declare links between data fields and encoding channels. The rest of the plot details are handled automatically. Axes, legends, and scales are all automatically generated by the Vega-Lite compiler based on a set of carefully designed rules. This approach is what makes Vega-Lite specifications to be concise and suitable for quick visualization authoring.
Vega-Lite supports data analysis, data transformations (e.g., aggregation, binning), visual transformations (e.g., stacking, faceting), flexible combinations of charts, and interactions (e.g., zooming, selection).
The Vega-Lite ecosystem is huge, and there are many integrations, applications, and extensions of the Vega-Lite language and compiler. Here's a quick overview of some of the tools that you can use to write Vega-Lite specifications:
- You can use the Vega online editor to replicate graphics from the example gallery and make small changes. It's very useful for learning and experimenting without the need to install anything. Including data inline in the online editor is okay for small datasets; but if your data is large, the editor would have to do a lot more work slowing everything down. Uploading data somewhere and accessing it via a URL is another option but can be slower for large datasets, and you will not want to make your sensitive data publicly available.
- To overcome the limitations of the online editor, you can use VS Code + the Vega Viewer extension to work on Vega-Lite projects locally. The Vega Viewer extension provides language support, interactive preview of Vega/Vega-Lite graphs, and allows you to work with local files (more details here). Additionally, you get all VS Code features.
- If you're authoring Power BI reports, you can use the Power BI custom visual, Deneb, to write Vega-Lite specs in Power BI and benefit from the power of both tools. One Deneb-only feature I like is the ability to use zoom controls to zoom in and out in the preview area. This is very useful when working with large graphs.
- If you prefer working with Python instead of the JSON-based Vega-Lite language, you can use Altair, which is a declarative statistical visualization library for Python. Altair provides a friendly Python API that generates Vega-Lite specifications in JSON format. Environments such as Jupyter Notebooks, JupyterLab, and Colab can then take this specification and render it directly in the web browser.
I use the online editor, VS Code, and Deneb. For each visualization, I'll add the following JSON files (if possible):
filename-online-editor.jsonfor working in the online Vega editor.filename.vl.jsonfor working in VS Code locally.filename-deneb.jsonfor working in Power BI. This is not a Deneb template. Just copy the content of the file and paste it into Deneb's Specification tab. Make sure to delete everything in Deneb's Config tab because I already added the Config object within the specification. I use Deneb for everything, including titles, subtitles, and footers. You can use Power BI's text boxes instead.
I use custom fonts in many of my visuals. If you see the Times New Roman font, then it is a sign that a custom font is used.
This was part of the Du Bois Visualization Challenge 2023.
This was part of Makeover Monday 2022 - Week 42.
This was part of Makeover Monday 2022 - Week 37.
This chart was created as part of Power BI Workout Wednesday 2022 - Week 38.
I also created a horizontal waterfall chart.
This is a re-creation of @priyamisner's interesting graphic, which shows soil colors by state. Here's her work on Observable.
This is a re-creation of a Financial Times' graphic.
This was part of the #30DayChartChallenge 2022 - Day 30.
This was part of the #30DayChartChallenge 2022 - Day 30.
This is a re-creation of a Financial Times' graphic and was part of the #30DayChartChallenge 2022 - Day 24.
This is a re-creation of a Financial Times' graphic and was part of the #30DayChartChallenge 2022 - Day 24. I created this with Deneb as it makes it so easy to work with pattern fills. I used the "HTML Content" custom visual for the text on the left.
You can also use pattern fills in Observable or you can just use a simple color and render the chart in the Vega editor. Here's an example:
Day 12 of the #30DayChartChallenge 2022 was about The Economist theme. So I decided to recreate the following graphic originally created by The Economist in January 2022. I used UK's data.
This time, I decided to recreate a Financial Times' graphic.
The following graphic shows monthly actuals and forecasts in a lipstick column chart along with the variance in a column chart.
Since I started exploring Vega-Lite, I quickly realized that recreating visuals is the best way to learn. So I decided to recreate the Du Bois Challenge N°7.
The following graphic shows current vs predicted end-of-season Premier League positions.
I increased the labelPadding property for the X-axis to make room for a Power BI matrix visual. Here's the final graphic:
I wanted to experiment more with Vega-Lite's geoshape mark and decided to create a choropleth map with a dark background. I used VS Code.
In 2015, Shannon County, South Dakota (FIPS 46113) was renamed Oglala Lakota County (FIPS 46102). The 2020-us-black-population-data has this change reflected whereas the TOPOJSON file, us-10m.json, has not. I replaced the FIPS code 46102 with the old one, 46113, in the population data.
My first Vega-Lite exploration was recreating a W.E.B Du Bois graphic, which was part of the Du Bois Visualization Challenge 2022. I prefer working with VS Code for geoshape-based Vega-Lite experimentations as it is quicker to pass in local files.
