notebook.community

Edit and run



In [1]:

    
import ast
import json

import numpy as np
import pandas as pd

from IPython.display import display



In [2]:

    
income_data = pd.read_csv('income_data.csv', sep=';')
income_data



In [3]:

    
import ipywidgets as widgets
from traitlets import Unicode, validate


class HelloWidget(widgets.DOMWidget):
    _view_name = Unicode('HelloView').tag(sync=True)
    _view_module = Unicode('hello').tag(sync=True)
    _view_module_version = Unicode('0.1.0').tag(sync=True)
    value = Unicode().tag(sync=True)



In [4]:

    
%%javascript
require.undef('hello');

define('hello', ["@jupyter-widgets/base"], function(widgets) {

    var HelloView = widgets.DOMWidgetView.extend({

        // Render the view.
        render: function() {
            this.el.textContent = 'Hello World!';
        },
    });

    return {
        HelloView: HelloView
    };
});



In [5]:

    
b = HelloWidget()
b



In [6]:

    
b.value = 'bob'



In [7]:

    
b



In [8]:

    
import ipywidgets as widgets
from traitlets import Unicode, validate


class SciSheetWidget(widgets.DOMWidget):
    _view_name = Unicode('SciSheetView').tag(sync=True)
    _view_module = Unicode('scisheetwidget').tag(sync=True)
    _view_module_version = Unicode('0.1.0').tag(sync=True)
    _model_data = Unicode('Welcome!').tag(sync=True)
    
    def load_df(self, df):
        if type(df) == pd.core.frame.DataFrame:
            model_data = df.to_json(orient='split')
            model_data = ast.literal_eval(model_data)
            self._model_data = json.dumps(model_data)
            #self._model_data = json.dumps(model_data['data'])
            #self._model_header = json.dumps(model_data['columns']) 
            #self._model_row_header = json.dumps(model_data['index']) 
        else:
            print('Please enter a pandas dataframe')



In [9]:

    
class HandsOnTableDataFrame:
    def __init__(self, df):
        self._df = df
        self._widget = SciSheetWidget()
        #self._widget.observe(self._on_data_changed, '_model_data')
        #self._widget.unobserve(self._on_displayed)
        print('widget initialized')

    def _on_displayed(self, e):
        if type(self._df) == pd.core.frame.DataFrame:
            print('on displayed')
            model_data = self._df.to_json(orient='split')
            model_data = ast.literal_eval(model_data)
            self._widget._model_data = json.dumps(model_data)
            #self._widget._model_data = json.dumps(model_data['data'])
            #self._widget._model_header = json.dumps(model_data['columns'])
            #self._widget._model_row_header = json.dumps(model_data['index'])
        else:
            print('Please enter a pandas dataframe')

    def _on_data_changed(self, e):
        # Widget ==> DataFrame (called every time the user
        # changes a value in the graphical widget)
        print('data is being changed')
        data_dic = {}
        #data_dic['columns'] = ast.literal_eval(self._widget._model_header)
        #data_dic['index'] = ast.literal_eval(self._widget._model_row_header)
        #data_dic['data'] = ast_literal_eval(self._widget._model_data)
        data_dic = ast.literal_eval(self._widget._model_data)
        self._df = pd.read_json(json.dumps(data_dic), orient='split')

    def to_dataframe(self):
        return self._df

    def show(self):
        display(self._widget)



In [10]:

    
%%javascript
require.undef('scisheetwidget');

define('scisheetwidget', ["@jupyter-widgets/base"], function(widgets) {

    var SciSheetView = widgets.DOMWidgetView.extend({

        // Render the view.
        render: function(){ 
//             this.el.textContent = 'Hello World!';
            this.value_changed()
            this.model.on('change:_model_data', this.value_changed, this);
        },

        value_changed: function() {
//             alert(this.model.get('_model_data')); 
            console.log(this.model.get('_model_data'));
            this.el.textContent = this.model.get('_model_data');
            
//             return HelloView.__super__.update.apply(this);
        },
        
    });
        

    return {
        SciSheetView: SciSheetView
    };
});



In [11]:

    
c = SciSheetWidget()
c



In [12]:

    
c.load_df(income_data)



In [13]:

    
c



In [14]:

    
c.value









    



---------------------------------------------------------------------------
AttributeError                            Traceback (most recent call last)
<ipython-input-14-d335c3962011> in <module>()
----> 1 c.value

AttributeError: 'SciSheetWidget' object has no attribute 'value'



In [15]:

    
w = HandsOnTableDataFrame(income_data)









    



widget initialized



In [16]:

    
w.show()



In [17]:

    
w.to_dataframe()



In [18]:

    
%%javascript

var bob = document.getElementById('TextBox');
bob.innerHTML = 'Paul'



In [19]:

    
import ipywidgets as widgets
from traitlets import Unicode, validate


class SciSheetWidget(widgets.DOMWidget):
    _view_name = Unicode('SciSheetView').tag(sync=True)
    _view_module = Unicode('scisheetwidget').tag(sync=True)
    _view_module_version = Unicode('0.1.0').tag(sync=True)
    _model_data = Unicode('Welcome!').tag(sync=True)
    
    def load_df(self, df):
        if type(df) == pd.core.frame.DataFrame:
            model_data = df.to_json(orient='split')
            model_data = ast.literal_eval(model_data)
            self._model_data = json.dumps(model_data)
            #self._model_data = json.dumps(model_data['data'])
            #self._model_header = json.dumps(model_data['columns']) 
            #self._model_row_header = json.dumps(model_data['index']) 
        else:
            print('Please enter a pandas dataframe')



In [20]:

    
class HandsOnTableDataFrame(object):
    def __init__(self, df):
        self._df = df
        self._widget = SciSheetWidget()
        self._widget.observe(self._on_data_changed, '_model_data')
        self._widget.unobserve(self._on_displayed)
        print('widget initialized')

    def _on_displayed(self, e):
        if type(self._df) == pd.core.frame.DataFrame:
            print('on displayed')
            model_data = self._df.to_json(orient='split')
            model_data = ast.literal_eval(model_data)
            self._widget._model_data = json.dumps(model_data)
            #self._widget._model_data = json.dumps(model_data['data'])
            #self._widget._model_header = json.dumps(model_data['columns'])
            #self._widget._model_row_header = json.dumps(model_data['index'])
        else:
            print('Please enter a pandas dataframe')

    def _on_data_changed(self, e):
        # Widget ==> DataFrame (called every time the user
        # changes a value in the graphical widget)
        print('data is being changed')
        data_dic = {}
        #data_dic['columns'] = ast.literal_eval(self._widget._model_header)
        #data_dic['index'] = ast.literal_eval(self._widget._model_row_header)
        #data_dic['data'] = ast_literal_eval(self._widget._model_data)
        data_dic = ast_literal_eval(self._widget._model_data)
        self._df = pd.read_json(json.dumps(data_dic), orient='split')

    def to_dataframe(self):
        return self._df

    def show(self):
        display(self._widget)



In [21]:

    
%%javascript
require.undef('scisheetwidget');

define('scisheetwidget', ["@jupyter-widgets/base"], function(widgets) {

    var SciSheetView = widgets.DOMWidgetView.extend({
        
        // Render the view.
        render: function(){ 
//             var bob = this.$el.append("<textarea></textarea><br />")
//             this.el.textContent = 'Hello World!';
            this.value_changed()
            this.model.on('change:_model_data', this.value_changed, this);
        },

        value_changed: function() {
//             alert(this.model.get('_model_data')); 
            var bob = this.$el.html("<textarea>" + this.model.get('_model_data') + "</textarea><br />")
//             bob.innerHTML = this.model.get('_model_data');
//             var bob = document.getElementById('TextBox');
            console.log(this.model.get('_model_data'));
//             bob.innerHTML = this.model.get('_model_data');
//             this.el.textContent = this.model.get('_model_data');
            
//             return HelloView.__super__.update.apply(this);
        },
        
    });
        

    return {
        SciSheetView: SciSheetView
    };
});



In [26]:

    
%%javascript
require.undef('scisheetwidget');

define('scisheetwidget', ["@jupyter-widgets/base"], function(widgets) {

    var SciSheetView = widgets.DOMWidgetView.extend({
        
        // Render the view.
        render: function(){ 
            this.value_changed()
            this.model.on('change:_model_data', this.value_changed, this);
        },

        value_changed: function() {
//             alert(this.model.get('_model_data')); 
//             var bob = this.$el.html("<textarea id='textwidget'>" + this.model.get('_model_data') + "</textarea><br />")
            this.$el.html("<textarea>" + this.model.get('_model_data') + "</textarea><br />")
            //             bob.innerHTML = this.model.get('_model_data');
//             var bob = document.getElementById('TextBox');
            console.log(this.model.get('_model_data'));
//             console.log(this.$el.children().innerHTML)
//             bob.innerHTML = this.model.get('_model_data');
//             this.el.textContent = this.model.get('_model_data');
            
//             return HelloView.__super__.update.apply(this);
        },
        
    });
        

    return {
        SciSheetView: SciSheetView
    };
});



In [27]:

    
b = SciSheetWidget()
b



In [28]:

    
b.load_df(income_data)



In [30]:

    
b._model_data









    Out[30]:





u'{"index": [0, 1, 2, 3, 4], "data": [["04000US01", "Alabama", 37150, 37952, 42212, 44476, 39980, 40933, 42590, 43464, 41381], ["04000US02", "Alaska", 55891, 56418, 62993, 63989, 61604, 57848, 57431, 63648, 61137], ["04000US04", "Arizona", 45245, 46657, 47215, 46914, 45739, 46896, 48621, 47044, 50602], ["04000US05", "Arkansas", 36658, 37057, 40795, 39586, 36538, 38587, 41302, 39018, 39919], ["04000US06", "California", 51755, 55319, 55734, 57014, 56134, 54283, 53367, 57020, 57528]], "columns": ["GEOID", "State", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013"]}'



In [31]:

    
bob = HandsOnTableDataFrame(income_data)









    



widget initialized



In [32]:

    
bob.show()



In [33]:

    
bob.to_dataframe()



In [ ]:



In [34]:

    
%%javascript
require.undef('scisheetwidget');

define('scisheetwidget', ["@jupyter-widgets/base"], function(widgets) {

    var SciSheetView = widgets.DOMWidgetView.extend({
        
        // Render the view.
        render: function(){ 
            this.$table = $('<textarea />')
                .appendTo(this.$el);
            this.value_changed()
            this.model.on('change:_model_data', this.value_changed, this);
        },

        value_changed: function() {
//             this.$el.html("<textarea>" + this.model.get('_model_data') + "</textarea><br />")
            console.log(this.model.get('_model_data'));
//             this.$table.context = this.model.get('_model_data')
            $(this.$table).val(this.model.get('_model_data'));
            console.log($(this.$table).val());
        },
        
    });
        

    return {
        SciSheetView: SciSheetView
    };
});



In [35]:

    
bob2 = SciSheetWidget()
bob2



In [36]:

    
bob2.load_df(income_data)



In [37]:

    
bob2._model_data









    Out[37]:





u'{"index": [0, 1, 2, 3, 4], "data": [["04000US01", "Alabama", 37150, 37952, 42212, 44476, 39980, 40933, 42590, 43464, 41381], ["04000US02", "Alaska", 55891, 56418, 62993, 63989, 61604, 57848, 57431, 63648, 61137], ["04000US04", "Arizona", 45245, 46657, 47215, 46914, 45739, 46896, 48621, 47044, 50602], ["04000US05", "Arkansas", 36658, 37057, 40795, 39586, 36538, 38587, 41302, 39018, 39919], ["04000US06", "California", 51755, 55319, 55734, 57014, 56134, 54283, 53367, 57020, 57528]], "columns": ["GEOID", "State", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013"]}'



In [38]:

    
bob = HandsOnTableDataFrame(income_data)









    



widget initialized



In [39]:

    
bob.show()



In [40]:

    
bob.to_dataframe()



In [41]:

    
%%javascript

require.undef('scisheetwidget');

define('scisheetwidget', ["@jupyter-widgets/base"], function(widgets) {
    // Custom View. Renders the widget model.
    var SciSheetView = widgets.DOMWidgetView.extend({
        render: function(){
            // CREATION OF THE WIDGET IN THE NOTEBOOK.

            this.$table = $('<textarea />')
                .appendTo(this.$el);
    //         this.value_changed()
    //         this.model.on('change:_model_data', this.value_changed, this);
            var json = this.model.get('_model_data');
//             var datamod = JSON.parse(json);
//             console.log(datamod)
            $(this.$table).val(json);
        },  

        update: function() {
            // PYTHON --> JS UPDATE.

            // Get the model's value (JSON)
            var json_model = this.model.get('_model_data')
//             var datamod = JSON.parse(json_model);
//             $(this.$table).val(datamod);
            $(this.$table).val(json_model);

            // Don't touch this...
            return SciSheetView.__super__.update.apply(this);
        },

        // Tell Backbone to listen to the change event of input controls.

        events: {"change": "handle_text_box_change"},

        handle_text_box_change: function(event) {
            // JS --> PYTHON UPDATE.

//             var json_vals = JSON.stringify($(this.$table).val());
            var json_vals = $(this.$table).val();
            this.model.set('_model_data', json_vals);

            // Don't touch this...
            this.touch();
        },

    });

    return {
        SciSheetView: SciSheetView
    };
});



In [69]:

    
bob = SciSheetWidget()
bob



In [70]:

    
bob.load_df(income_data)



In [71]:

    
bob._model_data









    Out[71]:





u'{"index": [0, 1, 2, 3, 4], "data": [["04000US01", "AlabamaRAMAAAA", 37150, 37952, 42212, 44476, 39980, 40933, 42590, 43464, 41381], ["04000US02", "Alaska", 55891, 56418, 62993, 63989, 61604, 57848, 57431, 63648, 61137], ["04000US04", "Arizona", 45245, 46657, 47215, 46914, 45739, 46896, 48621, 47044, 50602], ["04000US05", "Arkansas", 36658, 37057, 40795, 39586, 36538, 38587, 41302, 39018, 39919], ["04000US06", "California", 51755, 55319, 55734, 57014, 56134, 54283, 53367, 57020, 57528]], "columns": ["GEOID", "State", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013"]}'



In [77]:

    
bob = HandsOnTableDataFrame(income_data)
bob.show()









    





 
 










    



data is being changed
data is being changed



In [80]:

    
bob._widget._model_data









    Out[80]:





u'{"index": [0, 1, 2, 3, 4], "data": [["04000US01", "AlabamaRAMAAAA", 37150, 37952, 42212, 44476, 39980, 40933, 42590, 43464, 41381], ["04000US02", "Alaska", 55891, 56418, 62993, 63989, 61604, 57848, 57431, 63648, 61137], ["04000US04", "Arizona", 45245, 46657, 47215, 46914, 45739, 46896, 48621, 47044, 50602], ["04000US05", "Arkansas", 36658, 37057, 40795, 39586, 36538, 38587, 41302, 39018, 39919], ["04000US06", "CaliforniaISGOLDEN", 51755, 55319, 55734, 57014, 56134, 54283, 53367, 57020, 57528]], "columns": ["GEOID", "State", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013"]}'



In [81]:

    
bob._df









    Out[81]:







  
    
      
      GEOID
      State
      2005
      2006
      2007
      2008
      2009
      2010
      2011
      2012
      2013
    
  
  
    
      0
      04000US01
      AlabamaRAMAAAA
      37150
      37952
      42212
      44476
      39980
      40933
      42590
      43464
      41381
    
    
      1
      04000US02
      Alaska
      55891
      56418
      62993
      63989
      61604
      57848
      57431
      63648
      61137
    
    
      2
      04000US04
      Arizona
      45245
      46657
      47215
      46914
      45739
      46896
      48621
      47044
      50602
    
    
      3
      04000US05
      Arkansas
      36658
      37057
      40795
      39586
      36538
      38587
      41302
      39018
      39919
    
    
      4
      04000US06
      CaliforniaISGOLDEN
      51755
      55319
      55734
      57014
      56134
      54283
      53367
      57020
      57528



In [ ]:



In [ ]:



In [ ]:



In [ ]:



In [52]:

    
%%javascript

require.undef('scisheetwidget');

define('scisheetwidget', ["@jupyter-widgets/base"], function(widgets) {
    // Custom View. Renders the widget model.
    var SciSheetView = widgets.DOMWidgetView.extend({
        render: function(){
            // CREATION OF THE WIDGET IN THE NOTEBOOK.

            this.$table = $('<textarea />')
                .appendTo(this.$el);
    //         this.value_changed()
    //         this.model.on('change:_model_data', this.value_changed, this);
            var json = this.model.get('_model_data');
//             var datamod = JSON.parse(json);
//             console.log(datamod)
            $(this.$table).val(json);
        },  

        update: function() {
            // PYTHON --> JS UPDATE.

            // Get the model's value (JSON)
            var json_model = this.model.get('_model_data')
//             var datamod = JSON.parse(json_model);
//             $(this.$table).val(datamod);
            $(this.$table).val(json_model);

            // Don't touch this...
            return SciSheetView.__super__.update.apply(this);
        },

        // Tell Backbone to listen to the change event of input controls.

        events: {"change": "handle_text_box_change"},

        handle_text_box_change: function(event) {
            // JS --> PYTHON UPDATE.

//             var json_vals = JSON.stringify($(this.$table).val());
            var json_vals = $(this.$table).val();
            this.model.set('_model_data', json_vals);

            // Don't touch this...
            this.touch();
        },

    });

    return {
        SciSheetView: SciSheetView
    };
});



In [93]:

    
class HandsOnTableDataFrame(object):
    def __init__(self, df):
        self._df = df
        self._widget = SciSheetWidget()
        self._on_displayed(self)
        self._widget.observe(self._on_data_changed, '_model_data')
#         self._widget.unobserve(self._on_displayed)
#         print('widget initialized')

    def _on_displayed(self, e):
        if type(self._df) == pd.core.frame.DataFrame:
            print('on displayed')
            model_data = self._df.to_json(orient='split')
            model_data = ast.literal_eval(model_data)
            self._widget._model_data = json.dumps(model_data)
            #self._widget._model_data = json.dumps(model_data['data'])
            #self._widget._model_header = json.dumps(model_data['columns'])
            #self._widget._model_row_header = json.dumps(model_data['index'])
        else:
            print('Please enter a pandas dataframe')

    def _on_data_changed(self, e):
        # Widget ==> DataFrame (called every time the user
        # changes a value in the graphical widget)
#         print('data is being changed')
        data_dic = {}
        #data_dic['columns'] = ast.literal_eval(self._widget._model_header)
        #data_dic['index'] = ast.literal_eval(self._widget._model_row_header)
        #data_dic['data'] = ast_literal_eval(self._widget._model_data)
        data_dic = ast.literal_eval(self._widget._model_data)
        self._df = pd.read_json(json.dumps(data_dic), orient='split')

    def to_dataframe(self):
        return self._df

    def show(self):
        display(self._widget)



In [98]:

    
bob = HandsOnTableDataFrame(income_data)
bob.show()









    



on displayed



In [99]:

    
bob.to_dataframe()



In [ ]:



In [ ]:

Final Version

python



In [ ]:

    
import ipywidgets as widgets
from traitlets import Unicode, validate


class SciSheetWidget(widgets.DOMWidget):
    _view_name = Unicode('SciSheetView').tag(sync=True)
    _view_module = Unicode('scisheetwidget').tag(sync=True)
    _view_module_version = Unicode('0.1.0').tag(sync=True)
    _model_data = Unicode('Welcome!').tag(sync=True)
    
    def load_df(self, df):
        if type(df) == pd.core.frame.DataFrame:
            model_data = df.to_json(orient='split')
            model_data = ast.literal_eval(model_data)
            self._model_data = json.dumps(model_data)
            #self._model_data = json.dumps(model_data['data'])
            #self._model_header = json.dumps(model_data['columns']) 
            #self._model_row_header = json.dumps(model_data['index']) 
        else:
            print('Please enter a pandas dataframe')



In [ ]:

    
class HandsOnTableDataFrame(object):
    def __init__(self, df):
        self._df = df
        self._widget = SciSheetWidget()
        self._on_displayed(self)
        self._widget.observe(self._on_data_changed, '_model_data')
        self._widget.unobserve(self._on_displayed)


    def _on_displayed(self, e):
        if type(self._df) == pd.core.frame.DataFrame:
            print('on displayed')
            model_data = self._df.to_json(orient='split')
            model_data = ast.literal_eval(model_data)
            self._widget._model_data = json.dumps(model_data)
        else:
            print('Please enter a pandas dataframe')

            
    def _on_data_changed(self, e):
        # Widget ==> DataFrame (called every time the user
        # changes a value in the graphical widget)
        data_dic = {}
        data_dic = ast.literal_eval(self._widget._model_data)
        self._df = pd.read_json(json.dumps(data_dic), orient='split')

    def to_dataframe(self):
        return self._df

    def show(self):
        display(self._widget)

javascript



In [ ]:

    
%%javascript

require.undef('scisheetwidget');

define('scisheetwidget', ["@jupyter-widgets/base"], function(widgets) {
    // Custom View. Renders the widget model.
    var SciSheetView = widgets.DOMWidgetView.extend({
        render: function(){
            // CREATION OF THE WIDGET IN THE NOTEBOOK.

            this.$table = $('<textarea />')
                .appendTo(this.$el);
            var json = this.model.get('_model_data');
            $(this.$table).val(json);
        },  

        update: function() {
            // PYTHON --> JS UPDATE.

            // Get the model's value (JSON)
            var json_model = this.model.get('_model_data')
            $(this.$table).val(json_model);

            // Don't touch this...
            return SciSheetView.__super__.update.apply(this);
        },

        // Tell Backbone to listen to the change event of input controls.

        events: {"change": "handle_text_box_change"},

        handle_text_box_change: function(event) {
            // JS --> PYTHON UPDATE.

//             var json_vals = JSON.stringify($(this.$table).val());
            var json_vals = $(this.$table).val();
            this.model.set('_model_data', json_vals);

            // Don't touch this...
            this.touch();
        },

    });

    return {
        SciSheetView: SciSheetView
    };
});

	GEOID	State	2005	2006	2007	2008	2009	2010	2011	2012	2013
0	04000US01	Alabama	37150	37952	42212	44476	39980	40933	42590	43464	41381
1	04000US02	Alaska	55891	56418	62993	63989	61604	57848	57431	63648	61137
2	04000US04	Arizona	45245	46657	47215	46914	45739	46896	48621	47044	50602
3	04000US05	Arkansas	36658	37057	40795	39586	36538	38587	41302	39018	39919
4	04000US06	California	51755	55319	55734	57014	56134	54283	53367	57020	57528

	GEOID	State	2005	2006	2007	2008	2009	2010	2011	2012	2013
0	04000US01	AlabamaRAMAAAA	37150	37952	42212	44476	39980	40933	42590	43464	41381
1	04000US02	Alaska	55891	56418	62993	63989	61604	57848	57431	63648	61137
2	04000US04	Arizona	45245	46657	47215	46914	45739	46896	48621	47044	50602
3	04000US05	Arkansas	36658	37057	40795	39586	36538	38587	41302	39018	39919
4	04000US06	CaliforniaISGOLDEN	51755	55319	55734	57014	56134	54283	53367	57020	57528

	GEOID	State	2005	2006	2007	2008	2009	2010	2011	2012	2013
0	TURN DOWN	Alabama	37150	37952	42212	44476	39980	40933	42590	43464	41381
1	04000US02	Alaska	55891	56418	62993	63989	61604	57848	57431	63648	61137
2	04000US04	Arizona	45245	46657	47215	46914	45739	46896	48621	47044	50602
3	04000US05	Arkansas	36658	37057	40795	39586	36538	38587	41302	39018	39919
4	04000US06	California	51755	55319	55734	57014	56134	54283	53367	57020	57528