큰 (> 500,000) 점이있는 D3.js scattergraph? 클러스터링?

Question

많은 수의 포인트 (50 만 이상)가있는 산점도를 플로팅하는 방법을 모색 중입니다.

현재 우리는 Python에서 Matplotlib을 사용하고 있습니다. 점을 플롯하고, 이동 및 확대/축소를 제어합니다. 클러스터링이나 포인트를 제공한다고는 생각하지 않습니다. 모든 것을 플롯합니다. 축소 된 뷰에서는별로 의미가 없지만 확대 할 수는 있습니다.

나는 자바 스크립트로 차트를 보면서 배포하기가 더 쉬워 보였다. D3.js를보고 있었는데 거기에 비슷한 것이 있는지를 알기 위해서였습니다. 첫째

http://bl.ocks.org/mbostock/3887118

, 당신은 점의 수를 그릴 수있을 것입니다 : 나는 기본 산점도의 예를 발견했다? (500,000 이상) 나는 모든 DOM 객체의 오버 헤드로 인해 할 수 없다는 인상 아래에 있었습니까? 이 주변에 방법이 있습니까?

둘째, D3.js에서 수행되는 라이브러리 또는 예 중 하나만 사용할 수있는 클러스터링이 있습니까?

셋째, 팬/확대/축소 기능 및 클러스터링, 또는이를 처리하는 패키지 된 JS 라이브러리의 좋은 예를 아는 사람은 누구나 굉장 할 것입니다.

넷째, 각 포인트에 클릭 핸들러를 사용하고 오버레이 또는 일부 창을 별도의 창에 표시하는 것이 좋습니다. 이것에 대한 어떤 생각?

Answer 1

D3를 사용하여 50 만 포인트를 얻을 수 있습니까? 물론 SVG에서는 그렇지 않습니다. 캔버스를 사용해야합니다 (브러시 기반 선택을 포함하는 10,000 포인트의 간단한 예 : http://bl.ocks.org/emeeks/306e64e0d687a4374bcd). 이는 더 이상 클릭 핸들러를 할당 할 개별 요소가 없음을 의미합니다. 앞에서 언급했듯이 모든 DOM 요소가 인터페이스를 식힐 것이기 때문에 SVG로 50 만 포인트를 렌더링 할 수 없습니다.

D3에는 클러스터링을 위해 활용할 수있는 쿼드 트리 지원이 포함됩니다. 위의 예에서 검색 속도를 높이기 위해 사용하고 있지만 특정 비율로 인접 요소를 중첩하는 데 사용할 수 있습니다.

는 궁극적으로, 당신의 선택은 다음과 같습니다

1) 캔버스와 여론 조사하면 그 시점에서 렌더링 데이터 요소를 제공하는 마우스의 위치에 렌더링 일부 다른 라이브러리/사용자 정의 구현.

2) 근접한 요소를 중첩하고 확대/축소 수준과 캔바스 위치 (팬)에 적합한 SVG 요소 만 렌더링하는 정교한 사용자 지정 D3 방식.

Answer 2

예, D3.js는 1. 서버 측에서 사전 렌더링이라는 두 가지 사항으로 백만 단위 데이터로 작업 할 수 있습니다. 자세한 내용은 여기를 참조하십시오 : https://mango-is.com/blog/engineering/pre-render-d3-js-charts-at-server-side/ 2a. 필요한 경우 사용자가 그래프를 상호 작용하고 확장 할 수 있도록 데이터의 일부를 집계 (또는 클러스터링)합니다. 이 경우 접을 수있는 노드를 사용할 수있는 경우 (http://bl.ocks.org/mbostock/1062288). 2b. 또한 강제 레이아웃을 사용하지 마십시오. 정착하고 안정된 위치로 수렴하는 데는 시간이 걸립니다.

라이브러리를 클러스터링하려면 선반에서 하나를 골라야합니다. 나는 파이썬에서 scikits 라이브러리를 선택 하겠지만 자바 스크립트에는 많은 것들이 있지만 k- 평균이나 계층 적 클러스터링을 다루기 때문에 매우 강력하지는 않습니다. 클러스터링으로 scikits를 사용하여 좌표를 미리 계산 한 다음 D3을 사용하여 렌더링합니다.

D3은 팬 및 확대/축소를 처리합니다. 클릭 핸들러와 텍스트 디스플레이는 D3에서 다시 사용할 수 있습니다. (http://bl.ocks.org/robschmuecker/7880033)