[JAVA] View dynamic graphs in Jupyter notebook. (Inline display of D3.js)

Often you're touching data in Jupyter and want to display the graph inline for visualization. Often

%matplotlib inline

I think that is enough.

However, there may be times when you see a graph that is too much data to read, or you want to see a cleaner diagram. So, I found a way to get a beautiful dynamic graph with Jupyter, so I tried it.

Please see the demo first.

↓ Distributed diagram that can be moved and scaled

↓ Graph diagram connecting yourself with the people you follow on Twitter

Specifically, the result of using a JavaScript library called D3.js (https://d3js.org/) that specializes in data visualization is displayed inline in Jupyter.

First, put an extension called py_d3 in the environment where jupyter is running. (Https://github.com/ResidentMario/py_d3)

pip install py_d3

Import it with jupyter notebook and load the extension.

import py_d3
%load_ext py_d3

That way, you can use D3.js by adding the magic %% d3 at the beginning of the cell.

%%d3

<g></g>

<script>
d3.select("g").text("Hello World");
</script>

When you enter and execute

It is like this.

It can also read external JS files and CSS, so if you have created something in the past, you can execute it immediately. If you've used D3.js, you can imagine what you can do, but if you don't, you can use D3.js official website or py_d3's github README. will give you a feel for it. You can do more than you think.