topic Re: Deneb: Packing instead of Overlapping Bubbles in Scatter Plot in Custom Visuals Development Discussion

Deneb: Packing instead of Overlapping Bubbles in Scatter Plot

sdrljaca — Fri, 03 Mar 2023 15:14:24 GMT

Hi, I am learning Deneb and Vega-Ligt and I love it.

But bubbles are overlaping and I can not make bubbles Packing (as it is called in Charticulator). How?

Thank you!

Re: Deneb: Packing instead of Overlapping Bubbles in Scatter Plot

giammariam — Sun, 26 Feb 2023 16:39:00 GMT

Hey sdrljaca, could you provide a sanitized .pbix (here's how)? I'd be happy to take a look.

Re: Deneb: Packing instead of Overlapping Bubbles in Scatter Plot

sdrljaca — Tue, 28 Feb 2023 05:41:21 GMT

Hi, yes of course, but how?
It says "The file type (.pbix) is not supported", that is why I am uploading print screen.

I want these bubbles not to be on top of each other, but to be distrubuted within belonging quadrat (same I achieved in Charticulator with "Packing" distribution).and this would be some dummy data

Re: Deneb: Packing instead of Overlapping Bubbles in Scatter Plot

giammariam — Mon, 27 Feb 2023 12:28:55 GMT

sdrljaca thanks for the additional info. I see that I mistakenly inserted the wrong link in my response above. This post explains how to do this. Essentially though you could use cloud storage such as google drive, onedrive, dropbox, or github, and then share the link here.

Re: Deneb: Packing instead of Overlapping Bubbles in Scatter Plot

sdrljaca — Tue, 28 Feb 2023 10:30:07 GMT

Hi, here is the Link

Thank you for trying to help me,

Srđan

Re: Deneb: Packing instead of Overlapping Bubbles in Scatter Plot

giammariam — Wed, 01 Mar 2023 12:37:05 GMT

Hey sdrljaca. So I've spent a ton of time on this because it is an interesting problem to try and solve. I've tried various approaches. Here's a couple notes.

The pack transform is only available in Vega, not Vega-Lite.
In Vega
- I first faceted the dataset and set the row encoding to Site and the column encoding to Start-Up Year. I was able to recreate the original chart with this method, with the intent of applying the pack transform on each facet. I then performed data transforms to create the parent-child hierarchy necessary for the pack transform by fabricating a root node for each facet. This is where things started to break down. I couldn't figure out a way to perform the circle pack transform for each of these hierarchies, I could only perform it on a single dataset.
In Vega-Lite, I performed the same steps and looked into the steps involved in various circle packing algorithms with the crazy notion of trying to calculate the individual pack layouts through multiple transforms. Unfortunately, due to the recursive nature required for determining a given pack layout, vega/vega-lite transforms were just not set up for this.

I very well could be wrong, but ultimately it appears to me that the circle packing layout for each combination of Site and Start-Up Year would need to be computed outside of Vega/Vega-Lite using a circle packing algorithm. If you have access to query the source data via SQL, this could possibly be done with recursive CTEs. The resulting layout would then need to be loaded into Deneb as the source dataset.

Alternatively, this absolutely all could be done by building a Power BI Custom Visual using d3.js, but that would require quite a significant L.O.E.

I'm not 100% convinced that this is impossible through faceting in Vega, but I was unable to figure it out. I'm going to tag some of the Deneb experts here to see if any of them have any thoughts.

Here are some files to get going if anybody out there has the bandwidth to look at this.

Re: Deneb: Packing instead of Overlapping Bubbles in Scatter Plot

KerKol — Fri, 03 Mar 2023 08:16:06 GMT

I might have a template for that... let me dig it up

Re: Deneb: Packing instead of Overlapping Bubbles in Scatter Plot

KerKol — Fri, 03 Mar 2023 08:18:23 GMT

also tagging avatorl

Re: Deneb: Packing instead of Overlapping Bubbles in Scatter Plot

KerKol — Fri, 03 Mar 2023 08:31:03 GMT

Something like this?

Deneb-Showcase/S&P Beeswarm Chart at main · PBI-David/Deneb-Showcase · GitHub

or this?

{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"usermeta": {
"deneb": {
"build": "1.4.0.0",
"metaVersion": 1,
"provider": "vega",
"providerVersion": "5.22.1"
},
"interactivity": {
"tooltip": true,
"contextMenu": true,
"selection": false,
"highlight": true,
"dataPointLimit": 50
},
"information": {
"name": "Kerry Kolosko Bubble Swarm",
"description": "[No Description Provided]",
"author": "Kerry Kolosko",
"uuid": "e363f508-0281-4f62-a1a3-115169706015",
"generated": "2023-03-03T08:30:42.639Z"
},
"dataset": [
{
"key": "__0__",
"name": "X",
"description": "",
"type": "numeric",
"kind": "column"
},
{
"key": "__1__",
"name": "ColourCategory",
"description": "",
"type": "text",
"kind": "column"
},
{
"key": "__2__",
"name": "Labels",
"description": "",
"type": "text",
"kind": "column"
},
{
"key": "__3__",
"name": "Y",
"description": "",
"type": "numeric",
"kind": "measure"
},
{
"key": "__4__",
"name": "BubbleSize",
"description": "",
"type": "numeric",
"kind": "measure"
}
]
},
"config": {
"autosize": {
"contains": "padding",
"type": "fit"
},
"view": {"stroke": "transparent"},
"font": "Segoe UI",
"arc": {},
"area": {
"line": true,
"opacity": 0.6
},
"bar": {},
"line": {
"strokeWidth": 3,
"strokeCap": "round",
"strokeJoin": "round"
},
"path": {},
"point": {
"filled": true,
"size": 75
},
"rect": {},
"shape": {},
"symbol": {
"strokeWidth": 1.5,
"size": 50
},
"text": {
"font": "Segoe UI",
"fontSize": 12,
"fill": "#605E5C"
},
"axis": {
"ticks": false,
"grid": false,
"domain": false,
"labelColor": "transparent",
"labelFontSize": 12,
"titleFont": "wf_standard-font, helvetica, arial, sans-serif",
"titleColor": "#252423",
"titleFontSize": 16,
"titleFontWeight": "normal"
},
"axisQuantitative": {
"tickCount": 3,
"grid": true,
"gridColor": "#C8C6C4",
"gridDash": [1, 5],
"labelFlush": false
},
"axisX": {"labelPadding": 5},
"axisY": {"labelPadding": 10},
"header": {
"titleFont": "wf_standard-font, helvetica, arial, sans-serif",
"titleFontSize": 16,
"titleColor": "#252423",
"labelFont": "Segoe UI",
"labelFontSize": 13.333333333333332,
"labelColor": "#605E5C"
},
"legend": {
"titleFont": "Segoe UI",
"titleFontWeight": "bold",
"titleColor": "#605E5C",
"labelFont": "Segoe UI",
"labelFontSize": 13.333333333333332,
"labelColor": "#605E5C",
"symbolType": "circle",
"symbolSize": 75
}
},
"data": [{"name": "dataset"}],
"signals": [
{
"name": "cx",
"update": "width / 2"
},
{
"name": "cy",
"update": "height / 2"
},
{"name": "radius", "value": 8},
{"name": "collide", "value": 0.1},
{"name": "gravityX", "value": 0.2},
{"name": "gravityY", "value": 0.2},
{"name": "static", "value": true}
],
"scales": [
{
"name": "xscale",
"type": "linear",
"domainMin": -100,
"domainMax": 140,
"domain": {
"data": "dataset",
"field": "__3__",
"sort": true
},
"range": "width"
},
{
"name": "yscale",
"type": "linear",
"range": "height",
"nice": true,
"domain": {
"data": "dataset",
"field": "__0__",
"sort": false
}
},
{
"name": "color",
"type": "ordinal",
"domain": {
"data": "dataset",
"field": "__1__"
},
"range": {"scheme": "category20c"}
},
{
"name": "ballsize",
"domain": {
"data": "dataset",
"field": "__4__"
},
"range": [0, 50000]
}
],
"axes": [
{
"orient": "bottom",
"scale": "xscale"
},
{
"orient": "left",
"scale": "yscale",
"tickCount": 5,
"zindex": 1
}
],
"marks": [
{
"name": "nodes",
"type": "symbol",
"from": {"data": "dataset"},
"encode": {
"enter": {
"fill": {
"scale": "color",
"field": "__1__"
},
"xfocus": {
"scale": "xscale",
"field": "__3__",
"band": 0.5
},
"yfocus": {
"scale": "yscale",
"field": "__0__",
"band": 0.5
}
},
"update": {
"size": {
"scale": "ballsize",
"field": "__4__"
},
"stroke": {"value": "white"},
"strokeWidth": {"value": 1},
"zindex": {"value": 0},
"tooltip": {"signal": "datum"}
},
"hover": {
"stroke": {"value": "purple"},
"strokeWidth": {"value": 3},
"zindex": {"value": 1}
}
},
"transform": [
{
"type": "force",
"iterations": 100,
"forces": [
{
"force": "collide",
"iterations": {
"signal": "collide"
},
"radius": {
"expr": "sqrt(datum.size)/ 2"
}
},
{
"force": "x",
"x": "xfocus",
"strength": {
"signal": "gravityX"
}
},
{
"force": "y",
"y": "yfocus",
"strength": {
"signal": "gravityY"
}
}
]
}
]
},
{
"type": "text",
"from": {"data": "nodes"},
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {
"value": "middle"
},
"fontSize": {
"scale": "ballsize",
"field": "__4__"
},
"fontWeight": {
"value": "bold"
},
"fill": {"value": "black"},
"text": {
"field": "datum['__2__']"
}
},
"update": {
"x": {"field": "x"},
"y": {"field": "y"}
},
"transform": [
{
"type": "label",
"avoidMarks": ["nodes"],
"anchor": [
"top",
"bottom",
"right",
"left"
],
"offset": [1],
"size": {
"signal": "[width + 60, height]"
}
}
]
}
}
]
}

Re: Deneb: Packing instead of Overlapping Bubbles in Scatter Plot

avatorl — Fri, 03 Mar 2023 09:56:01 GMT

KerKol thanks for tagging

sdrljaca , do you means somethig like this?

I can't help you with Vega-Lite solution (I never really worked with Vega-Lite), but it's easy to implement using Vega and "force" type of transformation.

See official Vega example: https://vega.github.io/vega/examples/packed-bubble-chart/

Also, my floral carttogram is a more advanced example of a packed bubble chart. See https://powerofbi.org/2023/02/18/floral-cartogram-how-do-we-govern-our-world/ for more details (and source code).

Each flower has been placed inside of an invisible bubble with "force" transformation applied to make sure the bubbles (and the flowers) are not overlapping.

It's also possible to increase distance between bubbles or to allow partial overlapping.

If you'll decide to use Vega instead of Vega-Lite, feel free to contact me with any questions..

Re: Deneb: Packing instead of Overlapping Bubbles in Scatter Plot

Adamboer — Fri, 03 Mar 2023 12:29:06 GMT

To avoid overlapping bubbles in Deneb and Vega-Lite, you can use the "point" mark and set the "size" encoding to a fixed value or a calculated value based on your data. Additionally, you can set the "opacity" encoding to a lower value to make overlapping bubbles more transparent and distinguishable.

Here is an example of how to set up a basic bubble chart in Vega-Lite:

{
"mark": "point",
"encoding": {
"x": {"field": "x_value", "type": "quantitative"},
"y": {"field": "y_value", "type": "quantitative"},
"size": {"field": "size_value", "type": "quantitative"},
"opacity": {"value": 0.7}
}
}
You can adjust the "size" encoding to suit your needs, and you can also add other encodings like color or shape to further distinguish between bubbles.

Re: Deneb: Packing instead of Overlapping Bubbles in Scatter Plot

avatorl — Fri, 03 Mar 2023 12:51:41 GMT

Hi Adamboer or should I call you ChatGPT?

Re: Deneb: Packing instead of Overlapping Bubbles in Scatter Plot

sdrljaca — Fri, 03 Mar 2023 13:24:43 GMT

Hi, this is beautiful work and much more than I requested.It will take a lot of time that I understand it and simplify for my use case.
Can you could help me to simplified it? I would be very thankful.
BR, Srđan

Re: Deneb: Packing instead of Overlapping Bubbles in Scatter Plot

giammariam — Fri, 03 Mar 2023 13:41:13 GMT

I was so in the weeds looking into circle packing that I completely forgot about the force transform 🤦🏻‍♂️. That should definitely work in the matrix format that you have.

Since they brought it up, I'll defer to KerKol, or avatorl so one of them can get credit for the solution. I may just see if I can get it implemented on my own just for practice.

Re: Deneb: Packing instead of Overlapping Bubbles in Scatter Plot

sdrljaca — Fri, 03 Mar 2023 15:33:59 GMT

Hi, thank you as well.

In your "packed-bubble-chart" example it is only missing X and Y axis and tickBand that is "extent". We are really close.

BR, Srdjan

Re: Deneb: Packing instead of Overlapping Bubbles in Scatter Plot

Adamboer — Mon, 06 Mar 2023 09:32:08 GMT

That's your wish whatever you may call me, I don't have any issue in that.