D3 & JSON in Observable Framework - Creating a Sunburst Chart and using FileAttachment

[GatsbyFitz]

Hello!

I am unfortunately struggling to use to create a sunburst chart. But after many hours with no success, I am reaching out for help! I'm sure its something silly...

const nodeData2 = await FileAttachment("data/sunburst.json").json();

Unfortunately I am getting the following error:

var width = 500;
var height = 500;
var radius = Math.min(width, height) / 2;
var color = d3.scaleOrdinal(d3.schemeCategory20b);

// Create primary <g> element
var g = d3
  .select("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// Data strucure
var partition = d3.partition().size([2 * Math.PI, radius]);

// Find data root
var root = d3
  .hierarchy(nodeData2)
  .sum(function (d) {
    return d.size;
  })
  .sort(function (a, b) {
    return b.value - a.value;
  });

// Size arcs
partition(root);

var arc = d3
  .arc()
  .startAngle(function (d) {
    return d.x0;
  })
  .endAngle(function (d) {
    return d.x1;
  })
  .innerRadius(function (d) {
    return d.y0;
  })
  .outerRadius(function (d) {
    return d.y1;
  });

// Put it all together
g.selectAll("path")
  .data(root.descendants())
  .enter()
  .append("path")
  .attr("display", function (d) {
    return d.depth ? null : "none";
  })
  .attr("d", arc)
  .style("stroke", "#fff")
  .style("fill", function (d) {
    return color((d.children ? d : d.parent).data.name);
  });

display(svg.node());

Any thoughts would be more than appreciated :)

[GatsbyFitz]

This is a snapshot of the data in the json file.

{
"name": "Retailers",
"children": [
{
"name": "Evergy",
"children": [
{
"name": "NSW",
"children": [
{
"name": "Electricity Residential",
"size": 1287
},
{
"name": "Electricity Small Business",
"size": 2
},
{
"name": "Electricity Large Business",
"size": 18
}
]
}
]
},

[Fil]

Maybe this example can be helpful?
https://observablehq.observablehq.cloud/pangea/d3/sunburst

[GatsbyFitz]

Wonderful, thank you, by switching the d.value to d.size, it worked :)