Pygal рендеринг SVG в ноутбуках Jupyter

Question

Pygal рендеринг SVG в ноутбуках Jupyter

В настоящее время я использую ноутбуки Jupyter, и я хотел бы визуализировать SVG с помощью HTML, не сохраняя их как локальный SVG, а затем отображать их.

Я использую этот код:

%matplotlib inline
from IPython.display import SVG, HTML
html_pygal = """
<!DOCTYPE html>
<html>
  <head>
  <script type="text/javascript" src="http://kozea.github.com/pygal.js/javascripts/svg.jquery.js"></script>
  <script type="text/javascript" src="http://kozea.github.com/pygal.js/javascripts/pygal-tooltips.js"></script>
    <!-- ... -->
  </head>
  <body>
    <figure>
      {pygal_render}
    </figure>
  </body>
</html>
"""

import pygal
line_chart = pygal.Line()
line_chart.title = 'Browser usage evolution (in %)'
line_chart.x_labels = map(str, range(2002, 2013))
line_chart.add('Firefox', [None, None,    0, 16.6,   25,   31, 36.4, 45.5, 46.3, 42.8, 37.1])
line_chart.add('Chrome',  [None, None, None, None, None, None,    0,  3.9, 10.8, 23.8, 35.3])
line_chart.add('IE',      [85.8, 84.6, 84.7, 74.5,   66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
line_chart.add('Others',  [14.2, 15.4, 15.3,  8.9,    9, 10.4,  8.9,  5.8,  6.7,  6.8,  7.5])
HTML(html_pygal.format(pygal_render=line_chart.render()))

Вот проблема: хотя Jupyter удается отобразить файл SVG, он также отображает ошибку Javascript, которая выглядит следующим образом:

Ь '\ п

*SVG картинка приходит сюда

Ошибка JavaScript при добавлении вывода! SyntaxError: недопустимый символ. Для получения дополнительной информации обратитесь к консоли Javascript вашего браузера.

При проверке консоли браузера это сообщение об ошибке:

loaded custom.js  2017-04-20_analytics.ipynb:121:15
Default extension for cell metadata editing loaded.  main.min.js:24261:9
Raw Cell Format toolbar preset loaded.  main.min.js:24347:5
Slideshow extension for metadata editing loaded.  main.min.js:24395:9
actions jupyter-notebook:find-and-replace does not exist, still binding it in case it will be defined later...  main.min.js:29204:17
load_extensions Arguments { 0: "jupyter-js-widgets/extension", 2 weitere… }  main.min.js:12231:9
Session: kernel_created (b51341fe-f4d8-42be-a9b8-46ac47476a99)  main.min.js:23547:13
Starting WebSockets: ws://localhost:8888/api/kernels/1852f19e-52f2-4ce2-91d8-f6276ea95b40  main.min.js:22833:9
Loading extension: jupyter-js-widgets/extension  main.min.js:12208:21
Kernel: kernel_connected (1852f19e-52f2-4ce2-91d8-f6276ea95b40)  main.min.js:22480:13
Kernel: kernel_ready (1852f19e-52f2-4ce2-91d8-f6276ea95b40)  main.min.js:22480:13
loaded widgets  extension.js:134:14
Widget backend and frontend versions are compatible  extension.js:32280:22
SyntaxError: illegal character
Stack-Trace:
globalEval@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:87:4231
domManip@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:88:21389
append@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:88:18980
OutputArea.prototype._safe_append@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20345:13
OutputArea.prototype.append_execute_result@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20372:9
OutputArea.prototype.append_output@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20218:17
OutputArea.prototype.handle_output@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20165:9
output@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:21820:21
Kernel.prototype._handle_output_message@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23440:13
i@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:87:5486
Kernel.prototype._handle_iopub_message@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23467:20
Kernel.prototype._finish_ws_message@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23304:24
Kernel.prototype._handle_ws_message/this._msg_queue<@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23295:39
  main.min.js:20347:13
SyntaxError: illegal character
Stack-Trace:
globalEval@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:87:4231
domManip@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:88:21389
append@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:88:18980
OutputArea.prototype._safe_append@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20345:13
OutputArea.prototype.append_execute_result@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20372:9
OutputArea.prototype.append_output@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20218:17
OutputArea.prototype.handle_output@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20165:9
output@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:21820:21
Kernel.prototype._handle_output_message@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23440:13
i@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:87:5486
Kernel.prototype._handle_iopub_message@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23467:20
Kernel.prototype._finish_ws_message@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23304:24
Kernel.prototype._handle_ws_message/this._msg_queue<@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23295:39

Моя версия Python: 3.6.0 ОС: Windows 7 64-разрядная версия Pygal: 2.3.1

Примечание: мой текущий обходной путь, который работает, но не является решением, которое я ищу, состоит в том, чтобы создать локальный SVG и затем отобразить его с помощью импорта библиотеки: from IPython.display import display

5

javascript svg jupyter-notebook jupyter pygal

Источник

user5586790 25 апр '17 в 10:15

4 ответа

Другие вопросы по тегам javascript svg jupyter-notebook jupyter pygal

user2745140 05 июл '18 в 15:13 2018-07-05 15:13 · Answer 1 · 2018-07-05 15:13

Мое решение:

import pygal
from IPython.display import SVG, display

bar_chart = pygal.Bar()
bar_chart.add('Fibonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])
display(SVG(bar_chart.render(disable_xml_declaration=True)))

11

Источник

user2745140 05 июл '18 в 15:13

user2069879 07 июл '17 в 01:28 2017-07-07 01:28 · Answer 2 · 2017-07-07 01:28

Даже лучше:

bar_chart = pygal.Bar()
bar_chart.add('Fibonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])
display({'image/svg+xml': bar_chart.render()}, raw=True)

2

Источник

user2069879 07 июл '17 в 01:28

user2791453 07 авг '18 в 13:04 2018-08-07 13:04 · Answer 3 · 2018-08-07 13:04

Все ответы отображали виджет, но без всплывающих подсказок я нашел способ их включить (я "одолжил" его на их сайте):

import pygal
from ipywidgets import HTML
import base64

line_chart = pygal.Line()
line_chart.title = 'Browser usage evolution (in %)'
line_chart.x_labels = map(str, range(2002, 2013))
line_chart.add('Firefox', [None, None,    0, 16.6,   25,   31, 36.4, 45.5, 46.3, 42.8, 37.1])
line_chart.add('Chrome',  [None, None, None, None, None, None,    0,  3.9, 10.8, 23.8, 35.3])
line_chart.add('IE',      [85.8, 84.6, 84.7, 74.5,   66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
line_chart.add('Others',  [14.2, 15.4, 15.3,  8.9,    9, 10.4,  8.9,  5.8,  6.7,  6.8,  7.5])

b64 = base64.b64encode(line_chart.render())
src = 'data:image/svg+xml;charset=utf-8;base64,'+b64
HTML('<embed src={}></embed>'.format(src))

user2069879 07 июл '17 в 01:06 2017-07-07 01:06 · Answer 4 · 2017-07-07 01:06

Попробуйте использовать "is_unicode=True" внутри рендера, вот так:

HTML(html_pygal.format(pygal_render=line_chart.render(is_unicode=True)))

1

Источник

user2069879 07 июл '17 в 01:06