Deneb Exercise - Pan and Zoom

One of the interactivity features built-in to the Vega-Lite language and enabled in Power BI by the Deneb custom visual is panning and zooming. Here’s an example of a simple sales by country by month bubble chart:
deneb.pan_and_zoom.0.2

This can easily be added to any visual by binding an interval selection parameter to the scales (aka axes) with a small code block:


  "params": [
    {
      "name": "_pan_and_zoom",
      "select": "interval",
      "bind": "scales"
    }
  ]

Once implemented, you can pan by clicking-and-dragging with the mouse, and you can zoom by holding-down the CTRL key and rolling the mouse wheel. Note that the axes adjust automatically when panning or zooming.

This example uses a number of optional Deneb/Vega-Lite components, including:

  1. a title block c/w subtitle
  2. a circle mark with:
    • partial transparency (opacity)
    • black outline (stroke)
    • Power BI theme colours (fill)
  3. a custom tooltip with country, month, year, and sales (month, year, and sales using standard Power BI format strings)

The intent of this exercise is not to provide a complete solution for finished visuals, but rather to serve as a starting point for further custom visual development.

Also included is a sample PBIX using the Enterprise DNA Practice Dataset as a demo.

NOTE: This exercise is provided as-is for information purposes only, and its use is solely at the discretion of the end user; no responsibility is assumed by the author.

Greg
Deneb Examples - Pan and Zoom.pbix (1.7 MB)

1 Like

marking as solved

Hi Greg, Thanks so much for guide me in Deneb, I have an issue and is related when I have a layer with 2 chart, example (Scatterplot and Text) but when I to include the code for zoom generate the error “Duplicate signal name”, if I include hconcat or vconcat the charts run well with zoom

Hi @dyfre12. Please post issues to a new thread as forum members often don’t review solved threads (if it helps, link to the solved thread for more background). As well, please upload a PBIX file that illustrates your issue (with sample data if the original data is confidential). @EnterpriseDNA, please break-out the above post into its’ own thread.
Greg