如何向此散点图添加密度图或热图？

Question

我有一个使用 C3js 的散点图。

X 轴表示互动次数，Y 轴是 days/time 互动发生的时间。

现在散点图适用于此数据。但现在我想更进一步，如果交互次数较多，则节点为绿色，如果交互次数较少，则节点为红色。随着交互密度从少到多增加，颜色的缩放比例必须是渐变的。

下面是基本代码：

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'
    }
},

});

下面是 fiddle - https://jsfiddle.net/npmarkunda/qx35z8n5/

我附上一张图片以显示预期的结果。

Answer 1

C3 没有提供此功能。所以需要用d3才能通过

//on chart load
chart.load({done: function() {
      //merge the first two columns which decide the x axis. 
      var g = data[0].concat(data[1])
      //get the max min in the concatenated array
        var minmax = d3.extent(g.filter(function(d){ return !isNaN(d);}));
      //make ascale for color range
      //min is '#49B5A6'
      //max is '#F86A52'
      var color = d3.scale.linear()
        .domain(minmax)
        .range(['#49B5A6', '#F86A52']);
      //iterate each circle  
      d3.selectAll("circle")[0].forEach(function(c){
        var d1 = d3.select(c).data()[0];//get data for circle
        change color on timeout
        window.setTimeout(function(){d3.select(c).style("fill", color(d1.x))}, 500);

      });
    },});

工作示例here。

Answer 2

c3 有一个 color 配置，允许您指定一个函数来计算每个点的颜色。

我大量借鉴了 Cyril 的回答并使用了这个配置选项：

var data = [
    ["ibm_x", 3.5, 3.0, 3.2, ...],
    ["microsoft_x", 3.2, 3.2, ...],
    ["Safe", 0.2, 0.2, 0.2, 0.2, ...],
    ["Losing", 1.4, 1.5, 1.5, ...],
];

// Get all the x values
var g = data[0].concat(data[1])

//get the max min in the concatenated array
var minmax = d3.extent(g.filter(function(d){ return !isNaN(d);}));

//make a scale for color range
//min is '#49B5A6'
//max is '#F86A52'
var heat = d3.scale.linear()
    .domain(minmax)
    .range(['#49B5A6', '#F86A52']);

c3.generate({
    data: {
        columns: data,
        ...
        color: function (color, d) {
            return heat(d.x);
        },
    },
    ...
});

Fiddle 此处：https://jsfiddle.net/qx35z8n5/4/（再次根据 Cyril 的回答修改）

如何向此散点图添加密度图或热图？

How do I add density or heat map to this scatter plot?

d3.js

c3.js