如何在iPython笔记本中呈现动态图？

Question

我最终希望将数据从python数据结构传递到Javascript元素，这些元素将在iPython笔记本的dygraph图中呈现。在

我对使用笔记本电脑很陌生，尤其是javascript/nobebook交互。我把最新的动态图库保存在我的机器上。至少，我希望能够使用该库在笔记本中呈现一个示例动态图。在

请看下面的笔记本。我尝试使用这里提供的库来执行简单的动态图示例代码：http://dygraphs.com/1.0.1/dygraph-combined.js

然而，我似乎找不到任何东西来渲染。这是嵌入/调用库然后在笔记本中运行javascript的正确方法吗？在

最后，我想从Pandas数据帧生成JSON，并将这些数据用作动态图输入。在

Answer 1

danvk的解决方案比这个更干净、更快，但我也能够通过从数据帧构建Dygraph字符串来实现这一点。它似乎仅限于15K点，但好处是一旦创建，页面就可以保存为静态html页面，并且dygraph图保持不变。为那些没有笔记本电脑的人提供了一个很好的便携共享机制。在

手机：

%%html
<script type="text/javascript" src="http://dygraphs.com/1.0.1/dygraph-combined.js"></script>`

手机：

^{pr2}$

笔记本如下：

Answer 2

诀窍是将数据帧传递到JavaScript并将其转换为dygraph可以处理的format。这是我使用的代码（notebook here）

html = """
<script src="http://dygraphs.com/dygraph-combined.js"></script>
<div id="dygraph" style="width: 600px; height: 400px;"></div>

<script type="text/javascript">
function convertToDataTable(d) {
  var columns = _.keys(d);
  columns.splice(columns.indexOf("x"), 1);
  var out = [];
  for (var k in d['x']) {
    var row = [d['x'][k]];
    columns.forEach(function(col) {
      row.push(d[col][k]);
    });
    out.push(row);
  }
  return {data:out, labels:['x'].concat(columns)};
}

function handle_output(out) {
  var json = out.content.data['text/plain'];
  var data = JSON.parse(eval(json));
  var tabular = convertToDataTable(data);
  g = new Dygraph(document.getElementById("dygraph"), tabular.data, {
    legend: 'always',
    labels: tabular.labels
  })
}
var kernel = IPython.notebook.kernel;
var callbacks = { 'iopub' : {'output' : handle_output}};
kernel.execute("dfj", callbacks, {silent:false});
</script>
"""

HTML(html)

它看起来是这样的：

这个图表是完全交互式的：你可以悬停，平移，缩放，或者以与典型动态图相同的方式进行交互。在