docs: Update packed bubble example#3955
Conversation
Added square root scale for this to be more accurate. Default of linear scale is misrepresentative
|
Unfortunately neither a sqrt nor a linear scale is really representative. People don't interpret size by either. |
|
Every dataviz tool that has a bubble plot that I'm aware of use a square root scale otherwise the proportions are way off (a value twice as large should not be represented by a circle with twice the diameter). I don't mind either way but thought this would be more aligned with what I see elsewhere. |
|
Couple of links to illustrate the point in d3: https://benclinkinbeard.com/d3tips/log-and-power-scales/ https://observablehq.com/@johnhaldeman/tutorial-on-d3-basics-and-circle-packing-heirarchical-bubb Also: https://www.atlassian.com/data/charts/bubble-chart-complete-guide |
FYI, Vega size channel maps data to area, not diameter/radius. |
|
@kanitw - I'm sure you're already aware but the size channel can be a bit confusing in the way it is calculated, especially with respect to circles (see here: #2730). I can withdraw the PR if you like but using a square root scale would mean it is more aligned with how circles are represented in other dataviz tools. PS I did create the original example. |
|
Alternatively, I could add a signal that allows a user to switch between the scales which could help illustrate the choice people need to make. |
|
Here is a screenshot to illustrate the issue. The smaller circle has a value of 1 and the larger circle has a value of 2. Using a linear scale ends up with this (radius is doubled):
Using a squareroot scale ends up with area being doubled:
|
|
Shouldn't we change this line instead: https://github.com/vega/vega/pull/3955/files#diff-e4577745914d531c6c6fe9b7d252369187ffabb2e1ae1b3d8481d7bb07771fe3R75 |
|
@domoritz possibly. Although if I simplify to just the field value, I can't get the areas or diameters to make sense using linear or sqrt scales. I'm probably missing something obvious though. What do you think it should be changed to? Keeping it as proposed but changing just the scale allows: linear = double diameter |
|
How about Open the Chart in the Vega Editor |
|
@domoritz looks good to me - I have updated it. The areas are slightly off but this is probably down to my screen ruler rounding to integers. |
|
Thanks! |
Gotcha. Thanks for contributing! |
Thanks for creating such a versatile and powerful dataviz library 😉 BTW, I have a lot advanced examples on my GitHub that I can create PRs for if you think they might be useful. The sankey and gantt charts have been very popular. |
|
That's awesome. I wonder how we can maybe make it easier to have community examples that don't have to be part of this repo. We could do something similar to Vega-Lites listing but maybe with screenshots to make it easy to go to them. Thoughts? |
|
That makes sense to me. It would be easier to maintain and contribute as I see great Vega examples all the time that most are unaware of. FYI, Vega/VL have become very popular in the Power BI space via a container called Deneb. There is growing demand from that user base for a grammar of graphics approach to dataviz. I know the gantt chart is used extensively at some very high profile companies and organisations. |
|
That's super cool. I've previously thought about ways to let people add examples to an index in the Vega editor but it became too much work to develop/maintain. A community example section here similar to https://vega.github.io/vega-lite/examples/#community-examples but with images (as suggested in vega/vega-lite#3120) would be pretty awesome. Would you like to take a stab at it? We could copy the approach in Vega-Lite as well. |
|
Happy to have a go but I don't have an environment so everything would need to be done via the web. If it is just a new header and a list of links, then I can submit a PR for that. |
|
We can start with a list just like Vega-Lite. |
|
Hmm - just taken a look and I'm not even sure I can do this simple change without a working environment to test. VL and Vega documentation use different systems so I can't just copy it across and hope for the best. I believe this is the correct page: https://github.com/PBI-David/vega/blob/main/docs/_layouts/example.html Can I just add raw HTML as a bulleted list and heading? Will it be styled correctly? Even though it is a simple addition, this probably needs to be done by someone who can preview how the changes will appear. Once the skeleton is in place, I can add a few examples I have seen on the web. In parallel, I'll try and get a local environment running again but I hit too many blockers on Windows last time and just gave up. |
|
The setup probably works in the subsystem for Linux. |
|
I think it might be possible to avoid the need for a local build system if
we deployed a build of the docs in addition to the editor (as discussed
here
vega/vega-lite#9276 (comment) )
In the meantime, I think the core of the change could be submitted as a
block of markdown in this thread where the wording / links can be reviewed
without any build system.
Any of the maintainers can assist with moving it into the appropriate Md /
html file. I am happy to help with this in the absence of someone else
volunteering, as I spent quite a bit of time getting Ruby etc to work when
I was reformatting the site for a custom docs plugin last year.
…On Mon, Aug 5, 2024 at 7:03 AM Dominik Moritz ***@***.***> wrote:
The setup probably works in the subsystem for Linux.
—
Reply to this email directly, view it on GitHub
<#3955 (comment)>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/ACE2MM2RZROMFX4DWEZ6FELZP5LW3AVCNFSM6AAAAABL4HRMXKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENRYHAYDAMZRGM>
.
You are receiving this because your review was requested.Message ID:
***@***.***>
|
|
Thanks @hydrosquall . I was thinking something very simple like the following to mirror VL. We could list individual examples or the whole site as a link. e.g. Community ExamplesHere is a list of great examples of Vega visualizations that were created by the community. |
Update the packed bubble chart to use a square root scale so as not to be misrepresentative.
changes since v5.30.0 **vega-utils** * use `Object.hasOwn` instead of `Object.prototype.hasOwnProperty` (via #3951). (Thanks @domoritz!) **vega-parser** * Add discrete legend type (via #3957). (Thanks @hydrosquall!) **vega-functions** * Add sort function to vega-functions (and vega-interpreter) (via #3973). (Thanks @hydrosquall!) **vega-selections** * Add field predicate types to selectionTest (via #3675). (Thanks @jonathanzong!) **monorepo** * Replace flights-5k.json external reference (via #3999). (Thanks @dwootton!) **docs** * Update packed bubble example (via #3955). (Thanks @PBI-David!) * Correct typo in production rules documentation (via #3958). (Thanks @shanebruggeman!) * Update README.md to fix broken link to current roadmap (via #3979). (Thanks @cahogan & @joelostblom!) --------- Signed-off-by: Lukas Hermann <1734032+lsh@users.noreply.github.com>
Update the packed bubble chart to use a square root scale so as not to be misrepresentative.