deneb-viz / deneb

Deneb is a custom visual for Microsoft Power BI, which allows developers to use the declarative JSON syntax of the Vega or Vega-Lite languages to create their own data visualizations.
https://deneb-viz.github.io
MIT License
193 stars 15 forks source link

Tree Layout Issues #199

Closed PBI-David closed 2 years ago

PBI-David commented 2 years ago

I'm trying to create a tree layout in Deneb but nothing is rendering at all.

Here are the very beginnings of a tree layout in the vega editor with everything but the basics stripped out.

Editor

When I try to recreate in Deneb, I get a blank canvas with no warnings or errors. To recreate, I downloaded the JSON from here: https://vega.github.io/editor/data/flare.json, imported into PBI using PowerQuery and added all the fields to the Deneb visual well. Then I just updated the references to use "dataset".

Power BI file here:

Tree Test.zip

Full Deneb code is:

{ "data": [ { "name": "dataset", "transform": [ { "type": "stratify", "key": "id", "parentKey": "parent" }, { "type": "tree", "method": "tidy", "size": [200, 200], "separation": false, "as": [ "y", "x", "depth", "children" ] } ] } ], "marks": [ { "type": "symbol", "from": {"data": "dataset"}, "encode": { "enter": { "size": {"value": 100}, "stroke": {"value": "#fff"} }, "update": { "x": {"field": "x"}, "y": {"field": "y"}, "fill": {"value": "red"} } } } ] }

dm-p commented 2 years ago

Thanks for providing all the details - it makes it much easier to diagnose :)

The root of the issue is that Power BI is summarising or aggregating your data, whereas the Vega editor is not. This is one of the things to consider with Power BI & Deneb - you will need the grain of your visual dataset to match the desired grain of the source data that you generate your spec with.

Converting your Deneb visual to a table, the dataset looks as follows:

image

This is because the Summarization is set to Sum for the id, parent and size fields in the data model, and adding them to the Deneb (or a table) visual will automatically aggregate the data.

In order to match the behaviour of Vega in the editor, you need to make Power BI not aggregate the fields. This can be done by one of the following:

  1. Changing the default aggregation for all fields to Don't summarize, e.g.:

    image

  2. When adding the fields to the Deneb dataset, change their aggregation type to Don't summarize in the data role, e.g.:

    image

You ideally want your visual dataset to look like this (rather than above, which is aggregated; notice that there are no totals now):

image

By taking your visual as-is and changing the numeric fields to Don't summarize, I get this:

image

...which should match the Vega editor:

image

I wrote this article a while back, to help with understanding how Power BI aggregates data, and was geared towards visuals like the Violin Plot, R/Python & Charticulator. It pre-dates Deneb, but the concept is the same. Hopefully this helps clarify how the data needs to look to Deneb in these situations also.

The advice I generally give folks with visuals like this is to check how it looks as a table first, to be sure that Power BI isn't aggregating it to a grain that you're not expecting - we also lay this out at a high-level in the doc, but there's also a page in the sample workbook dedicated to this concept:

image

Hopefully over time we'll be able to add more debugging options such as how datasets look, and the Vega logging (much like Vega editor) does, and this should improve productivity with these kinds of things. In the meantime, hopefully this gets you moving with your current project.

PBI-David commented 2 years ago

Thanks Daniel. When switching datasets, I completely forgot to check my data in a table. I'm going to go and punch myself in the face now :laughing:.