Packed Bubble Charts Demo
hereâs a demo of how to display Packed Bubble charts using thunkable. check out the video and see how sales figures for four(4) US regions, each one consisting of a number of states. are displayed using packed bubbles. the quantity dictates the size of each bubble and (optionally) the grouping (ie. region) is shown in different colors. the bubbles gravitate toward each other but never overlap.
hereâs the link to the demo
https://x.thunkable.com/copy/c7d0173a74e6dba61e5defe8b522d2ac
this kind of visualization used to be available only in big size apps like Tableau but now it is available thru the use of a new graphics provider - https://www.highcharts.com . they have all kinds of new viz options available including dependency wheel, sunburst and sankey diagrams among others (check out Highcharts | Highcharts.com). some of these are not available in the popular api calls from quickchart.io and google chart. iâve only got packed bubbles to work with thunkable (iâve tried sunbusrt and combo charts, which work in jsfiddle, but i cannot get them display anything when i try the webview block in thunkable. ).
anyway , on with the demo. given sales data like this in a CSVâŚ
> Region,State,Sales
> West,Washington,138641.27
> West,Colorado,32108.12
> West,California,457687.63
> West,Arizona,35282
> South,Virginia,70636.72
> South,Tennessee,30661.87
> South,North Carolina,55603.16
> South,Kentucky,36591.75
> South,Georgia,49095.84
> South,Florida,89473.71
> East,Pennsylvania,116511.91
> East,Ohio,78258.14
> East,New York,310876.27
> East,New Jersey,35764.31
> East,Massachusetts,28634.43
> East,Delaware,27451.07
> Central,Wisconsin,32114.61
> Central,Texas,170188.05
> Central,Minnesota,29863.15
> Central,Michigan,76269.61
> Central,Indiana,53555.36
> Central,Illinois,80166.1
if you can somehow get it into the form below, youâre ready to use packed bubble charts! (i first converted the csv to json then used thunkable to reformat the json to this required form)
> {name:'West',data:[{name:'Washington',value:138641.27},{name:'Colorado',value:32108.12}, {name:'California',value:457687.63},{name:'Arizona',value:35282},]},
> {name:'South',data:[{name:'Virginia',value:70636.72},{name:'Tennessee',value:30661.87}, {name:'North Carolina',value:55603.16},{name:'Kentucky',value:36591.75}, {name:'Georgia',value:49095.84},{name:'Florida',value:89473.71},]},
> {name:'East',data:[{name:'Pennsylvania',value:116511.91},{name:'Ohio',value:78258.14},
> {name:'New York',value:310876.27},{name:'New Jersey',value:35764.31}, {name:'Massachusetts',value:28634.43},{name:'Delaware',value:27451.07},]},
> {name:'Central',data:[{name:'Wisconsin',value:32114.61},{name:'Texas',value:170188.05}, {name:'Minnesota',value:29863.15},{name:'Michigan',value:76269.61}, {name:'Indiana',value:53555.36},{name:'Illinois',value:80166.1}
the above block is what goes into app variable data_str
note that i could only get the display working when i was live testing on my device. thatâs how itâs been in my case all this time. you may be able to make it work in your case.
the legend radio buttons are live, so clicking on one of them either hides or restores the group you click. i get a kick out of seeing those bubbles âexplodeâ to make room for more bubbles or shrink after some bubbles are removed. also, the bubbles themselves are live so clicking them gives you information about the data point represented in the bubble. if you want to experiment with other options click on the packed-bubble sample in the demo page of highcharts.com. enjoy!
) and i have around 50 devoted users⌠Its still a âchildâ but is growing 
