How Do I relate and combine bar chart with bubble chart in D3?

Question

I want to use D3 for generating charts from JSON files. How do I combine/relate bar chart and bubble chart so when you click on either it should provide you details of both charts in a legend.

The each bubble must be below and center of the each bar. It must share x-axis of bar charts.

There are two different data sources for them.

No. of bars = No. of bubbles

Do you have anything to show such as sample data and any code which you have tried. — Ganesh
you can check my demo here codepen.io/anon/pen/doQrwp , I want to combine these two. — Kalpesh Singh

Ganesh Ganesh · Accepted Answer · 2015-08-06T11:55:06

I created the xscale

var xScale =  d3.scale.ordinal() .domain( d3.range(dataset.length))
                    .rangePoints([0, w-50]);

This same scale is shared while drawing bar as well as circles.

I have changed your codepen code

Below is the complete code after change

svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", function(d,i) {
    //return i * (w / dataset.length);
   return xScale(i) ;
  })
  .attr("y", function(d) {
    return h - (d * 10);
  })
  .attr("width", barWidth)
  .attr("height", function(d) {
    return d * 10;
  })
  .attr("fill","#d38e71");

var circles = svg.selectAll("circle")
  //.data(dataset)
.data(num)
  .enter()
.append("a")
    .attr("xlink:href", "http://google.com")
.attr("xlink:title",function(d){
  return "No. of campagins sent - "+d;

})
.attr("target","_blank")
  .append("circle");

circles.attr("cx", function(d,i) {
 /*  return  i* (wB / dataset.length)+(wB / dataset.length)/2-2;*/
  return (xScale(i) + barWidth/2);
  })
  .attr("cy", function(d) {
    return hB-35;
  })
  .attr("r", function(d) {
    return rScale(d);
  })

Note the following code for bar

 .attr("x", function(d,i) {
    //return i * (w / dataset.length);
   return xScale(i) ;
  })

Note the following code for circles.

circles.attr("cx", function(d,i) {
 /*  return  i* (wB / dataset.length)+(wB / dataset.length)/2-2;*/
  return (xScale(i) + barWidth/2);
  })

One suggestion

Width of the bar is set via this statement (w / dataset.length - barPadding) This can be stored in a variable. So it will not calculate for each member in the chart.

How Do I relate and combine bar chart with bubble chart in D3?

1 Answers