[Deneb Question] How to create rectangle borders on specific values?

[klein.keagan]

Hi.
How to create borders on specific values like this?

Below is the code I currently use. I’d like to know how to implement a rectangle-like border on my “Meta Diaria” text.

Thanks

Current code

{
“data”: {“name”: “dataset”},
“config”: {
“view”: {“stroke”: “transparent”}
},
“layer”: [
{
“mark”: {
“type”: “area”,
“interpolate”: “natural”,
“point”: {“color”: “green”},
“tooltip”: true,
“grid”: null,
“line”: {“color”: “green”},
“color”: {
“x1”: 0,
“x2”: 0,
“y1”: 0,
“y2”: 1,
“gradient”: “linear”,
“stops”: [
{
“offset”: 0,
“color”: “green”
},
{
“offset”: 1,
“color”: “white”
}
],
“point”: {
“filled”: true,
“color”: “#4B7430”
}
}
}
},
{
“mark”: “rule”,
“tooltip”: true,
“encoding”: {
“x”: {
“aggregate”: “mean”,
“field”: “Meta Diaria”,
“type”: “quantitative”,
“labelOpacity”: 0,
“title”: null,
“axis”: null
},
“color”: {“value”: “#BEB70C”},
“size”: {“value”: 3}
}
},
{
“mark”: {
“type”: “text”,
“dy”: -20,
“dx”: -10,
“baseline”: “bottom”,
“align”: “top”,
“fontSize”: 14,
“fontWeight”: “700”,
“fontStyle”: “italic”
},
“encoding”: {
“text”: {
“field”: “Meta Diaria”,
“format”: “.2f”,
“aggregate”: “aggregate”
},
“x”: {“axis”: null},
“color” : {“condition”: [
{“test”: “datum[‘Meta Diaria’] > 0”, “value”: “#A6E8D1”}
],
“value”: null}
}
},

{
  "mark": {
    "type": "text",
    "dx": -8,
    "dy": -10,
    "color": "white",
    "baseline": "middle",
    "align": "top",
    "fontSize": 14
  },
  "encoding": {
    "text": {
      "field": "Faturamento",
      "format": ".2f"
    }
  }
}

],
“encoding”: {
“x”: {
“field”: “Dia Mes”,
“type”: “nominal”,
“axis”: {
“title”: null,
“labelAngle”: 0,
“labelColor”: “White”,
“labelFontSize”: 12,
“orient”: “bottom”
}
},
“y”: {
“field”: “Faturamento”,
“type”: “quantitative”,
“title”: null,
“axis”: null
}
}
}

[Greg]

Hi Claudio:

I used a similar technique with a “rect” mark at the desired coordinates with separate stroke and fill colours in a recent post to the Deneb Showcase forum section.

Deneb Example - Line Chart with Min-Max Variance

There have been a few examples recently where native Power BI line charts have had their value increased through the addition of variance intervals between two points. Gustaw Dudek: Chandeep Chhabra: Here’s another take on such an augmented line chart showing the maximum and minimum of each selected date range using Deneb. All calculations are done in-visual in Deneb/Vega-Lite; no Power BI calculations (DAX) are used. This example illustrates a number of Deneb/Vega-Lite features…

Here’s the code snippet for the mark in my example:

        {
          "name": "NOTE_HORIZONTAL_RECTANGLE",
          "mark": {
            "type": "rect",
            "width": 100,
            "height": 40,
            "align": "center",
            "baseline": "middle",
            "stroke": "#969696",
            "fill": "white"
          },
          "encoding": {
            "x": {
              "field": "_note_x",
              "type": "temporal"
            },
            "y": {
              "field": "_note_y",
              "type": "quantitative"
            }
          }
        },

You can add a cornerRadius property with value as desired.

Rect

Hope this helps.
Greg

[klein.keagan]

Thx, Greg. I will try it later when I have time.

Let’s see if I got it right: the trick to make it dinamically move is the enconding, right?

Hi, Greg.
I went today to look into the pbix to try your solution, but then the rule mark had vanished and the x axis was completely messed, so I could not even try your solution. I even tried copy/pasting the code I sent you before, but I got error too.

I’ve managed to completely mask the data, so here is the pbix. Do you mind please taking a look at it, while showing too how can I make it the rectangles work on that situation? If you can’t, please let me know

Thanks in advance,
Claudio

FatMasked.pbix (5.6 MB)

[Greg]

Hi Claudio. I didn’t have any success in getting the rule mark to show, so instead added rounded rectangular borders behind the visible text marks. … it needed trial-and-error to find offset and size values that worked.

Hopefully this gives you something to move forward with.
Greg
eDNA Forum - Deneb Rectangular Borders.pbix (5.6 MB)

[klein.keagan]

Thank you, Greg.

Do you have any idea why the rule mark stopped working all of a sudden? It was showing until yesterday.

Regards,
Claudio

[Greg]

Nope … do you have a backup of the code that correctly showed the rule? If so, upload it and I’ll review tomorrow. Greg

[klein.keagan]

The code in the first post in this topic is the one that was working. I have no idea why it stopped after I opened power bi today.

Thanks

[Greg]

Hi Claudio.

I copied the JSON code from your first post and replaced the JSON code in a copy of your visual, but this did not show the rule mark either. As is, nothing in the code jumps out to me, but on close inspection it appears like it may be a data issue; only the first record has a [Meta Diaria] value (all other records have null), so I expect the aggregate men would be null as well.

If you have a backup PBIX that correctly shows the rule, then perhaps a review will provide additional insight.
Greg

[klein.keagan]

Hi Greg.
Thanks for still trying
I took a step back and am going little by little on documentation until I get back to that point.

Taking the chance, in order not to open another topic, is there any tool that helps finding comma and brackets/bracers mistakes in the code or/and autofixes it? I manage to replicate the documentation examples on my dataset, but sometimes I cannot find the , [, { and other like theese mistakes on deneb editor, which sounds like a waste of time (correct me if I am wrong, please).

Thank you,
Claudio

[Greg]

Hi Claudio. No tool that I’ve found (besides the “Repair and Format JSON” icon button within the Deneb Visual Editor, which I use all the time) … all bracket-matching I’ve done has been hand-edited. Greg

[klein.keagan]

Thanks a lot for all this help, Greg.

Now I will go slower and eventually open new topics as the needs come

Claudio