Example of a custom widget for iPython 3.1 notebook

CustomWidget.js

/* Should be placed inside your .ipython/nbextensions folder */
require(["widgets/js/widget", "widgets/js/manager"], function(widget, manager){
    console.log('Module loaded');
	var CustomPickerView = widget.DOMWidgetView.extend({

        // Render the view.
        render: function(){
            this.$el.text('Hello World!');
        },
		update: function(options) {
            console.log("doing update");
        }
    });	
    //manager.WidgetManager.register_widget_view('CustomPickerView', CustomPickerView);
	return {CustomPickerView: CustomPickerview};
});

CustomWidget.py

/* Import the CustomWidget into your iPython notebook */

from IPython.html import widgets # Widget definitions
from IPython.display import display # Used to display widgets in the notebook
from IPython.display import Javascript
from IPython.utils.traitlets import Unicode # Used to declare attributes of our widget

class CustomWidget(widgets.DOMWidget):
    _view_name = Unicode('CustomPickerView', sync=True)
    _view_module = Unicode("nbextensions/CustomWidget", sync=True)