topic Re: How to sort X-axis and Y-axis in custom order for my custom visualisation using Deneb? in Custom Visuals Development Discussion

How to sort X-axis and Y-axis in custom order for my custom visualisation using Deneb?

Junato47 — Tue, 27 Dec 2022 12:00:03 GMT

{
"data": {"name": "dataset"},
"layer": [{
"mark": {
"type": "point",
"size": 1000,
"tooltip": true
},
"encoding": {
"y": {
"field": "Residual_Risk",
"type": "ordinal",
"sort": "Y"
},
"x": {
"field": "Risk Appetite",
"type": "nominal",
"axis": {
"labelAngle": 0
}
},
"size": {
"field": "Count of Risk_ID",
"legend": null,
"scale": {"rangeMax": 15000},
"type" : "quantitative"
},
"color": {
"field": "Count of Risk_ID",
"legend": null,
"scale": {"range": ["#F0E199", "#6D5A00"]},
"type" : "quantitative"
}
}
},
{
"mark": {
"type": "text",
"fontSize": 16,
"fontWeight": "400",
"color": "black"
},
"encoding": {
"y": {
"field": "Residual_Risk",
"type": "ordinal",
"sort": "-Y"
},
"x": {
"field": "Risk Appetite",
"type": "ordinal",
"axis": {
"labelAngle": 0
}
},
"text": {
"field": "Count of Risk_ID",
"type": "quantitative"
}
}
}
]

}

this the Visualisation and this the code for the visualistion

I need to Sort the X-axis Averse, minimal, conservative,Flexible in that order and

I need to sort Y axis from Low to high

Re: How to sort X-axis and Y-axis in custom order for my custom visualisation using Deneb?

giammariam — Tue, 27 Dec 2022 13:30:16 GMT

@Junato47, if you don't expect the axes values to change, you can use the following spec. There is also a way to implement a data-driven solution, but I believe this hard-coded method should suffice.

I removed the y sort from the text mark and also added top-level encoding for the sorting. If you need more help, just let me know, happy to help. If this gives you what you need, please mark this as the solution.

{ "data": {"name": "dataset"}, "encoding": { "x": {"sort": ["Averse", "Minimal", "Conservative", "Flexible"]}, "y": {"sort": ["High", "Medium", "Low"]} }, "layer": [ { "mark": {"type": "point", "size": 1000, "tooltip": true}, "encoding": { "y": {"field": "Residual_Risk", "type": "ordinal", "sort": "Y"}, "x": { "field": "Risk Appetite", "type": "nominal", "axis": {"labelAngle": 0} }, "size": { "field": "Count of Risk_ID", "legend": null, "scale": {"rangeMax": 15000}, "type": "quantitative" }, "color": { "field": "Count of Risk_ID", "legend": null, "scale": {"range": ["#F0E199", "#6D5A00"]}, "type": "quantitative" } } }, { "mark": { "type": "text", "fontSize": 16, "fontWeight": "400", "color": "black" }, "encoding": { "y": {"field": "Residual_Risk", "type": "ordinal"}, "x": { "field": "Risk Appetite", "type": "ordinal", "axis": {"labelAngle": 0} }, "text": {"field": "Count of Risk_ID", "type": "quantitative"} } } ] }

Re: How to sort X-axis and Y-axis in custom order for my custom visualisation using Deneb?

Junato47 — Tue, 27 Dec 2022 16:29:46 GMT

Hi @giammariam ,

Many thanks; everything went smoothly.
I don't know a lot about coding and I'm new to making custom visuals. Just curious if there are any other values, like: If there is Very High and Very Low on the Y-axis, will the code function if I add "y": "sort": ["Very High," "High," "Medium," "Low," "Very Low"]?

Re: How to sort X-axis and Y-axis in custom order for my custom visualisation using Deneb?

giammariam — Tue, 27 Dec 2022 18:33:18 GMT

Yes that should work. Basically you want to add all the posible values for the axis into the sort array. Feel free to reach out if you need help on any deneb visuals in the future

Re: How to sort X-axis and Y-axis in custom order for my custom visualisation using Deneb?

Junato47 — Wed, 28 Dec 2022 17:29:10 GMT

Yes Sure thank you

Re: How to sort X-axis and Y-axis in custom order for my custom visualisation using Deneb?

Junato47 — Fri, 30 Dec 2022 05:55:19 GMT

i have one more thing to add this to this visual, i would need a 45 degree dashed line starting from the origin of the graph. i will show a reference imageReference image

Re: How to sort X-axis and Y-axis in custom order for my custom visualisation using Deneb?

giammariam — Sat, 31 Dec 2022 00:17:30 GMT

@Junato47, try this:

{ "data": {"name": "dataset"}, "encoding": { "x": {"sort": ["Averse", "Minimal", "Conservative", "Flexible"]}, "y": {"sort": ["High", "Medium", "Low"]} }, "layer": [ { "mark": {"type": "line", "color": "orange", "strokeDash": [7,10], "strokeDashOffset": 9, "strokeWidth": 1}, "data": {"values": [{"x": 0, "y": 0}, {"x": 1, "y": 1}]}, "encoding": { "x": {"type": "quantitative", "field": "x", "axis": null}, "y": {"type": "quantitative", "field": "y", "axis": null} } }, { "mark": {"type": "circle", "color": "orange", "size": 35}, "data": {"values": [{"x": 0, "y": 0}, {"x": 1, "y": 1}]}, "encoding": { "x": {"type": "quantitative", "field": "x", "axis": null}, "y": {"type": "quantitative", "field": "y", "axis": null} } }, { "layer": [ { "mark": {"type": "point", "size": 1000, "tooltip": true}, "encoding": { "y": {"field": "Residual_Risk", "type": "ordinal", "sort": "Y"}, "x": { "field": "Risk Appetite", "type": "nominal", "axis": {"labelAngle": 0} }, "size": { "field": "Count of Risk_ID", "legend": null, "scale": {"rangeMax": 15000}, "type": "quantitative" }, "color": { "field": "Count of Risk_ID", "legend": null, "scale": {"range": ["#F0E199", "#6D5A00"]}, "type": "quantitative" } } }, { "mark": { "type": "text", "fontSize": 16, "fontWeight": "400", "color": "black" }, "encoding": { "y": {"field": "Residual_Risk", "type": "ordinal"}, "x": { "field": "Risk Appetite", "type": "ordinal", "axis": {"labelAngle": 0} }, "text": {"field": "Count of Risk_ID", "type": "quantitative"} } } ] } ] }

Re: How to sort X-axis and Y-axis in custom order for my custom visualisation using Deneb?

Junato47 — Thu, 05 Jan 2023 09:58:03 GMT

Thank you @giammariam For me, it performed flawlessly. I appreciate your support.

Re: How to sort X-axis and Y-axis in custom order for my custom visualisation using Deneb?

Junato47 — Mon, 09 Jan 2023 07:58:29 GMT

hi @giammariam , I am aware that my doubts are giving you a lot of trouble.

Another question I have is whether it is possible to determine whether the risks that cross the diagonal dashed line inside the graph are "within appetite" or "out of appetite." The risks (i.e., the data field that the bubble represents) are "out of appetite" if they are over the dashed line. The risk is "within appetite" if they are crossing the dashed line. You can gain a better understanding of the issue if you refer to the accompanying photograph.

Re: How to sort X-axis and Y-axis in custom order for my custom visualisation using Deneb?

giammariam — Mon, 09 Jan 2023 21:02:09 GMT

Hey @Junato47. Looking at this now. I'm a bit unclear of what you mean by "cross the diagnal line" and "over the dashed line." Just trying to make sure I understand. If the circle marks appear above the 45 degree line then they are "within appetite"? If they are below the 45 degree line then they are "out of appetite"? Or is it if the circles are lying directly along the diagnal line, they are "within appetitie"?

Also, how would you like the appetite indicated? As a mark (e.g. text)? as a symbol next to the circle? as a tooltip? something else?

Thanks.

Re: How to sort X-axis and Y-axis in custom order for my custom visualisation using Deneb?

Junato47 — Tue, 10 Jan 2023 11:29:44 GMT

Hi @giammariam If the circles appear above and below the 45 degree line they are "out of appetite" and if the circles are lying directly along the diagonal line they are "within appetite". I don't want to display them in this particular visual. I require it to be displayed as a KPI. I can use it for different graphics, such as showing a count of risks that are "not within appetite" as a KPI.

Re: How to sort X-axis and Y-axis in custom order for my custom visualisation using Deneb?

Junato47 — Thu, 09 Mar 2023 07:48:02 GMT

@giammariam hi could you help me in this code, i would like to swap the axis, but more than that the color of the bubble should change not as per the size of the bubble, but instead we should use a color gradient. For eg:"If the residual Impact is "Very Low" and residual probability is "Very Low" it should be Green and if it is high it should be Red. i will show you an example

Here i have used a background, but i want the color change inside the bubble and the backgroud should be white. For the visualisation i used i have made the bubble fill color as transperent. Is it possible to change the colors of the bubble just like the background.

Re: How to sort X-axis and Y-axis in custom order for my custom visualisation using Deneb?

giammariam — Fri, 10 Mar 2023 00:41:37 GMT

Hey @Junato47. I'd be happy to help. Can you do two things for me first?

Start a new post and tag me so people that are also trying to apply gradients in a mark can have an easier time finding help
Provide a sanitized dummy dataset (here's how). Since the original solution was a while ago, I mainly want to make sure that I have the field names right. Also, I want to have a conclusive list of all axis values.