The margin syntax error is being you are missing parentheses. An Observable cell looks like a normal assignment statement in JavaScript, but it isn’t. In normal JavaScript, you can say:
const margin = {top: 20, right: 30, bottom: 30, left: 40};
But in an Observable cell, you need parentheses:
margin = ({top: 20, right: 30, bottom: 30, left: 40})
That’s because an Observable cell is more akin to the body of an arrow function: it can be either an expression or a block statement. If you were writing an arrow function, and you said:
const margin = () => {top: 20, right: 30, bottom: 30, left: 40};
You’d get a syntax error. But if you say:
const margin = () => ({top: 20, right: 30, bottom: 30, left: 40});
Then the margin
function returns the expected object. Observable cells are the same way—it’s just that the Observable runtime calls your function (your cell definition) automatically.
As for the other error, I think you need to replace:
d3.json("jsondata").then(function(root) {
… code that references root goes here …
});
With
const root = jsondata;
… code that references root goes here …
That, or just rename your jsondata
cell to root
, and then you don’t need a local variable, and you can just reference the cell value directly.
Take a look at my sunburst notebook for a related example: