This is a growing compilation of visuals that I have created in Vega. Many of these visuals are accompanied by a Power BI file that includes a Deneb version. Some visuals are more experimental, while others are more complete. My hope is that others can learn, critique, and gain inspiration from visiting this collection.

PSD template by aleksandr_samochernyi

‎

A radial / line combo chart that displays Temperature vs Energy Consumption for the given year. Focus can be shifted to a specific week via mouseover. The data is entirely fictional, and the visual was inspired by the Sunny Edinburgh project.

‎

‎

A zoomable serpentine timeline. The serpentine shape can be an option for instances where an oblong canvas is not ideal. This visual incorporates a timer to facilitate zoom and fade animations, providing a technique beneficial for drill-down behavior and exploration. This example reveals text marks and icons upon zoom, corresponding to the user-selected node. Alternatively, you can render various mark types, axes, legends, etc., to provide additional insights into the selected node. The behavior and shape can be customized using many of the included signals.

‎

‎

The enter, update, exit pattern is a core concept in D3.js. D3 is a low level JavaScript library. Vega was built on top of D3. By binding data to visual elements (typically SVGs), you can create dynamic data visualizations. This approach allows for easier exploration and animation. The smooth movement of marks not only looks neat but, more importantly, works well with our pre-attentive processing.

The principle is explained more comprehensively by the creator of D3 on this page. The gist is that as your data changes, so can your visual marks if you bind them correctly (a concept known as object constancy). Marks bound to new data fall into the "enter" selection. Marks bound to data that remains after a change fall into the "update" selection. Marks bound to data that is no longer in the dataset after a change go into the "exit" selection.

Vega includes enter, update, and exit channels, although, honestly, I haven't found an example that uses all three. I do not believe I've ever seen a Vega example that uses "exit."

I was able to simulate a visual example of the data join in Vega. In reality, I'm currently only using the "update" channel for everything here.

‎

‎

This is an extension of the typical circle packing layout. A circle packing layout uses containment to convey hierarchical relationships. This version incorporates a timer to facilitate zoom and fade animations, offering a technique beneficial for drill-down behavior and exploration. Using this technique, various mark types, axes, legends, etc., can be rendered upon zoom to provide additional insights into the selected node.

‎

‎

Here I'm comparing different easing functions and visualizing their respective formulas. This isn't a comprehensive list of easing functions, but these are certainly some popular ones. Special thanks to Pavithra Kodmad for writing this excellent article on understanding easing! A few months before creating this visual, I wouldn't have thought that this would be feasible in Vega.

‎

‎

This visual is an exploration of some alternative interaction techniques. It includes:

• A scrubber control (in the form of a rotating baseball!).
• A dynamic progress line.
• Sub node-link trees that fade-in on a delay.

Although each node-link tree only goes one level deep, I can envision potential use-cases for combining on-demand trees with other visuals, such as scatter plots, line charts, etc.

‎

‎

This visual is an exploration of an alternative brushing technique. The bars show amounts as with any traditional bar chart, but has the added value of being adjustable to satisfy a given target. This type of interactivity gives the user more control and the ability to optimize inputs.