GitHub -> JSFiddle directory structure error

Question

I have a working JSFiddle example. It happens to be a D3 demo but this isn't directly a D3 issue (at least I don't think so):

https://jsfiddle.net/petersmagnusson/dofamupd/#  (Ref "1")

I wanted to properly link it to the matching GitHub repository:

http://jsfiddle.net/gh/get/library/pure/Magnusson-Institute/m008/tree/master/Demo/  (Ref "2")

But that link results in an error from the JSFiddle site saying "wrong data structure. Directory structure seems to be invalid. Is your URL valid? Check documentation."

The underlying (public) repository is here:

https://github.com/Magnusson-Institute/m008

I tried starting from the JSFiddle demo:

https://github.com/zalun/jsFiddleGithubDemo/tree/master/Demo/

And copy-pasting incrementally, but that just seems to run into other problems with JSFiddle (file caching).

(Apologies for not having direct links to JSFiddle above, but StackOverflow enforces including code if you have a JSFiddle link, but this question is about the link ...)

Update: moved it to a subdirectory "Demo", and changed link URL. Now at least it loads, but it doesn't run properly.

Look at (Ref 1) and (Ref 2) above. The code is identical. Yet, lifting it from GitHub, vs copy-pasting into a fresh jsfiddle, produces different results. If you start a fresh jsfiddle, copy-paste the html, js, and css frames, and add external dependency for D3 (https://d3js.org/d3.v4.min.js), then a fresh jsfiddle runs fine. But lifting from github doesn't.

Somewhere along the way JSFiddle creates slightly different environments?

Answer 1

Try to create a fold like Demo and put files in it. Then url looks like

http://jsfiddle.net/gh/get/library/pure/Magnusson-Institute/m008/tree/master/Demo/

It seems that demo files can't be recognized in root.

Update: The source shows that jsfiddle will add window.onload wrapper for javascript in fresh fiddle while not for it from github, which leads to your javascript loading earlier than your html. Then d3 complains error.

A quick solution will be to add window.onload wrapper for your javascript:

window.onload = function () {
    // all your script
}