Hi there! I’ve encountered an issue I can’t quite explain in one of my notebooks and I’m hoping somebody here can help to explain what’s going on.
I’ve forked this tangled tree visualization, which references its json array in the cell that runs the majority of its code. I put my json data into a separate cell, to make for easier reading. This works… sometimes.
If I run the chart cell where the json data used to be or the d3 cell, the visualization breaks and the chart cell presents the error TypeError: Cannot read property 'id' of undefined. This is quickly fixed by running the data cell. What confounds me is that the json data from the data cell appears to pass through successfully in all cases - console.log shows the json successfully passing into levels, nodes, and nodes_index before it’s stopped cold by a sudden undefined TypeError. For kicks I tried both importing the data from a different notebook and attaching a json file, and got the same results when referencing them.
I suspect this has something to do with Observable’s topological running environment or the way I’m passing my json, but I’m not sure where the issue actually is. I’m interested to know the cause.
Sorry that this is off the cuff (I am typing in my phone)… The only break in your notebook that I am seeing in your notebook is with the import… and that appears to be because you haven’t enabled link sharing on the notebook your trying to import. The visualization otherwise renders. Could your issue be as simple as that?
The import isn’t the issue - that cell’s not being actively referenced anywhere. (I realize it’s probably more confusing than illustrative to include it once the link’s broken, though, so I took the line out.)
You can see the problem in action by running the “chart” cell independently - that will break the code as described. Running the “data” cell independently afterward resolves the issue, so it’s something I can work around, but… it seems like it shouldn’t be happening. It also means I have to manually run the “data” cell immediately after I make any changes to the “chart” cell, which gets a bit old.
Sorry - Seems the cells were already cross updating appropriately without having to wait for the information to load. … And should emphasize that I am not one who can really help you. I am here with you now though, and these things always interest me. I don’t see an issue on my side.
I’m restructuring other parts of the code, so maybe I’ll discover either the cause or a fix in the process. Let’s see what happens!
EDIT: I sort of assumed not based on the rest of your reply, but thought it important to check - when you say you don’t see an issue on your side, do you mean you have trouble replicating the error?
I replicated the error. So yes - it’s visible here too.
Sorry that I am a bit delirious in writing this (it was late when I was poking around). One observation on your notebook is that it appears to be written like traditional JS. You might therefore find some tips for re-working it in:
I’ll continue to go out on a limb here and suggest, too, that the error is similar to the one I was encountering here:
While I can’t explain why your chart will render on load but not when re-running the import cell, from that thread and the errors you’re getting, I would imagine the root of the problem is with regard to how the ${ n.id } is being created in your SVG?
… I’ll play around more later (if I have time), and I’ll avoid cluttering up the forum with non-tested responses next time! Sorry folks! Again - mostly here for solidarity.
