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