D3. js - загрузка и управление внешними данными

Я новичок в D3.js и играю с различными учебными пособиями / упражнениями и т. Д., Но моя основная потребность в D3 - это загрузка внешних данных (обычно JSON) и рисование некоторых интерактивных диаграмм на основе эти данные.

Базовый пример солнечных лучей здесь :

Я успешно адаптировал его к своим собственным данным.Однако я надеялся упростить доставку данных и справиться с некоторыми манипуляциями внутри D3.js. Например, вместо иерархического массива, готового для диаграммы солнечных лучей, я хотел бы предоставить плоский файл данных, которым можно будет управлять по мере необходимости с помощью D3.

Но я не уверен, как нарисовать диаграмму солнечных лучей вне одной из функций данных D3. Я попробовал приведенный ниже код и вместо загрузки данных через json включил их в строку, чтобы структура была видна (неудивительно, что это не сработало):

var w = 960, 
    h = 700, 
    r = Math.min(w, h) / 2, 
    color = d3.scale.category20c();

var vis = d3.select("#chart").append("svg:svg") 
    .attr("width", w) 
    .attr("height", h) 
       .append("svg:g") 
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

var partition = d3.layout.partition() 
    .sort(null) 
    .size([2 * Math.PI, r * r]) 
    .value(function(d) { return 1; }); 
var arc = d3.svg.arc() 
    .startAngle(function(d) { return d.x; }) 
    .endAngle(function(d) { return d.x + d.dx; }) 
    .innerRadius(function(d) { return Math.sqrt(d.y); }) 
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); }); 
var data = [ 
                        {'level1': 'Right Triangles and an Introduction to Trigonometry', 
'level2': '', 'level3': '', 'level4': '', 'branch': 'TRI', 'subject': 
'MAT'}, 
                        {'level1': '', 'level2': 'The Pythagorean Theorem', 'level3': '', 
'level4': '', 'branch': 'TRI', 'subject': 'MAT'}, 
                        {'level1': '', 'level2': '', 'level3': 'The Pythagorean Theorem', 
'level4': '', 'branch': 'TRI', 'subject': 'MAT'}, 
                        {'level1': '', 'level2': '', 'level3': 'Pythagorean Triples', 
'level4': '', 'branch': 'TRI', 'subject': 'MAT'} 
                        ]; 
console.log(data); // looks good here 
var nest = d3.nest() 
        .key(function(d) { return d.subject;}) 
        .key(function(d) { return d.branch;}) 
        .entries(data); 
console.log(nest); // looks good here 
var path = vis.selectAll("path") 
      .data(nest) 
    .enter().append("svg:path") 
      .attr("display", function(d) { return d.depth ? null : 
"none"; }) // hide inner ring 
      .attr("d", arc) 
      .attr("fill-rule", "evenodd") 
      .style("stroke", "#fff") 
      .style("fill", function(d) { return color((d.children ? d : 
d.parent).name); }); 

Вот как выглядит HTML:

Я уверен, что сделать что-то не так, это довольно просто, но мне сложно понять, как D3 будет просматривать все данные и отображать диаграмму, если я не вкладываю функции рисования в такие функции, как d3.json.

Есть мысли?