D3 : 분산 형 플롯의 가장 인구가 많은 영역

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 (실제로 무작위로 선택 함)과 클러스터 당 고유 한 색상으로 포인트를 표시하는 방법을 제공합니다.

npm에서 사용할 수있는 density-clustering 패키지를 사용 중입니다. 우리가로드하고 데이터를 분석하면

의 설정 알고리즘하자 (하지만 우리는 화면에 아무것도 그리기 전에) :

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 패널의 맨 아래로 스크롤해야합니다 (미안).

Answer 2

시각적 표현 만하고 위치 나 중심 또는 그와 비슷한 것을 계산할 필요가없는 경우 솔루션은 매우 간단 할 수 있습니다. 데이터 포인트를 나타내는 기존 서클 외에도 각 데이터 포인트를 반투명 한 큰 원으로 그립니다. 이 큰 원이 겹치는 부분은 교차 부분이 더 어두워지며 더 많이 겹칠수록 어두워집니다 (배경을 흰색으로 유지한다고 가정). 서클의 크기, 색상 및 불투명도/투명도를 매우 높일 수 있습니다.