How can I create a d3 js plugin?

I’d like to have more advanced charting functionality but don’t have much experience with js and vue… Any suggestions for how best to approach this?

I have similar question for implementing fabricjs.
I do have experience with js and sort of get vue. But want to know what is the best way to go about adding fabricjs functionality http://fabricjs.com/

YOu could create a vue component, but you can also use script tags to import the fabric code into weweb using the “plain HTML” path in their quick start . The Statechange Weweb Embed Converter (demoed on youtube recently) would let you work with this in the weweb editor rather than having to publish each time. It’s my go-to for accelerating this kind of JS-to-weweb connections.

Earlier today on Statechange office hours I was helping a member bring Anycharts into weweb, so that’s a possible thing. It requires a little bit of JS, but not nearly as much as bringing in a full Vue component. I made a video for help I gave to someone on another weweb community thread:

2 Likes

Thanks! Will try this out and let you know.

I was able to embed in page, etc. Thanks again.

I was not able to get weweb-embed.statechange.ai code working though. Would be nice to be able to preview the page with the fabricjs canvas, but only works when published. Pretty sure I set it up exactly as in the video, but no luck. Not sure how to trouble shoot.

Thank you! I was able to use your statechange converter to import the d3.js scripts to a specific page. After that I was able to translate your tutorial to d3 and cobble together a chart with toy data.

1 Like

At a guess you have a timing error. If you run the code for the createelement etc on page load, it tries to run while the fabricjs script tag may be still loading. I’ve found that adding a little bit of a setTimeout can fix this, or set the running code on a later action (like a button click).

Got it working! Thanks again.
Here’s the setup for others to follow.



2 Likes

I am curious if anyone is currently using D3.js in a WeWeb project - if so, I’d love to chat!

I can’t speak to using in production by iteself, but its a dependency of many charting libraries that you’ve seen around. The recent release of NPM (really Unpkg) support in weweb will also make using d3 and other libraries much easier!