How to apply circle packing on these bubbles in dc.js

[geeta sahi]

I am trying to create a bubble chart without x and y-axis using dc.js.

So I have managed that, now I want to pack my bubbles in a circle, is there a way to do that in dc?

var companyChart = dc.bubbleChart('#dc-company-chart');

var x = 0;

companyChart

.width(480)

.height(240)

.margins({top: 0, right: 0, bottom: -1, left: -1})

.dimension(applicants)

.group(applicantGroupCount)

.keyAccessor(function (p) {

//console.log("x= " + x);

if(x==200) x=0;

  return x += 20;

})

.valueAccessor(function (p) {

  return 120;

})

.radiusValueAccessor(function (p) {

//var radius = Math.floor((p.value/10));

//console.log(radius)

return (p.value);

})

.x(d3.scaleLinear().domain([0, 240]))

.y(d3.scaleLinear().domain([0, 240]))

.r(d3.scaleLinear().domain([0, 300]))

.minRadiusWithLabel(500)

.maxBubbleRelativeSize(0.03)

.renderLabel(true)

.renderTitle(true)

.title(function (p) {

  return p.key

  + "\n"   

  + "Count: " + p.value;

});

var data = companyChart.group().top(10);

companyChart.data(data);

[Gordon Woodhull]

The dc.js bubble chart is more like a scatter plot with ability to drive the radius of the circles using the data.

You could look at the “bubble cloud” in dc-addons

https://github.com/Intellipharm/dc-addons#bubble-cloud

However that repo hasn’t been updated for a while so it may not be compatible with the latest dc.js. :-/

On May 13, 2021, at 7:51 AM, geeta sahi <geeta...@gmail.com> wrote:



--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/5f8a64cf-3fa0-4be3-a965-f04681333dc6n%40googlegroups.com.

[geeta sahi]

Thanks for the quick response. Which version is this compatible with. I have started running into errors-

dc.capMixin is not a function

Virus-free. www.avg.com

You received this message because you are subscribed to a topic in the Google Groups "dc-js user group" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/dc-js-user-group/Ei6aXXPlMOs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to dc-js-user-gro...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/FCEE91F8-3D93-4FD7-874E-68F7A6855C72%40woodhull.com.

[Gordon Woodhull]

Yes that sounds like a version incompatibility.

I think you might have to back out to dc@2. This is because dc-addons was written for d3@3.

Hopefully you won’t lose too much functionality!

It probably wouldn’t be too hard to update this one chart if this causes trouble.

On May 13, 2021, at 10:02 AM, geeta sahi <geeta...@gmail.com> wrote:



To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/CAGgmVKWHnj1dB6neA76uC82tQNh9vgVcmr8XQO7gTu%2Bnyb9NNg%40mail.gmail.com.