I am currently working on a custom Jupyter Widget. When I include the necessary javascript using %%javascript magic in the notebook I can simply reload these cells to update my widget if I make changes, which is handy for development.
Is there a way you can do this type of easy reloading with the javascript stored outside of the notebook? Because right now I have to completely restart Jupyter when I want to see the effects of a change.
A related question: when I store the javascript externally, Jupyter somehow still knows where to find it even though I don't load it explicitly. Where does Jupyter look to find the javascript for custom widgets?
Okay so apparently I just wasn't diligent enough in clearing my outputs, which is why I got weird results. I post my solution below in case it helps other people.
I have my javascript in separate .js files. I load this into my notebook by having a cell with the following content:
from IPython.display import display, HTML
with open("javascript.js") as f:
data = f.read()
text = """<div style="overflow:auto">Loading scripts</div>
<script type="text/javascript">
{}
</script>""".format(data)
display(HTML(text))
The execution of this cell inserts the necessary javascript. When the underlying javascript files have changed, just rerun the cell to update the javascript. Then when you instantiate a new widget, it will have the updated code.
Related
Here is an example page of the Tensorflow documentation:
https://www.tensorflow.org/probability/examples/A_Tour_of_TensorFlow_Probability
Here is the source of that page: Link
How is the Jupyter notebook converted into the HTML website? I think the collapsible code blocks and the table of contents on the right look really nice. I want to do the same thing with my Jupyter notebooks (or at least get some inspiration).
I couldn't find the script which converts the notebooks nor the CSS or template, which Tensorflow uses.
The "flag" which created the collapsible code cell is ##title Import { display-mode: "form" }, but I could not find reference for that.
Some ressources:
Description of the usage of the script which generates the API documentation: Link
There is tool called nbfmt, which can format notebook, but as I understand it can only update the code style, but does not convert it: Link
I've found _book.yaml and _index.yaml in some repositories, which might indicate bookdown.
Note that I'm not looking for an answer on how to create a collapsible code cell or a table of contents, but how Tensorflow did it. I know that there are already answers for the other two questions out there.
Thanks in advance!
As you've discovered, the tools the TF docs team use are all available on GitHub, including nbconvert, nbfmt, etc. There are also some localisation tools.
Mostly, the system works at the notebook -> markdown level, but it also generates reference docs for code -> html. These are all un-styled, "plain" content. Some YAML is also generated for navigation. In theory, these outputs can be published anywhere.
Once the content is generated, the hosting/publishing platform it's served from is a proprietary system unfortunately. You can see the same system is used on developers.google.com, firebase.google.com, cloud.google.com, quantumai.google, developer.android.com and many more (check out the page layouts, custom HTML elements, etc), but it's not available outside of Google.
If you have any specific questions about the tooling, you can find us over on GitHub in the tensorflow/docs repo. Feel free to ask, we'll help if we can!
I searched a lot for this issue but didn't come to any straight to the point answer, so I am turning to you here and hopefully someone can help direct me to the right path at least.
The issue is simple, I have normal jupyter Nb and I would like to share it with others by sending them html format file. Using the normal !jupyter nbconvert --to html mynotebook.ipynbwill get the html export, but recently I started getting output with very wide screen (it uses the monitor screen).
How can I change the output screen size to maintain the same configurations even after exporting it to html?
In case my explanation wasn't clear I will add pictures:
notebook before exporting:
After exporting:
I don't want to create any special template, I just want to maintain the same parameters before exporting i.e. the width of the cells (inputs and outputs). Most of the answers I found here was talking about creating my own template or running some css code (both I don't have knowledge in...). Is there a ready to use template or argument that I can use to maintain the same layout?
I ran into the same issue. I think the problem might be that --to html uses the Jupyter Lab template by default. Once I added --template classic to my call to nbconvert the resulting HTML-file was much smaller and resembled the actual Jupyter notebook much more closely.
I am using jupyter and jupyter-nbconvert to create a html presentation. However, I have some cells that produce an output image that I want to share on a separate slide. Is it possible to redirect the output of one cell to its own slide?
You might want to consider using Damian Vila's Jupyter extension RISE. It provides some of the control you need for how cells are displayed in slides.
It is flagged by the latest Jupyter (3.6) as possibly not compatible, but I've seen no problems using it so far.
I'm interested in placing a javascript powered graph into my jupyter notebook file as a div. This website uses a code magic approach, and pasting the graph code directly in a jupyter notebook cell:
http://blog.thedataincubator.com/2015/08/embedding-d3-in-an-ipython-notebook/
However, as many of such javascript powered graphs are lengthy, I think it would be desirable to simply call the javascript file that contains the graph's code, and subsequently appending it as a div in jupyter notebook. It sounds simple enough, but with all the path crisscrossing I have confused myself and I'm not sure what approaches I have tried are working or not.
I tried:
%%javascript
require.config({
paths: {
graph: 'filepath.js'
}
});
This did not throw any errors, but when I could't append any divs. I'm thinking perhaps the issue is actually the way data is linked between python and the js file. The above link uses an approach that points the data to window.vizObj={} I wonder if there are no simpler solutions?
Also, There is a converter library: http://mpld3.github.io/. Of course, I'm not against that, but for the sake of illustration, (and pride) I would kind of like to get to the bottom of this. Please feel free to share any/all thoughts on this matter.
If possible, please upload a jupyter notebook file so I can see how one goes about appending a js graph into jupyter notebook from a js file, and how the data is pointed. Any type of graph is ok, maybe a simple d3.js line graph.
Just do it from python
from IPython.core.display import Javascript
_filepath = 'filepath.js'
with open(_filepath, 'r') as _jscript:
code = _jscript.read()
Javascript(code)
I have a project with many scripts using Matplotlib. I'd like to build a web interface for this project.
How do you place a Bokeh chart within a Chameleon template? I'm using Pyramid and the Deform bootstrap if that matters.
Does anyone have a good example out there?
There are several different issues to address here.
If you are truly trying to port a lot of Matplotlib plots into interactive JS, then it's possible that the mpld3 project is a good fit for you. However, you should be aware that by using D3, there will be performance implications, depending on how many points are in your plot. Bokeh also does have basic Matplotlib support now, and will only be getting more. Jake is currently refactoring the mpld3 project into an explicit exporter and then D3 renderer, and we will also be potentially building off of this work for the Bokeh Matplotlib support.
To do this with Bokeh, you can grab the raw HTML for a plot by looking at how e.g. HTMLFileSession.dumps() is implemented: https://github.com/ContinuumIO/bokeh/blob/master/bokeh/session.py#L295. The default template is bokeh/templates/base.html; however, this is a full HTML file, and not a fragment. The dumps() method is pretty straightforward, as is the default template, so you should be able to get what you need from looking at those. Hopefully for the next release, we will have finished out a HTMLFragmentSession which will make it easier to embed.
You want to use plot.create_html_snippet. This function returns the code that you want to appear in the HTML, the function also writes out an embed file.
This is what an embed snippet looks like
<script src="http://localhost:5006/static/dc0c7cfd-e657-4c79-8150-6a66be4dccb8.embed.js" bokeh_plottype="embeddata" bokeh_modelid="dc0c7cfd-e657-4c79-8150-6a66be4dccb8" bokeh_modeltype="Plot" async="true"></script>
the following arguments control how the embed file is written out, and where the js code searches for the embed files.
embed_base_url controls the url path (it can be absolute or relative) that the javascript will search for the embed file in.
embed_save_loc controls the directory that python will write out the embed file in. embed_save_loc isn't necessary when server=True
static_path controls the url path (it can absolute or relative) that the javascript will use to construct URLS for bokeh.js and bokeh.css. It defaults to http://localhost:5006/static/, but could just as easily point to a CDN
When running the bokeh server, navigate to http://localhost:5006/bokeh/generate_embed/static . I think this requires you to be running on master because of a bug.
I hope this helps.