Javascript D3 graphics?

Anvil Q&A
1

I’ve read in the documentation that Anvil can run javascript code…

Has anyone tried to run D3 graphics (based on the d3,js library) in an Anvil app?

Is this even possible?

thanks!
chris0

2

This example has a couple quirks, but it gets most of the way there.

https://anvil.works/build#clone:BVXPHRNO7XGIPMGK=C2MWUSWT3V776PL5GK4LMJQJ

Step 1) Add a column panel to the main form
Step 2) Create a new form with custom HTML
Step 3) Use the code you want for a D3 visualization (confession: I was hit-and-miss getting these to work): Gallery · d3/d3 Wiki · GitHub
Step 4) Insert the code into the customHTML for the new form
Step 5) For some reason I am having trouble loading scripts from cloudflare/etc. from within a form. Hard-coding it into the space between

<script type="text/javascript"> (paste a billion lines here) </script>

is hackish but seems to work
Step 6) Create an instance of the new form object and add it as a component to the column panel:

self.column_panel_1.clear()
d3Object = D3JSForm()
self.column_panel_1.add_component(d3Object)
4 Likes
3

Nice!
(filler filler filler)

1 Like
4

Really cool. Is it be possible to do two-way databinding between the DOM and python? I like d3.js as a way of visualizing and interacting with data, but would love to be able to manipulate the data in python instead.

For example, it would be really neat to take an example like co-occurence in d3.js and be able to bind the data to a networkx graph in python.

5

Wow I just found the other post in this forum on using vega lite in anvil. So cool. Now I’m very interested.

Would it be possible to 2-way bind to the DOM, so that for example you could build a graph object visually using something like the force editor example in d3.js? I think it would be cool to be able to visually build up a graph in d3.js and have python code on the server side that can react to that graph structure in realtime.

6

Just to say that you can call your python functions from javascript -

That way your Anvil code can be called in response to events or callbacks from your imported JS libraries.

7

Ah! I missed that in the documentation when i was browsing through. Thanks for pointing me in the right direction. Super cool platform… thanks!!

1 Like
8

Love the demo app but not sure how on earth it works with the black ball clicking, I suspect I’m missing something about this, how does the clicking in the window work?

9

This is a bare bones example, so all the mouse and key handling is done in Javascript in the custom HTML form.

A better example would split that out into Python functions being used as callbacks, so that they can interact with Anvil forms.

10

ahhh so magic was at work…