This is a growing compilation of some of my favorite visual techniques in Vega-Lite. My hope is that others can learn, critique, and gain inspiration from visiting this collection.
If you plan to migrate any of these specifications into Deneb, be sure to remove the comments beforehand.
⤷ Learn more about Deneb for Power BI here.
Dynamically update padding in the params array to enable toggling the visibility of visuals that are concatenated. This can be a useful technique when you want to only show one visual at a time, but also want to give the user control over which one is currently visible. This is a modification of this example provided on the Vega-Lite Examples page. Comments for the pertinent transforms can be found in the JSON specification. The input parameter has been added for demonstration purposes.
| Vega-Lite |
|---|
| Open the Chart with the Vega Editor |
| Open the Vega-Lite Specification |
Autmatically rotate radial labels based on their theta value. Comments for the pertinent transforms can be found in the JSON specification. The input parameters have been added for demonstration purposes.
| Vega-Lite |
|---|
| Open the Chart with the Vega Editor |
| Open the Vega-Lite Specification |
A technique to dynamically adjust the Y-axis behavior based on whether the measure is a percentage. Comments are surrounding the domainMax property to make it easier to find in the JSON specification. The input parameters have been added for demonstration purposes.
| Vega-Lite |
|---|
| Open the Chart with the Vega Editor |
| Open the Vega-Lite Specification |
A demonstration combining the sequence() expression and the fold transform to explode dates. The pertinent transforms are surrounded by comments in the specification.
| Vega-Lite |
|---|
| Open the Chart with the Vega Editor |
| Open the Vega-Lite Specification |
Dynamically show/hide/truncate/position data labels with monospace fonts based on their allocated space. The calculations for the labels have comments in the JSON specification. The input parameters have been added for demonstration purposes.
| Vega-Lite |
|---|
| Open the Chart with the Vega Editor |
| Open the Vega-Lite Specification |
Leverage the luminance() expression against your backgrounds to determine whether to use light or dark font colors. Comments are surrounding the luminance expression to make it easier to find in the JSON specification. The input parameters have been added for demonstration purposes.
| Vega-Lite |
|---|
| Open the Chart with the Vega Editor |
| Open the Vega-Lite Specification |
Use params to theme your visuals for light and dark modes. Use point selectors to toggle between the modes. Comments have been added to describe all of the params.
| Vega-Lite |
|---|
| Open the Chart with the Vega Editor |
| Open the Vega-Lite Specification |
Use a series of transforms to implement word wrapping with monospace fonts. The visual author should tweak the params, especially the multipliers, based on the font in use. There are a lot of steps involved, but the transforms have comments in the JSON specification. The input parameters have been added for demonstration purposes.
| Vega-Lite |
|---|
| Open the Chart with the Vega Editor |
| Open the Vega-Lite Specification |