Interactive Knowledge Graph Visualization in Jupyter Notebook

by Cheuk Ting Ho

@cheukting_ho

https://cheuk.dev

Cheukting

https://slides.com/cheukting_ho/interactive-knowledge-graph-visualization-in-jupyter-notebook/

https://www.twitch.tv/cheukting_ho

Can you use JavaScript in Jupyter notebook?

Of cause! It's a web application that runs in your browser

 

You can render a cell as JS by %%javascript magic

 

However, we did a more elegant job (which I will show you

Can you call-in a JavaScript in Jupyter notebook?

Sure!

You can use

require(['']);

 

require in JavaScript let you call-in another script just like import

Inspire by

 Custom D3.js Visualization in a Jupyter Notebook

BY STEFAAN LIPPENS

 

This is how we do

The magic lies in IPython.display

from IPython.display import Javascript, display
display(
            Javascript(
                """
        < insert js code here >
        """
            )
        )

Rendering JavaScript as JS

External JS library that we need:

  • TerminusClient
  • TerminusDBGraph
require.config({
            paths: {
                TerminusClient:'https://unpkg.com/@terminusdb/terminusdb-client@3.0.3/dist/terminusdb-client.min',
                TerminusDBGraph:'https://dl.bintray.com/terminusdb/terminusdb/dev/terminusdb-d3-graph.min'
            }
        });
require(['TerminusClient','TerminusDBGraph'],
        function(TerminusClient,TerminusDBGraph){...}

Call-in an external JavaScript

The rest is...
How good you are with JS and Python

However,

there're a few challanges
when you put it in a package

1. What if it is called NOT in a Jupyter notebook?

2. How to test it?

3. What if there's no internet connection?

Let's see the actual code and it in action

👉🏻

Interactive Knowledge Graph Visualization in Jupyter Notebook

By Cheuk Ting Ho

Interactive Knowledge Graph Visualization in Jupyter Notebook

  • 1,112

More from Cheuk Ting Ho