Add a minimal working code example?

[erikbrinkman]

Add a minimal working code example?

[orouz]

@erikbrinkman codepen would be great, yes.

[erikbrinkman]

I'll be able to answer this more fully later, but here's a short summary.

observable does two things which are not standard:

1. it uses require, but with a lot different resolutions, e.g. it's not the same as nodes's require, but it is similar, and does ultimately look on npm.
2. each "cell" in a sheet has a single output that it given a name. you can assign them with a simple expression name = val or with a complex one name = { ... return val } the latter is essentially syntactic sugar around name = (() => { ... return val })();.

As a result, to use it, you want to only copy the inner pieces, and translate the requires to the appropriate dependency.

As for how you can use it, there are two general options that I think you might want, without going into the complexity of javascript module formats, which get's much more complex.

1. if you're designing a website using standard <script src="..."></script> than you'll want to add <script src="https://unpkg.com/[email protected]"></script> somewhere in your html. All of the functions will be in the d3 variable as this is meant as a plugin, so you can then use d3.dagStratify() (note it adds it's properties to d3, so you can continue to use other d3 functions)
2. you may be using modules, so if your base script is imported via <script type="module" src="my-script.js"></script> then you should also be able to use a module import, likely from a cdn like esm, where somewhere in your javascript you'll want to do import * as d3dag from "https://esm.sh/d3-dag". If you go this route, I encourage you to look up esm.sh / other esm cdns and more info about modules, because this advice just scratches the surface.

As a final note, while this can take a long time to compute, it's not asynchronous, so you won't gain anything by making it async. It won't ever get interrupted. If you want to compute the layout without affecting rendering, you'll want to look into service workers.

[erikbrinkman]

Hi @endrebak, observable is a notebook, so all the code to generate the example is included with the example. Just click the arrow next to every cell to show the "code" for that cell.

[orouz]

@erikbrinkman observables are editable, but (IMO) it's not convenient to extract code from there to play with locally, compared with codesandbox for example

anyway, just my 2 cents. thanks for a making a great lib!

[erikbrinkman]

@orouz minus the imports it's really no different than it would be anywhere else. There used to be codepen examples too, I just it was mostly redundant. Is that what you had in mind?

[endrebak]

For a JS-newb it is hard to understand what to do. I'm sure I'll get it working eventually, but for now the code you linked to does not compile. https://gist.github.com/endrebak/8d12a2368bc7ff9aca7e974b9289dc2b gives Uncaught SyntaxError: Unexpected identifier.

Normally, you'd find a working code example made by someone somewhere for just about any library, but not for d3-dag for some reason.

Edit: I see now that you can click on the side to get the code. I was clicking on the data itself. My mistake.

Your code uses require which seems to not be JS, but node.

[endrebak]

Here is a gist with the .html and .js I am trying to use: https://gist.github.com/endrebak/9a504a844a215966b29a4ad40fb3a769

I am using npm install -g live-server as a server which has auto-reload. When I try to view the webpage I get the following error in the console:

chart.js:12 Uncaught SyntaxError: Unexpected token '['

Line 12 is this line btw: const [key, reader] = sources.get(source); so it seems like it does not understand that destructuring.

I hope I do not sound negative. I'd really like to use this library - the others I tried were too primitive (I wasn't able to avoid overlapping edges for example.) But I have been unable to get d3-dag to work :/

So any hints on how to fix the code I linked to above would be appreciated (this is too large a question for traditional places to ask like SO. They do not accept "how do I get this library/giant code snippet to work durr" kind of questions.)

Edit:

Seems like these kinds of closures were not working for me:

 dag = {        const [key, reader] = sources.get(source);        const dag_data = await d3.json(`https://raw.githubusercontent.com/erikbrinkman/d3-dag/master/examples/${key}.json`);        return reader(dag_data);    }

My remaining problem is now to be able to use d3-dag from within the .js file.

d3-dag.dagStratify() gives the error ReferenceError: dag is not defined which likely means that - is not a valid identifier name. Which makes it hard to use a library which has - in the name XD

[endrebak]

Thanks! I am working on it and am hopefully soon done :) Then I'll make the gist public and the example will be visible to other newbs googling "d3-dag examples" so I guess you can close this if you want.

[endrebak]

I cannot for the life of me figure out what this line does though:

const svgNode = svg`<svg width=${width} height=${height}></svg>`

It seems like svg should be a function because when I add this line before the one above svg = d3.select("#wrapper").append("svg"); I get the error: chart.js:48 Uncaught (in promise) TypeError: svg is not a function.

This almost works: https://gist.github.com/endrebak/9a504a844a215966b29a4ad40fb3a769

I guess what the for me non-working code above does is create an svg-node so I should be able to find some other way to do that.

Edit:

Got it to work. See the updated gist. I am sure it is a worst-practice example as I've only used ClojureScript for web stuff before.

[erikbrinkman]

I'm glad you got this working! Sorry if I didn't reply again, I think you figured it out. For more context, svg... is called a tagged template literal, you can look into what it does, but essentially it requires svg to be a function. I think observable defines it to make rending plots easier.

Also, I'd like to keep this open for now, so I can help prevent your frustration and address @orouz 's comment about a more "straightforward" code example.