As a newcomer to D3.js, I have been exploring various tutorials and exercises to familiarize myself with it. My primary goal with D3 is to load external data, typically in JSON format, and create interactive charts based on that data.
You can find the basic sunburst example here:
I managed to adapt it for my own data successfully. However, I am looking for a way to simplify the process of delivering data and handle some manipulation directly within D3.js. For example, instead of providing a hierarchical array specifically designed for a sunburst diagram, I would like to deliver a flat data file that can be manipulated as needed by D3.
Yet, I am uncertain about how to draw a sunburst chart outside of one of D3's data functions. I attempted the code below, where I included the data inline rather than loading it via JSON to make the structure visible (unsurprisingly, it did not work):
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;})
...
<p>The HTML code:</p>
<pre><code><div class="gallery" id="chart">
<svg width="960" height="700">
<g transform="translate(480,350)">
<path display="none" d="MNaN,NaNANaN,NaN 0 1,1 NaN,NaNL0,0Z" fill-rule="evenodd" style="stroke: #ffffff; "/>
</g>
</svg>
</div>
I sense that I might be overlooking something simple, but struggling to grasp how D3 will interpret all the data and generate the diagram without nesting the drawing functions within a function like d3.json.
Any insights?