Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
ShivGC
Helper I
Helper I

Deneb Visual Zooming

Hi, 

I required some help with making my non-linear regression graph, zoom-able. 

I am using the deneb visual app on power bi and I have managed to create a scatterplot using the X Field and Y field values (just removed names for simplicity), and colour coded it using my own selected colours that adapt based on client selection. 

However, I now want to make it so that this visual is able to be zoomable as I have seen this feature around the internet. Due to my lack of coding knoweldge especially around the vegalite language, I am struggling to this. Is it possible someone could help me integerate the zoomable feature into my code below (which works completely fine already, just without being able to zoom)?

Please do break down any changes made, as I am a beginner in code and have very little experience currently. Thank you 🙂

For additional background:

In power bi, three categories have been added into the values selection box which are - X FIELD, Y FIELD, CLIENT (formula which allows the colour of the marker to change based on client selection). 

Code currently working:

 

 

 

 

 

{
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "point",
        "filled": true
      },
      "encoding": {
        "x": {
          "field": "X FIELD",
          "type": "quantitative",
          "axis": {"format" : "%"}
        },
        "y": {
          "field": "Y FIELD",
          "type": "quantitative",
          "axis": {"format" : "%"}
        },
        "color": {"field": "CLIENT", "type": "nominal", "legend": null, "scale": {"range":["#006D9E", "#A6E2EF"]}}
      }
    },
    {
      "mark": {
        "type": "line",
        "color": "black"
      },
      "transform": [
        {
          "regression": "Y FIELD",
          "on": "X FIELD",
          "method" : "pow"
        }
      ],
      "encoding": {
        "x": {
          "field": "X FIELD",
          "type": "quantitative"
        },
        "y": {
          "field": "Y FIELD",
          "type": "quantitative"
        }
      }
    },
    {
      "transform": [
        {
          "regression": "Y FIELD",
          "on": "X FIELD",
          "params": true,
          "method" : "pow"
        },
        {"calculate": "'R²: '+format(datum.rSquared, '.2f')", "as": "R2"}
      ],
      "mark": {
        "type": "text",
        "color": "Orange",
        "fontSize" : 16,
        "fontWeight" : "bold",
        "x": "width",
        "align": "right",
        "y": -5
      },
      "encoding": {
        "text": {"type": "nominal", "field": "R2"}
      }
    }
  ]
}

 

 

 

 

 

1 ACCEPTED SOLUTION
ShivGC
Helper I
Helper I

I have Figured out the solution to this and will paste the code below for anyone who would like to try mimic this.

Essentially, you are able to make a regression graph and make it zoomable but you just have to code within the same Layer ("layer" function). Please take a look below, at the code:

{
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "point",
        "filled": true
      },
      "encoding": {
        "x": {
          "field": "X FIELD",
          "type": "quantitative",
          "axis": {"format": "%"}
        },
        "y": {
          "field": "Y FIELD",
          "type": "quantitative",
          "axis": {"format": "%"}
        },
        "color": {
          "field": "CLIENT COLOUR FIELD - IF THIS IS NOT APPLICABLE TO YOU, PLEASE TAKE IT OUT",
          "type": "nominal",
          "legend": null,
          "scale": {
            "range": [
              "#006D9E",
              "#A6E2EF"
            ]
          }
        }
      }
    },
    {
      "mark": {
        "type": "line",
        "color": "black"
      },
      "transform": [
        {
          "regression": "Y FIELD",
          "on": "X FIELD",
          "method": "pow"
        }
      ],
      "encoding": {
        "x": {
          "field": "X FIELD",
          "type": "quantitative"
        },
        "y": {
          "field": "Y FIELD",
          "type": "quantitative"
        }
      }
    },
    {
      "transform": [
        {
          "regression": "Y FIELD",
          "on": "X FIELD",
          "params": true,
          "method": "pow"
        }
      ],
      "mark": "circle",
      "encoding": {
        "x": {
          "field": "X FIELD",
          "type": "quantitative"
        },
        "y": {
          "field": "Y FIELD",
          "type": "quantitative"
        }
      },
      "params": [
        {
          "name": "grid",
          "select": "interval",
          "bind": "scales"
        }
      ]
    }
  ]
}

 

View solution in original post

5 REPLIES 5
ShivGC
Helper I
Helper I

I have Figured out the solution to this and will paste the code below for anyone who would like to try mimic this.

Essentially, you are able to make a regression graph and make it zoomable but you just have to code within the same Layer ("layer" function). Please take a look below, at the code:

{
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "point",
        "filled": true
      },
      "encoding": {
        "x": {
          "field": "X FIELD",
          "type": "quantitative",
          "axis": {"format": "%"}
        },
        "y": {
          "field": "Y FIELD",
          "type": "quantitative",
          "axis": {"format": "%"}
        },
        "color": {
          "field": "CLIENT COLOUR FIELD - IF THIS IS NOT APPLICABLE TO YOU, PLEASE TAKE IT OUT",
          "type": "nominal",
          "legend": null,
          "scale": {
            "range": [
              "#006D9E",
              "#A6E2EF"
            ]
          }
        }
      }
    },
    {
      "mark": {
        "type": "line",
        "color": "black"
      },
      "transform": [
        {
          "regression": "Y FIELD",
          "on": "X FIELD",
          "method": "pow"
        }
      ],
      "encoding": {
        "x": {
          "field": "X FIELD",
          "type": "quantitative"
        },
        "y": {
          "field": "Y FIELD",
          "type": "quantitative"
        }
      }
    },
    {
      "transform": [
        {
          "regression": "Y FIELD",
          "on": "X FIELD",
          "params": true,
          "method": "pow"
        }
      ],
      "mark": "circle",
      "encoding": {
        "x": {
          "field": "X FIELD",
          "type": "quantitative"
        },
        "y": {
          "field": "Y FIELD",
          "type": "quantitative"
        }
      },
      "params": [
        {
          "name": "grid",
          "select": "interval",
          "bind": "scales"
        }
      ]
    }
  ]
}

 

v-yueyunzh-msft
Community Support
Community Support

Hi , @ShivGC 

According to your description, you want to zoom in the Deneb custom visual . Sorry for i am also unfamilar for this custom visual .

As searched , it can zoom in and out by using the mouse wheel .And for the code you can refer to :
Adding Interactive Widgets To Visuals Using Deneb in Power BI | Sandeep Pawar (pawarbi.github.io)

 

And i also test in my side , this is my test data:

vyueyunzhmsft_0-1693209277870.png

And we can use this code :

 

{
  "config": {"view": {"continuousWidth": 400, "continuousHeight": 300}},
  "data": {"name": "dataset"},
  "mark": "circle",
  "encoding": {
    "x": {"type": "quantitative", "field": "X FIELD"},
    "y": {"type": "quantitative", "field": "Y FIELD"}
  },
  "height": 200,
  "selection": {
    "selector016": {
      "type": "interval",
      "bind": "scales",
      "encodings": ["x", "y"]
    }
  },
  "title": "Sactterplot with Widget",
  "width": 100,
  "$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json"
}

 

 

 

Then we can get the result like this:

vyueyunzhmsft_1-1693209856598.png

 

Thank you for your time and sharing, and thank you for your support and understanding of PowerBI! 

 

Best Regards,

Aniya Zhang

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly

 

Is it possible to show me how to add it to this regression code example at the bottom of this page:

 

https://vega.github.io/vega-lite/docs/regression.html

HI , @ShivGC 

You can try this code if it can help you :

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/movies.json"},
  "layer": [
    {
      "mark": {"type": "point", "filled": true},
      "encoding": {
        "x": {"field": "Rotten Tomatoes Rating", "type": "quantitative"},
        "y": {"field": "IMDB Rating", "type": "quantitative"}
      },
      "selection": {
    "selector016": {
      "type": "interval",
      "bind": "scales",
      "encodings": ["x", "y"]
    }
  }
    },
    
    {
      "transform": [
        {
          "regression": "IMDB Rating",
          "on": "Rotten Tomatoes Rating",
          "params": true
        },
        {"calculate": "'R²: '+format(datum.rSquared, '.2f')", "as": "R2"}
      ],
      "mark": {
        "type": "text",
        "color": "firebrick",
        "x": "width",
        "align": "right",
        "y": -5
      },
      "encoding": {"text": {"type": "nominal", "field": "R2"}}
    }
  ]
}

 

Vega Editor

vyueyunzhmsft_0-1693301995395.png

 

 

Thank you for your time and sharing, and thank you for your support and understanding of PowerBI! 

 

Best Regards,

Aniya Zhang

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly

Hi, 

Unfortunately, this is not what I am looking for. I am able to get a typical scatter plot which I am able to zoom in and out of, however, the idea is too add a non-linear regression line to the graph.

This is done on power bi:

 

{
  "data": {"name": "dataset"},
  "params": [
    {
      "name": "grid",
      "select": "interval",
      "bind": "scales"
    }
  ],
  "mark": "circle",
  "encoding": {
    "x": {
      "field": "X Field",
      "type": "quantitative"
    },
    "y": {
      "field": "Y Field",
      "type": "quantitative"
    }
  }
}

 


Now, the aim is to add a regression line to it, so that I can zoom into the regression line and see points a little clearer. 

Helpful resources

Announcements
Europe Fabric Conference

Europe’s largest Microsoft Fabric Community Conference

Join the community in Stockholm for expert Microsoft Fabric learning including a very exciting keynote from Arun Ulag, Corporate Vice President, Azure Data.

Power BI Carousel June 2024

Power BI Monthly Update - June 2024

Check out the June 2024 Power BI update to learn about new features.

PBI_Carousel_NL_June

Fabric Community Update - June 2024

Get the latest Fabric updates from Build 2024, key Skills Challenge voucher deadlines, top blogs, forum posts, and product ideas.

Top Solution Authors