2015-01-15 1 views
3

CS3 파일의 데이터를 사용하여 d3.js, dc.js 및 crossfilter를 사용하여 HeatMap을 만들 수 있습니다.HeatMap - JSON 데이터를 사용하는 dc.js 및 d3.js

코드 :

var chart = dc.heatMap("#test"); 
d3.csv("morley.csv", function(error, experiments) { 
    var ndx = crossfilter(experiments), 
     runDim = ndx.dimension(function(d) { return [+d.Run, +d.Expt]; }), 
     runGroup = runDim.group().reduceSum(function(d) { return +d.Speed; }); 
    chart 
    .width(45 * 20 + 80) 
    .height(45 * 5 + 40) 
    .dimension(runDim) 
    .group(runGroup) 
    .keyAccessor(function(d) { return +d.key[0]; }) 
    .valueAccessor(function(d) { return +d.key[1]; }) 
    .colorAccessor(function(d) { return +d.value; }) 
    .title(function(d) { 
     return "Run: " + d.key[0] + "\n" + 
       "Expt: " + d.key[1] + "\n" + 
       "Speed: " + (299000 + d.value) + " km/s";}) 
    .colors(["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]) 
    .calculateColorDomain(); 
    chart.render(); 
}); 

하지만 난 JSON 데이터, 일부 JSON 데이터와 아마 배열을 사용하여이 같은 일을하고 싶다. 이것은 멍청한 질문 같지만 heatmap에 JSON 데이터를 사용하는 예제를 찾을 수 없었습니다.

답변

4

JSON 파일을 사용하는 경우 코드는 대체로 d3.csvd3.json으로 바꿉니다. 데이터가 이미 브라우저에로드 된 경우

당신은이 기능을 제거 할 수 있습니다 그냥 실행

var experiments = JSON.parse(json_object) //if json_object is still a string 
var ndx = crossfilter(experiments) 

를하고 코드의 나머지 부분은 동일합니다.