Как визуализировать Dygraph в ноутбуке iPython?

В конечном итоге я хотел бы передать данные из структур данных python в элементы Javascript, которые будут отображать их на графике Dygraphs в блокноте iPython.

Я новичок в использовании блокнотов, особенно во взаимодействии javascript/nobebook. У меня есть последняя версия библиотеки Dygraphs, сохраненная локально на моей машине. По крайней мере, я хотел бы иметь возможность отображать образец графика Dygraphs в блокноте, используя эту библиотеку.

Смотрите блокнот ниже. Я пытаюсь выполнить простой пример кода Dygraphs, используя библиотеку, представленную здесь: http://dygraphs.com/1.0.1/dygraph-combined.js

Тем не менее, я не могу ничего сделать. Это правильный способ встраивания/вызова библиотек, а затем запуска javascript из ноутбука?

ноутбук

В конце концов я хотел бы сгенерировать JSON из Pandas DataFrames и использовать эти данные в качестве ввода Dygraphs.


python javascript ipython dygraphs ipython-notebook
person zachd1_618    schedule 10.07.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Хитрость заключается в том, чтобы передать DataFrame в JavaScript и преобразовать его в формат, который может обрабатывать dygraph. Вот код, который я использовал (блокнот здесь)

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)

Вот как это выглядит:

диаграмма, созданная с использованием dygraphs в блокноте IPython

Диаграмма полностью интерактивна: вы можете наводить курсор, панорамировать, масштабировать и иным образом взаимодействовать так же, как и с обычным диграфом.

person danvk    schedule 13.07.2014
comment
Это потрясающе! Это быстрее и чище, чем мой подход к построению строк. - person zachd1_618; 15.07.2014
comment
Кроме того, не могли бы вы объяснить роль kernel и как это влияет на взаимодействие блокнота/javascript? - person zachd1_618; 16.07.2014
comment
См. эту запись в блоге для получения дополнительной информации о kernel: jakevdp.github.io/blog/2013/06/01/ - person danvk; 17.07.2014
comment
Я сделал обертку dygraphs для использования в блокноте. На данный момент у него есть базовая функциональность, используя то, что вы предоставили в качестве шаблона. github.com/DayStarEngineering/PyDyGraphs - person zachd1_618; 05.08.2014

arrow_upward
0
arrow_downward

Решение danvk чище и быстрее, чем это, но я также смог заставить его работать, создав строку Dygraph из DataFrame. Кажется, что он ограничен примерно 15 тысячами точек, но преимущество заключается в том, что после создания страницу можно сохранить как статическую HTML-страницу, а график Dygraphs останется на месте. Создает хороший портативный механизм обмена для тех, у кого нет ноутбуков.

КЛЕТКА:

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

КЛЕТКА:

import string
import numpy as np
import pandas as pd
from IPython.display import display,Javascript,HTML,display_html,display_javascript,JSON
df = pd.DataFrame(columns=['x','y','z'])x=np.arange(1200)
df.y=np.sin(x*2*np.pi/10) + np.random.rand(len(x))*5
df.z=np.cos(x)
df.x=df.y+df.z/3 + (df.y-df.z)**1.25
s=df.to_csv(index_label="Index",float_format="%5f",index=True)
ss=string.join(['"' + x +'\\n"' for x in s.split('\n')],'+\n')
dygraph_str="""
<html>
<head>
<script type="text/javascript" src="http://dygraphs.com/1.0.1/dygraph-combined.js">    </script>
</head>
<body>
<div id="graphdiv5" style="margin: 0 auto; width:auto;"></div>
<script type="text/javascript">
  g = new Dygraph(
    document.getElementById("graphdiv5"),  // containing div
    """ + ss[:-6] + """,
    {
        legend: 'always',
        title: 'FOO vs. BAR',
        rollPeriod: 1,
        showRoller: true,
        errorBars: false,
        ylabel: 'Temperature (Stuff)'
    }
  );
</script>
"""
display(HTML(dygraph_str))

Блокнот выглядит так:введите здесь описание изображения

person zachd1_618    schedule 15.07.2014
comment
Ограничение в 15 тыс., с которым вы столкнулись, связано с конечным +. Когда у вас есть глубоко вложенное выражение, такое как N1+N2+N3+..., вы в конечном итоге переполняете стек. Решение состоит в том, чтобы иметь очень длинную строку в одной строке без необходимости конкатенации. Или, точнее, там, где у вас есть строка string.join(), измените ее на ss=json.dumps(s). - person danvk; 17.07.2014