d3에서 조각화 데이터를 줄이는 방법은 무엇입니까?

Question

저는 많은 가치를 지니고 있으며 합계의 분열을 시각화하고 싶습니다.

예를 들어 나는 1, 1, 1, 2, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 7, 8, 8, 10이라는 값을 가지고 있으므로 합계는 86. 입니다. 이제이 86이 단일 값에서 어떻게 빌드되는지 시각화하고 싶습니다. 목표는 건물이 어떻게 형성되는지, 많은 것이 작은 지, 또는 덜 큰 가치에서 오는지를 확인하는 것입니다.

실제로 약 20000 개의 값이 있습니다.

Soo, 영역 또는 선 다이어그램이 필요합니다. 여기서 x 축은 값 세트에서 가장 작은 수에서 가장 큰 수까지 선형이며 (이 예제에서 1에서 10까지) y 축은 이 크기의 값으로 이루어진 합계 간단 쉽게 만들 수있을 것이다 10-1를 들어

이 같은 각 번호에 대한 표시 줄 :

   #     
       #     
       #     
      # #  #  
      # #  #  
      # #  #  
      # #  #  
      # # #  #  
      # # #  #  
      # # #  #  # 
      # # #  #  # 
      # # #  #  # 
      # # #  #  # 
      # # # # #  # 
      # # # # #  # 
      # # # # #  # 
      # # # # #  # 
    #  # # # # #  # 
    # #  # # # # #  # 
    # #  # # # # #  # 
    1 2 3 4 5 6 7 8 9 10 

하지만 내 경우에는 x 축 선형이고, 나는 10의 값의 모든 종류를 100000.

그래서 저는 moar 값과 더 큰 x 스케일을 가지며 폭이 픽셀입니다. 이제이 다이어그램을 계산하는 가장 좋은 방법은 무엇입니까? 내 질문은 실제 다이어그램을 그리는 방법이 아니라 값을 줄이는 방법입니다.

x 축의 각 픽셀을 가져 와서 해당 데이터 값을 가져 와서 합계를 계산하고 선을 그릴 수 있습니다. 그러나 그것은 비효율적이고 비 효과적 인 것으로 보인다! 또한 매우 큰 값을 가진 두 개의 열과 데이터가없는 단일 픽셀 너비의 열이 있으면 힘든 휴식을 초래할 수 있습니다. 그것은 moar "흐르는"그것을 시각화하는 방법을 가지고있는 것이 좋을 것입니다.

내 다이어그램을 계산할 더 좋은 방법이 있습니까? 제 아이디어가 다이어그램을 변형시킬 것이라고 생각합니다. 이것을 막을 수있는 방법이 있습니까? 그리고 어떻게 값 사이에 "흐름"을 추가 할 수 있습니까?

도움 주셔서 감사합니다.

Answer 1

간격으로 데이터를 분리 할 수 ​​있습니다. 각 값에 대해 열을 표시하는 대신 각 간격마다 열을 표시하십시오. 사용 가능한 크기에 따라 간격 수를 설정하십시오.

거친 아이디어 :

var intervalCount = 20; 

var myValues = [ 0,1,1,2,500,5000,10000,10001,10002, 10002]; 

var min = Math.min.apply(null, myValues); 
var intervalSize = (Math.max.apply(null, myValues) - min)/intervalCount; 

var myUpdatedValues = []; 
for (var i=0; i<intervalCount; i++) myUpdatedValues.push(0); 

myValues.forEach(function(value){ 
    myUpdatedValues[Math.floor((value-min)/intervalSize)]++; 
});