![]() And it’s not the same as the full control you have in designing a D3 visualisation in a normal HTML page. And even though our visualisation was very large in size (100,000px in height!), it didn’t slow down the Jupyter notebook.īut you can see moving data and variables between the two languages is not completely painless. We were able to create a visualisation customised to our needs. You can neatly load in external css and js files for your visualisation into Jupyter like this: In our case, we decided to do this because our JavaScript code was long and unwieldy and looked off-putting for people using the notebook to select titles. Stefaan proposes putting your visualisation code in a separate file as a way to create a reusable visualisation module. Putting visualisation code in external files Once your visualisation is ready as a standalone, it’s straightforward to copy your code across, just editing a few minor things for the Jupyter environment. Debugging JavaScript in a Jupyter notebook is not great (there’s lots of stuff already going on in the DOM structure and error messaging, code formatting is nicer in a proper code editor, and I also found Jupyter temperamental for forcing a hard refresh when I was updating the code). You’ll likely want to create your visualisation code in a standalone HTML page first and do all your debugging there. Creating a D3 visualisation in a Jupyter cell This approach is also neat if you choose to keep your JavaScript in an external file that you load in, and can thus just reference the data file by filename there. ![]() (See the accompanying notebook for a fuller example of this). You can run JavaScript in a Python Jupyter cell simply by writing JavaScript in a Python Jupyter notebook cell The code is on Github and you can try the notebook live on Binder. There’s an accompanying Jupyter notebook to this blog post which demonstrates the steps below. What I’ve put below repeats some of Stefaan’s post, adds some reflections, and notes where we did things a little differently or for different reasons. I found this blog post by Stefaan Lippens the most helpful for figuring out what to do and I’d recommend giving it a read. We, therefore, looked into extending the design in D3. Creating it in JavaScript meant we could add selection boxes as part of the visualisation.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |