scratch notebook for testing the rendering of D3 and NVD3 based plots in IPython

In [8]:
import IPython.core.display
In [9]:
%load_ext autoreload
%autoreload 2
The autoreload extension is already loaded. To reload it, use:
  %reload_ext autoreload

#Testing basic D3 barplot

In [10]:
html_src = """
                <h2>Simple D3 plot</h2>
                <div id="chart"></div>
           """

test_d3_js = """
                    var width = 600;
                    var height = 100;
                    var root = d3.select('#chart').append('svg')
                        .attr({
                          'width': width,
                          'height': height,
                        })
                        .style('border', '1px solid black');
                    
                    var evenNumbers = [0, 2, 4, 6, 8, 10];
                    var maxDataValue = d3.max(evenNumbers);
                    var barHeight = height / evenNumbers.length;
                    var barWidth = function(datum) {
                      return datum * (width / maxDataValue);
                    };
                    var barX = 0;
                    var barY = function(datum, index) {
                      return index * barHeight;
                    };
                    root.selectAll('rect.number')
                        .data(evenNumbers).enter()
                      .append('rect')
                        .attr({
                          'class': 'number',
                          'x': barX,
                          'y': barY,
                          'width': barWidth,
                          'height': barHeight,
                          'fill': '#A6D854',
                          'stroke': '#444',
                     });    
             """

js_libs = ['http://rawgithub.com/mbostock/d3/master/d3.min.js']
In [11]:
IPython.core.display.display_html(IPython.core.display.HTML(data=html_src))
IPython.core.display.display_javascript( IPython.core.display.Javascript(data=test_d3_js,
                                                                         lib= js_libs))

Simple D3 plot

Testing NVD3 Plotting

In [93]:
test_nvd3_js  = '''
            <script>
            $(function(){nv.addGraph(function() {
                var chart = nv.models.discreteBarChart();
                chart.xAxis
                chart.tooltipContent(function(key, y, e, graph) {
                    var x = String(graph.point.x);
                    var y = String(graph.point.y);
                    if(key == 'Serie 1'){
                        var y =  String(graph.point.y)  + ' cal';
                    }
                    tooltip_str = '<center><b>'+key+'</b></center>' + y + ' at ' + x;
                    return tooltip_str;
                });
                d3.select('#mygraphname svg')
                    .datum(data_mygraphname)
                    .transition().duration(500)
                    .attr('height', 400)
                    .call(chart);
            return chart;
                });
                });
        data_mygraphname=[{"values": [{"y": 3, "x": "A"}, {"y": 12, "x": "B"}, {"y": -10, "x": "C"}, {"y": 5, "x": "D"}, {"y": 25, "x": "E"}, {"y": -7, "x": "F"}, {"y": 2, "x": "G"}], "key": "Serie 1", "yAxis": "1"}];
        </script>
            '''

html_src_nvd3 = """
                <h2>Discrete Bar Chart </h2>
                <div id="mygraphname"><svg style="height:400px;"></svg></div>
           """



js_libs = ['http://rawgithub.com/mbostock/d3/master/d3.min.js',
           'http://rawgithub.com/novus/nvd3/master/nv.d3.min.js' ]
css_style_sheets = ['http://rawgithub.com/novus/nvd3/master/nv.d3.css']
In [94]:
IPython.core.display.display_html(IPython.core.display.HTML(data=html_src_nvd3))
IPython.core.display.display_javascript( IPython.core.display.Javascript(data=test_d3_js,
                                                                         lib= js_libs,
                                                                         css = css_style_sheets))                                                                   

Discrete Bar Chart

In [79]:

#Spitting out HTML for explicit testing if the code works

In [142]:
html_text = '''
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link media="all" href="http://rawgithub.com/novus/nvd3/master/nv.d3.css" type="text/css" rel="stylesheet" />
<script src="http://rawgithub.com/mbostock/d3/master/d3.min.js" type="text/javascript"></script>
<script src="http://rawgithub.com/novus/nvd3/master/nv.d3.min.js" type="text/javascript"></script>
</head>



<h2>discreteBarChart</h2>

<div id="mygraphname"><svg style="height:400px;"></svg></div>


<script>
    $(function(){nv.addGraph(function() {
        var chart = nv.models.discreteBarChart();
        chart.xAxis
        chart.tooltipContent(function(key, y, e, graph) {
            var x = String(graph.point.x);
            var y = String(graph.point.y);
            if(key == 'Serie 1'){
                var y =  String(graph.point.y)  + ' cal';
            }
            tooltip_str = '<center><b>'+key+'</b></center>' + y + ' at ' + x;
            return tooltip_str;
        });
        d3.select('#mygraphname svg')
            .datum(data_mygraphname)
            .transition().duration(500)
            .attr('height', 400)
            .call(chart);

    return chart;
});
});data_mygraphname=[{"values": [{"y": 3, "x": "A"}, {"y": 12, "x": "B"}, {"y": -10, "x": "C"}, {"y": 5, "x": "D"}, {"y": 25, "x": "E"}, {"y": -7, "x": "F"}, {"y": 2, "x": "G"}], "key": "Serie 1", "yAxis": "1"}];
</script>
</body></html>
'''

fh = open('test.html','w')
fh.write(html_text)
fh.close()