d3.js - D3 : Most populous areas of a scatter plot

Question

我用 D3 做了一个散点图。我如何识别图中人口最多的区域并用椭圆包围它们。例如，下图右上角有 2 个人口密集点。有功能吗？如果不是，我感谢您提出两件事的建议:识别、包围或以任何方式标记它们。

Scater plot http://tetet.net/clusterLab/scatter.png

var width = 300,
    height = 200;

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

var svg = d3.select("body")
  .append("svg")
    .attr("width", width)
    .attr("height", height); 

d3.tsv("data.tsv", function(error, data) {
    if (error) console.warn(error);
    x.domain(d3.extent(data, function(q) {return q.xCoord;}));
    y.domain(d3.extent(data, function(q) {return q.yCoord;}));

    svg.selectAll("circle")
        .data(data)
        .enter().append("circle")
            .attr("r", 5)
            .attr("cx", function(d) { return x(d.xCoord); })
            .attr("cy", function(d) { return y(d.yCoord); })
}); 

数据

xCoord  yCoord
0   0
5   3
2   1
4   7
7   4
5   2
9   9
3   4
1   6
5   4
8.1 6.2
8.4 6.6
8   6
8   7
7   8
6.8 8.3
6.4 8.4
6.2 8.3

Answer 1

有a number of clustering algorithms在那里。我将提供一个示例 OPTICS algorithm (我是随机挑选的，真的)和一种用每个簇的独特颜色标记点的方法。

请注意，我使用的是 density-clustering包在 npm 上可用。

一旦我们加载并解析数据(但在我们在屏幕上绘制任何东西之前)让我们设置算法:

var optics = new OPTICS(),

    // The algorithm requires a dataset of arrays of points,
    // so we need to create a modified copy of our original data:
    opticsData = data.map(function (d) {
        return [d.xCoord, d.yCoord];
    }),

    // Algorithm configuration:
    epsilon = 2, // min distance between points to be considered a cluster
    minPts = 2, // min number of points in a cluster

    // Now compute the clusters:
    clusters = optics.run(opticsData, epsilon, minPts);

现在我们可以用它们属于哪个簇的信息来标记我们原始数据中的点。一个非常粗略的解决方案......你可能会想到更优雅的东西:

clusters.forEach(function (cluster, clusterIndex) {
    cluster.forEach(function (index) {
        // data is our original dataset:
        data[index].cluster = clusterIndex;
    });
});

现在让我们创建一个非常简单的色标并将其应用于我们的点:

var colorScale = d3.scale.category20();

// Some code omitted for brevity:
...enter().append("circle")
    ...
    .style('fill', function (d) {
        return colorScale(d.cluster);
    });

你可以看看demo .我必须按原样包含库，所以您需要滚动到 JavaScript 面板的底部，抱歉。