ここではKernelをpython2とし、load_extを使ってsageの機能を後付けします。
%load_ext sage
The sage extension is already loaded. To reload it, use: %reload_ext sage
from IPython.core.display import HTML
import nvd3
nvd3.ipynb.initialize_javascript(use_remote=True)
配列は、sageのままではシリアライズに失敗するので、numpyの配列で定義します。
from nvd3 import pieChart
import numpy as np
type = 'pieChart'
chart = pieChart(name=type, color_category='category20c', height=450, width=450)
xdata = np.array(["Orange", "Banana", "Pear", "Kiwi", "Apple", "Strawberry", "Pineapple"])
ydata = np.array([3, 4, 0, 1, 5, 7, 3])
extra_serie = {"tooltip": {"y_start": "", "y_end": " cal"}}
chart.add_serie(y=ydata, x=xdata, extra=extra_serie)
chart.buildcontent()
#HTML(chart.htmlcontent)
print chart.htmlcontent
<div id="piechart"><svg style="width:450px;height:450px;"></svg></div> <script> data_piechart=[{"values": [{"value": 3, "label": "Orange"}, {"value": 4, "label": "Banana"}, {"value": 0, "label": "Pear"}, {"value": 1, "label": "Kiwi"}, {"value": 5, "label": "Apple"}, {"value": 7, "label": "Strawberry"}, {"value": 3, "label": "Pineapple"}], "key": "Serie 1"}]; nv.addGraph(function() { var chart = nv.models.pieChart(); chart.margin({top: 30, right: 60, bottom: 20, left: 60}); var datum = data_piechart[0].values; chart.color(d3.scale.category20c().range()); chart.tooltipContent(function(key, y, e, graph) { var x = String(key); var y = String(y) + ' cal'; tooltip_str = '<center><b>'+x+'</b></center>' + y; return tooltip_str; }); chart.showLabels(true); chart.donut(false); chart.showLegend(true); chart .x(function(d) { return d.label }) .y(function(d) { return d.value }); chart.width(450); chart.height(450); d3.select('#piechart svg') .datum(datum) .transition().duration(500) .attr('width', 450) .attr('height', 450) .call(chart); }); </script>
chart
from nvd3 import scatterChart
import random
type = "scatterChart"
chart = scatterChart(name=type, height=350, width=800, x_is_date=False)
chart.set_containerheader("\n\n<h2>" + type + "</h2>\n\n")
nb_element = 50
xdata = np.array([i + random.randint(1, 10) for i in range(nb_element)])
ydata = np.array([i * random.randint(1, 10) for i in range(nb_element)])
ydata2 = np.array([x * 2 for x in ydata])
ydata3 = np.array([x * 5 for x in ydata])
kwargs1 = {'shape': 'circle', 'size': '1'}
kwargs2 = {'shape': 'cross', 'size': '10'}
kwargs3 = {'shape': 'triangle-up', 'size': '100'}
extra_serie = {"tooltip": {"y_start": "", "y_end": " calls"}}
chart.add_serie(name="serie 1", y=ydata, x=xdata, extra=extra_serie, **kwargs1)
chart.add_serie(name="serie 2", y=ydata2, x=xdata, extra=extra_serie, **kwargs2)
chart.add_serie(name="serie 3", y=ydata3, x=xdata, extra=extra_serie, **kwargs3)
chart.buildhtml()
chart