Skip to content

This is a growing compilation of my visuals written in Vega. Many of these visuals also have a Power BI file where the visual has been migrated into Deneb. My hope is that others can learn, critique, and gain inspiration from visiting this collection.

License

Notifications You must be signed in to change notification settings

Giammaria/Vega-Visuals

Repository files navigation

Vega-Visuals

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.

Vega-Visuals PSD template by aleksandr_samochernyi

Hierarchical Gantt New!

Vega-Visuals A hierarchical Gantt visual heavily inspired by Davide Bacci's Gantt. This Gantt takes a hierarchical (tree) data structure, allowing for staggered parent-child relationships. The user is able to explore the hierarchy at different levels, as well as different date granularities. Various controls and shortcut capabilities have been added to facilitate exploration.

Vega Power BI
Open the Chart with the Vega Editor Open the Chart in Power BI
Open the Vega Specification Download the .pbix

Interactive Radial / Line Combo Chart

Vega-Visuals 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.

Vega Power BI
Open the Chart with the Vega Editor Open the Chart in Power BI
Open the Vega Specification Download the .pbix

Zoomable Serpentine Timeline

Vega-Visuals 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.

Vega Power BI
Open the Chart with the Vega Editor Open the Chart in Power BI
Open the Vega Specification Download the .pbix
Open a Simplified Version from the Vega Docs

Simulating Data Joins


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.

Vega
Open the Chart with the Vega Editor
Open the Vega Specification

Zoomable Circle Packing

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.

Vega Power BI
Open the Chart with the Vega Editor Open the Chart in Power BI
Open the Vega Specification Download the .pbix
Open a Simplified Version from the Vega Docs

Easing Functions Visualized

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.

Vega Power BI
Open the Chart with the Vega Editor Open the Chart in Power BI
Open the Vega Specification Download the .pbix

Interactive Timeline

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.

Vega Power BI
Open the Chart with the Vega Editor Open the Chart in Power BI
Open the Vega Specification Download the .pbix

Bar Brushing

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.

Vega Power BI
Open the Chart with the Vega Editor Open the Chart in Power BI
Open the Vega Specification Download the .pbix

About

This is a growing compilation of my visuals written in Vega. Many of these visuals also have a Power BI file where the visual has been migrated into Deneb. My hope is that others can learn, critique, and gain inspiration from visiting this collection.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages