"global is undefined" when using viz.js through d3-graphviz

Community Help
#4

I’m not sure I answered your question though :wink:
The error I’m getting on your notebook is a bit different than what you have written down: Cannot read property 'Int8Array' of undefined

#5

@Fil Thanks a lot! Deeply appreciate your help. Now I will try to understand it as well :grin:

How to load experimental versions of libraries?
How to get normal stack traces from libraries?
#6

In case you missed it, here’s a notebook that demonstrates how to use Graphviz in Observable using Viz.js:

To use this in your own notebook, you can require it:

dot = require("@observablehq/graphviz")

And then use the dot tagged template literal:

dot`digraph { a -> b; }`

Viz.js-lite is slightly smaller than d3-graphviz (1.6M versus 2.2M).

#7

Thanks. Actually I started out with a fork of that notebook with the intention to add animated transitions to it with d3-graphviz, but couldn’t get it to work. Hopefully, I can come back with that soon now that I’ve gotten help.

#8

@mbostock d3-graphviz is only 41 KB (15 KB minified) in itself. You’re probably comparing viz-lite.js with a bundle containing d3-graphviz, the full version of viz.js and some d3 core modules. The difference between viz-lite.js and viz.js is around 0.6 MB.

Where did you get the numbers from?

I would expect that the overhead added by d3-graphviz and the d3 core modules is negligible when comparing with viz.js or viz-lite.js.

#9

I’m referring to the bundled d3-graphviz (check the network tab in your browser), which includes the D3 and Viz.js dependencies:

https://bundle.run/d3-graphviz

#10

I got 2.78 MB for that link before I released a new version of d3-graphviz with viz.js upgraded to v1.8.1 which reduces the size of the bundle with 0.53 MB.

https://bundle.run/d3-graphviz@2.0.0: 2.78 MB
https://bundle.run/d3-graphviz@2.1.0: 2.25 MB

Do you see the same reduction with v2.1.0?

#11

I collected some sizes in my very first (working) public notebook :grinning:: https://beta.observablehq.com/@magjac/size-of-libraries-and-bundles-related-to-d3-graphviz

#12

I noticed that the bundle.run version of d3-graphviz seems to work fine in a standalone notebook:

https://beta.observablehq.com/d/45f9fc3edb7a529f

1 Like
#13

I did a little more digging and this appears to be a problem with Viz.js 1.8.1, which uses a newer version of Emscripten than 1.8.0. So, this works fine:

Viz = require("viz.js@1.8.0/viz.js").catch(() => window.Viz)

html`${Viz("digraph {a -> c}")}`

But, if you change 1.8.0 to 1.8.1, you get TypeError: Cannot read property ‘Int8Array’ of undefined.

The doubly strange thing is that @observablehq/graphviz uses Viz.js-lite 1.8.1 and has no problems.

1 Like
#14

And a little more digging… Viz.js 1.8.1 has a broken UMD block that causes it to export the Emscripten-generated Module rather than Viz. I’ve filed a bug here:

1 Like
#15

Nice implementation! Thanks. Even better than @Fil’s Hello d3-graphviz (no offense)

1 Like
#16

@mbostock Thanks a lot for digging into the problem and filing the issue on viz.js! With viz.js v1.8.2 my notebook is working: https://beta.observablehq.com/@magjac/d3-graphviz-fiddling-not-working (disregard the obsolete name :grin:).

:champagne:

1 Like
#17

The https://beta.observablehq.com/d/45f9fc3edb7a529f example above no longer works. It doesn’t even load the notebook. In the console:

Error: 
bundle.86e27c12dc12d7cbbdac77c3b72faeab0dc9f0219789a2f82908792248171c66.js:2:68250
Source map error: request failed with status 403
Resource URL: https://static.observablehq.com/bundle.86e27c12dc12d7cbbdac77c3b72faeab0dc9f0219789a2f82908792248171c66.js
Source Map URL: bundle.86e27c12dc12d7cbbdac77c3b72faeab0dc9f0219789a2f82908792248171c66.js.map[Learn More]
#18

I trashed the notebook because I thought things were resolved. Do you want me to restore it?

#19

Things are indeed resolved, but I wanted to steal the implementation since I’m an Observable newbie😁. So yes please. Thank you.

#20

The only thing in that notebook is:

d3_graphviz = require("https://bundle.run/d3-graphviz")

{
  const div = html`<div>`;
  d3_graphviz.graphviz(div, false).renderDot(`digraph { a -> b }`);
  return div;
}

So, there you go. :smile:

#21

The devil is in the details you know. Thanks :nerd_face:

#22

@mbostock How did you share https://beta.observablehq.com/d/45f9fc3edb7a529f earlier? Wasn’t that one of your private, unpublished notebooks? See my question to @tom at URL redirection

#23
1 Like