Basically for my school project, I need to integrate either this tool : 
http://cscircles.cemc.uwaterloo.ca/java_visualize/#mode=display or this tool:
http://pythontutor.com/visualize.html on my website. I have created a very simple website with not many features. Latter uses main technologies like Python with bdb for the backend; HTML/CSS/JavaScript with jQuery, D3.js, jsPlumb, and CodeMirror for the frontend while the former also uses the same except Java with bdb for the backend.

 

The main aim is to make programming learnable and fun for beginners so as the tool shows different pointers when data structures are used I need that in my website. Basically I need to implement all the features on my website- so it can be visualised as a splitscreen where one side you can use the codemirror to write codes and then on the other sides one can visualise the output. Documentations are provided on the website regarding the tool but my main task is to integrate it with my website not embed it. It should look like I have done some real work rather than just embedding it on my website, in short, it should feel as a part of the website.

 

I need this to showcase it as a a part of my final year project so I would need a well documented code or guidelines as to how the whole process was achieved in order to tackle queries during presentation.