import IPython.core.display
%load_ext autoreload
%autoreload 2
The autoreload extension is already loaded. To reload it, use: %reload_ext autoreload
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']
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))
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']
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))
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()