How to pack layout for c3Js scatter plot

Question

I have a scatter plot JSFIDDLE whose each nodes need to represent 3 values. I looked into a D3js example - Pack Layout.

Below is the C3js code block

var chart_scatterplot = c3.generate({
  tooltip: {
    contents: function(d, defaultTitleFormat, defaultValueFormat, color) {

      var company = jsonfile[d[0].index].company;
      var mailCount = jsonfile[d[0].index].mailCount;
      var lastInteractedInDays = jsonfile[d[0].index].lastInteractedInDays;

      var companyData = "<table class='data-c3-table'><tr><td>" + company + "</td></tr><tr><td>" + mailCount + "</td></tr><tr><td>" + lastInteractedInDays + "</td></tr></table>"
      return companyData;
      //return (company+mailCount+lastInteractedInDays) // formatted html as youmailCount want
    }
  },
  point: {
    r: function(d) {
    console.log(d)
       return Math.random() * average;
     },
      focus: {
    expand: {
      enabled: false
    }
  }
  },
  data: {
    json: jsonfile,
    x: 'mailCount',
    keys: {
      value: ['mailCount', 'lastInteractedInDays'],
    },
    color: '#49B5A6',
    type: 'scatter'
  },
  axis: {
    x: {
      label: 'Interactions',
      tick: {
        fit: false
      }
    },
    y: {
      label: 'Days'
    }
  },
  legend: {
    show: true
  }
});

In the fiddle each node should be like a pie chart based on 3 values. How do I go about this?

score 0 · Answer 1 · answered Apr 10 '16 at 15:26

Scatter of pies? Sounds delicious. This level of customization will not be supported in something like c3.js. Your best option is to just build it in straight d3.js:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    font: 10px sans-serif;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  
  .dot {
    stroke: #000;
  }
</style>

<body>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script>
    var margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
      },
      width = 500 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    var x = d3.scale.linear()
      .range([0, width]);

    var y = d3.scale.linear()
      .range([height, 0]);
      
    var arc = d3.svg.arc()
    .outerRadius(30)
    .innerRadius(0);

   var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d; });

    var color = d3.scale.category10();

    var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

    var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");

    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var data = [{
      x: 2,
      y: 3,
      values: [10, 20, 30]
    }, {
      x: 7,
      y: 7,
      values: [15, 5, 22]
    }, {
      x: 5,
      y: 1,
      values: [14, 32, 40]
    }, {
      x: 1,
      y: 8,
      values: [32, 32, 40]
    }];

    x.domain([0, 10]);
    y.domain([0, 10]);

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text");

    var pies = svg.selectAll(".pie")
      .data(data)
      .enter().append("g")
      .attr('class', 'pie')
      .attr('transform', function(d){
        return 'translate(' + x(d.x) + ',' + y(d.y) + ')';
      })
      
    pies.selectAll(".arc")
      .data(function(d){
        return pie(d.values);
      })
      .enter()
      .append('path')
      .attr('d', arc)
      .style("fill", function(d, i) {
        return color(i);
      });
  </script>

How to pack layout for c3Js scatter plot

1 Answers1