D3에서 CSV를 JSON으로 전환하는 방법은 무엇입니까? 도표 같이 Github

Question

나는 this 도표를 시도하고 싶, 그러나 CSV에서 JSON에 전환하는 방법을 알아낼 수 없다.

나는이 모델이 (각 객체 ID, createdAt, numberOfWords 필드가) :

{ 
{ 
_id: someId, 
createdAt: 05/31/2016, 
numberOfWords: 0 < number < 1000 
}, 
..., 
... 
} 

• 내가 변경해야 d3.csv d3.json에를?

• 데이터가있는 파일이 아닌 변수를 전달할 수 있습니까?

• d3.csv 함수 내에서만 코드를 변경해야합니까? 아니면 데이터 표현에 의존하는 다른 장소가 있습니까?

롤업 기능에 전달되는 기능을 반드시 변경해야한다는 것을 알고 있습니까? 그래서 ...

• 어떻게 바꿔야합니까?

Answer 1

이 같은 일부 JSON 파일이 가정 :

[ 
    { 
    "_id": "id1", 
    "createdAt": "05/31/2016", 
    "numberOfWords": 996 
    }, 
    { 
    "_id": "id2", 
    "createdAt": "04/15/2016", 
    "numberOfWords": 20 
    }, 
    { 
    "_id": "id3", 
    "createdAt": "02/22/2015", 
    "numberOfWords": 350 
    } 
] 

당신이 첫 번째 예에서 날짜 형식을 찾아가를 일치시키는 데 사용되기 때문에, 사용하는 형식으로 변경해야 항목 :

format = d3.time.format("%m/%d/%Y"); // changed to your time format 

또한, 범위를 선택해야합니다 (2016에서) 데이터에 딱 맞는 캘린더를 포함하지 않는의 예입니다.

var svg = d3.select("body").selectAll("svg") 
     .data(d3.range(2015, 2017)) // the range is 2015 and 2016 

은 이제 예제를 실행 할 수 있으며 그것은 단지 두 캘린더를 적재되는지 확인하십시오 : 그럼 2 SVGs (2 년)로 줄일 수 있습니다. 예에서 CSS 선언

var color = d3.scale.quantize() 
       .domain([0, 1000]) // from 0 to 1000 words 
       .range(...); 

범위는 선택 서로 다른 색상 :

아, 색상 규모는 그래서이 줄을 변경, 당신은 0에 1000 말했다 단어의 양을 기준으로 할 수있다 .

당신이 JSON 파일을 가지고 있기 때문에, JSON으로로드 :

d3.json("yanis.json", function(error, json) { 
    if (error) throw error; 

지금 당신은 날짜에 의해 색인지도가되도록 데이터를 재 배열해야합니다. 이를 수행하는 데는 여러 가지 방법이 있습니다.

var rect = svg.selectAll(".day") 
     .data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); }) 
     .enter().append("rect") 

이제 우리는 날짜를 비교합니다 : 각 사각형 이전에 날짜 문자열에 바인딩 생성 된

var data = d3.nest() 
      .key(function(d) { 
       return d.createdAt; // the key is your date 
      }) 
      .rollup(function(d) { 
       return {"numberOfWords": d[0].numberOfWords, "id": d[0]._id}; // return an object containing the data for each key 
      }) 
      .map(json); 

: 당신은 당신의 파일의 특성에 적응, 예에서와 같이 nest() 기능을 사용할 수 있습니다 문자열을 각 사각형에 바인딩하고 data 집합에 있는지 확인하십시오.일치하는 항목이 발견되는 경우 해당 채우기 색상을 결정하는 CSS 클래스가 나타납니다 마지막으로

rect.filter(function(d) { 
    return d in data; // proceeds only for matching dates 
}).attr("class", function(d) { 
    return "day " + color(data[d].numberOfWords); // apply a CSS class 
}) 

당신은 또한 title 선택을 변경해야을, 그래서 툴팁 단어 또는 ID의 번호와 같은, 뭔가 중요한 표시됩니다 :

.select("title") 
    .text(function(d) { 
     return d + ": " + data[d].numberOfWords + " words"; 
    }); 

네, 원하는 경우 전체 JSON 파일을로드하는 대신 변수에 할당 할 수 있습니다. working example :

Answer 2

D3은 달력 예제에서 사용 된 csv 메소드와 유사한 json에 대한 방법을 제공합니다. https://github.com/d3/d3/wiki/Requests