Resize bubble in Scatter Plot for c3.js

Question

I have a scatter fee where I want to resize the dots so that they look like a bubble. Can someone show me how to resize bubble?

Here is my code:

var chart = c3.generate({ data: { xs: { IBM: 'ibm_x', Microsoft: 'microsoft_x', }, columns: [ ["ibm_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3], ["microsoft_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8], ["IBM", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2], ["Microsoft", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3], ], type: 'scatter' }, color: { pattern: ['#4C7A9F', '#E25459'] }, }); setTimeout(function () { chart.load({ columns: [ ["IBM", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2], ] }); }, 1000); setTimeout(function () { chart.load({ columns: [ ["IBM", 10.2, 10.2, 10.2, 10.2, 10.2, 11.4, 10.3, 10.2, 10.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2], ] }); }, 2000); setTimeout(function () { chart.load({ columns: [ ["Microsoft", 10.2, 10.2, 10.2, 10.2, 10.2, 11.4, 10.3, 10.2, 10.2, 10.1, 10.2, 10.2, 10.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2], ] }); }, 3000); 

This is my FIDDLE . I basically try to make my chart look like this

Answer 1

With c3, if you just want to increase the size of a point evenly , just add a property for the points and specify the radius

 point: { r: 15 }, 

Fiddle - http://jsfiddle.net/3jfe75r8/

---

If you want the point size to depend on one of the sizes , you can replace hardcoded 15 with a function. For instance,

 point: { r: function(d) { return d.value * 5; } }, 

Note that the multiplier is multiplied by a scaling factor of 5, so that the points will be large enough. If your data values ​​are large enough, you really don't need this scaling factor.

---

If you want to make the point size dependent on the size , you will do it

 point: { r: function(d) { return (dx + d.value) * 5; } }, 

Or any expression that strikes your imagination.

---

If you want to scale the size to one of the sizes , you can define your own scaling function and use it. For instance,

 var rs = d3.scale.linear() .domain([0.01, 5]) .range([5, 50]); 

and then

 point: { r: function(d) { return rs(d.value) } }, 

Which will scale the radius linearly from 5 to 50 for values ​​from 0.01 to 5.

---

You can also replace 0.01 and 5 with the actual minimum and maximum values from your dataset (use d3.min (<array)>) and d3.max (<array →)). If the data is multi-dimensional, you will have to smooth it into an array.

If your data dynamically changes or overrides your scaling function, or is data dependent (compared to data computed from data)

Answer 2

d3 size will work for you. For instance:

 var circle = svg.selectAll("circle") .data([32, 57, 293], String); circle.enter().append("svg:circle") .attr("cy", 90) .attr("cx", String) .attr("r", Math.sqrt); 

This could also be a good link: Link or visit this Gist . The index_previous.html file is an example similar to what you are looking for, just load the example, the data and remove the "//" from this line:

 //bubbles.addMeasureAxis("z", "Delay_per_Flight (minutes)");