Run the following command in order to create the base project: cookiecutter Īfter running the cookiecutter command you will need to add some basic information about your custom Jupyter widget: author_name : Tzahi Vidas author_email : github_project_name : jupyter_britecharts_widget_tutorial github_organization_name : kazuar python_package_name : jupyter_britecharts_widget_tutorial npm_package_name : jupyter_britecharts_widget_tutorial npm_package_version : project_short_description : A tutorial for creating Jupyter widget for Britecharts We will use the Widget Cookiecutter template for our project. This template will already have most of what we will need.
In my opinion, the best place to start our work would be to use a pre-defined template for our widget. We will start by creating a virtual / conda environment with the following packages: jupyter ipywidgets cookiecutter Creating the template for our widget
Create a dev environment for the new widgetįor this tutorial we will need to install the jupyter package, ipywidgets for our jupyter notebook and widgets, and cookiecutter for the Jupyter notebook widget template.
There are a few tutorials about creating Jupyter widgets in or the JS extension part in this Jupyter github book.Īlso, you can go over the source code of some ipwidgets such as ipyleaflet or gmaps and learn from that code how to create Jupyter widgets.Īnother tutorial shows how to embed mapbox plots as part of the notebook.Īll of these are great tutorials, but I was looking for a tutorial teaching how to build a simple widget, from scratch, that uses an external javascript library as part of the Jupyter notebook. Jupyter notebook is increasingly becoming one of my main tools and I wanted to be able to extend the basic Jupyter notebook and create additional widgets / use external javascript libraries inside Jupyter notebook. The Jupyter widget we’ll create in this example will allow us to add Britecharts to our Jupyter notebook. You can combine it with ReviewNB to remove some of the kinks in the workflow.This post will provide a step-by-step tutorial for creating and running a Jupyter widget.
But it’s a proven way of collaborating on software projects & is widely used in data science work as well. If you are new to Git, it can take some time to get used to all the commands. You can use nbviewer or ReviewNB if your notebook contains interactive widgets and such. If it’s a private repository, the person you are sharing the link with needs to have a GitHub account and have permission to access your repository.įor security reasons, GitHub does not run any Javascript in the notebook. So it’s very convenient to share read-only links to the notebook like this one. When you browse notebooks in your repository on GitHub it renders them as HTML.
Open the desired commit and click “View File” to see the notebook status at that commit. You can also browse old commits on GitHub by going to Your project page -> Commits. If you want to actually revert to an old state and make some changes there, you can start a new branch from that commit. At the end run “git checkout master” to go back to the current state. If you want to temporarily go back to a commit, checkout the files, and come back to where you are then you can simply checkout the desired commit. Or run git merge + git push from command line, Once your changes are approved you can merge them from GitHub UI. It shows you rich diffs & lets you comment on any notebook cell to discuss changes with your team. You can use ReviewNB to solve the notebook diff’ing problem. But in case of Jupyter, GitHub shows JSON diffs which are really hard to read (see below). GitHub pull request are fantastic for peer review as they let you see changes side-by-side & comment on them.
On the next page provide title & describe your changes in brief, hit “Create pull request” again. Go to your Project page -> Pull requests tab -> click “New pull request”.Ĭhoose which branch you’d like to merge into master. You can create pull requests from GitHub UI. Most likely, you’d want to first share it with your peers, get their feedback before merging it into master branch. Let’s say you’ve been working on feature branch for a while and it’s ready for prime time. git push -set-upstream origin customer_data_insightsĪnd then do git push to push your commits to this newly created branch.