title: How do I add density or heat map to this scatter plot?
body: <p>I have a scatter plot using C3js. </p>
  
  <p>The X axis has the number of interactions and the Y axis is the days/time when those interactions happened.</p>
  
  <p>Now the scatter plot works fine for this data. But now I want to take it further such that if the number of interactions is more, then the nodes are green and if the number of interactions are less, they are red. The scaling of the colors has to be gradient as interactions density increases from less to more.</p>
  
  <p>Below is the basic code : </p>
  
  <pre><code>var chart = c3.generate({
  point: {
      r: 5
  },
  data: {
      xs: {
          Safe: 'ibm_x',
          Losing: '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],
          ["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],
          ["Safe", 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],
          ["Losing", 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, ],
      ],
      type: 'scatter'
  },
  color: {
      pattern: ['#49B5A6', '#F86A52']
  },
   axis: {
      x: {
          label: 'Interactions',
          tick: {
              fit: false
          }
      },
      y: {
          label: 'Days'
      }
  },
  </code></pre>
  
  <p>});</p>
  
  <p>Below is the fiddle - <a href="https://jsfiddle.net/npmarkunda/qx35z8n5/" rel="nofollow noreferrer">https://jsfiddle.net/npmarkunda/qx35z8n5/</a></p>
  
  <p>I'm attaching an image for the results that are expected.</p>
  
  <p><a href="https://i.stack.imgur.com/V9J88.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V9J88.png" alt="enter image description here"></a></p>