In [16]:

    

from __future__ import print_function # For py 2.7 compat

from IPython.html import widgets # Widget definitions
from IPython.display import display # Used to display widgets in the notebook
from IPython.utils.traitlets import Unicode


    

In [17]:

    

class DataWidget(widgets.DOMWidget):
    _view_name = Unicode('DataTransferView', sync=True)
    python_data = Unicode(sync=True)


    

In [30]:

    

%%javascript
require.config({paths: {d3: "https://mpld3.github.io/js/d3.v3.min"}});


require(["widgets/js/widget","d3"], function(WidgetManager,d3){
    
    // Define the DatePickerView
    var DataTransferView = IPython.DOMWidgetView.extend({
        render: function(){
            
                        <style>
                            .chart rect {
                                fill: steelblue;
                             }
                            .chart text {
                                fill: white;
                                font: 10px sans-serif;
                                text-anchor: end;
                             }
                        </style>
            this.$el.html("<svg class='chart'></svg>");
        },
        
        update: function() {
            
            // Set the value of the date control and then call base.
            //this.$date.val(this.model.get('value')); // ISO format "YYYY-MM-DDTHH:mm:ss.sssZ" is required
            
            var data = JSON.parse(this.model.get('python_data'));
            
            var width = 420,
                barHeight = 20;

            var x = d3.scale.linear()
                            .range([0, width]);

            var chart = d3.select(".d3-example")
                          .attr("width", width);


            x.domain([0, d3.max(data, function(d) { return d.value; })]);
            
            chart.attr("height", barHeight * data.length);

            var bar = chart.selectAll("g")
                              .data(data)
                            .enter().append("g")
                              .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

            bar.append("rect")
                   .attr("width", function(d) { return x(d.value); })
                   .attr("height", barHeight - 1);

            bar.append("text")
                   .attr("x", function(d) { return x(d.value) - 3; })
                   .attr("y", barHeight / 2)
                   .attr("dy", ".35em")
                   .text(function(d) { return d.value; });
            

            function type(d) {
                d.value = +d.value; // coerce to number
                return d;
            }
                                                        
            return DataTransferView.__super__.update.apply(this);
        }
        
        
    });
    
    // Register the DatePickerView with the widget manager.
    WidgetManager.register_widget_view('DataTransferView', DataTransferView);
});


    

In [31]:

    

my_widget = DataWidget()
display(my_widget)


    

In [33]:

    

my_widget.python_data = """
                         [{"leftpos":10, "rightpos":25, "value":1.0, "strand":"+"},
                          {"leftpos":10, "rightpos":25, "value":1.0, "strand":"+"},
                          {"leftpos":10, "rightpos":25, "value":19.0, "strand":"+"},
                          {"leftpos":10, "rightpos":25, "value":15.0, "strand":"+"},
                          {"leftpos":10, "rightpos":25, "value":31.0, "strand":"+"},
                          {"leftpos":10, "rightpos":25, "value":11.0, "strand":"+"}]
                        """


    

In [11]:

    

%%html

<style>

.chart rect {
  fill: steelblue;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

</style>
<svg class="chart"></svg>


    

In [22]:

    




    

In [ ]: