Рубрики
Без рубрики

VIS.JS Визуализация в блокноте Jupyter

vis.js динамическая визуализация в записной книжке Jupyter.

Автор оригинала: Isai B. Cicourel.

Визуализация в записной книжке Jupyter с использованием vis.js

Что такое vis.js?

vis.js -это динамическая библиотека визуализации на основе браузера. Библиотека разработана таким образом, чтобы быть простой в использовании, обрабатывать большие объемы динамических данных, а также позволять манипулировать данными и взаимодействовать с ними. Это позволяет нам визуализировать данные в различных формах и добавлять контроль над параметрами физики. Страница загрузки: vis.js

Что такое Юпитер?

Jupyter Notebook -это веб-приложение с открытым исходным кодом, которое позволяет создавать и обмениваться документами, содержащими живой код, уравнения, визуализации и пояснительный текст. Страница загрузки: юпитер

Что такое Анаконда?

Anaconda – ведущая платформа для изучения открытых данных, работающая на Python. Он объединяет блокнот Jupyter и включает в себя более 100 самых популярных пакетов Python, рецептов и Scala для науки о данных. Страница загрузки: анаконда

Почему меня это должно волновать?

Причина успеха ноутбука Jupyter заключается в том, что он выделяется в форме программирования под названием грамотное программирование . Грамотное программирование-это стиль разработки программного обеспечения, впервые предложенный компьютерным ученым из Стэнфорда Дональдом Кнутом . Этот тип программирования подчеркивает подход, основанный на прозе, когда изложение с удобным для человека текстом перемежается блоками кода. Он отлично справляется с демонстрационными, исследовательскими и преподавательскими задачами, особенно для науки. Добавив расширенные инструменты визуализации в сочетании с javascript, мы можем расширить его функциональность, добавив тонкую настройку зернистости.

Быстрые заметки

  1. Мы будем использовать Anaconda 4.3.1 с версией Python 3.6.
  2. vis.js версия 4 используется для визуализации графика.
  3. Для этого урока рекомендуется знание Javascript и Python .
  4. В этом руководстве не рассматривается настройка и установка anaconda .

Установка Необходимой Библиотеки

Прежде чем мы начнем, нам понадобится anaconda , который связывает блокнот Jupyter и кучу полезных библиотек. После установки мы загрузим vas.ja и распакуем его в нужное место. Нам нужно будет настроить vis.js папка распространения внутри .jupyter/jupyter_notebook_config.py добавив следующую строку (где dist – это расположение папки распространения vis.js библиотеки.):

Прежде чем мы начнем, нам понадобится || anaconda || , который связывает блокнот Jupyter и кучу полезных библиотек. || После установки мы загрузим || vas.ja || и распакуем его в нужное место. || Нам нужно будет настроить || vis.js || папка распространения внутри || .jupyter/jupyter_notebook_config.py || добавив следующую строку (где || dist || - это расположение папки распространения || vis.js || библиотеки.):
c.NotebookApp.extra_static_paths = ["/Users/isai/Documents/Jupyter/Viz/dist"]
Прежде чем мы начнем, нам понадобится || anaconda || , который связывает блокнот Jupyter и кучу полезных библиотек. || После установки мы загрузим || vas.ja || и распакуем его в нужное место. || Нам нужно будет настроить || vis.js || папка распространения внутри || .jupyter/jupyter_notebook_config.py || добавив следующую строку (где || dist || - это расположение папки распространения || vis.js || библиотеки.):
Прежде чем мы начнем, нам понадобится || anaconda || , который связывает блокнот Jupyter и кучу полезных библиотек. || После установки мы загрузим || vas.ja || и распакуем его в нужное место. || Нам нужно будет настроить || vis.js || папка распространения внутри || .jupyter/jupyter_notebook_config.py || добавив следующую строку (где || dist || - это расположение папки распространения || vis.js || библиотеки.):

Запуск ноутбука Jupyter

Чтобы запустить Jupyter Notebook, откройте терминал и выполните:

jupyter notebook

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

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

Создание визуализации

Есть два варианта демонстрации сетей с помощью vis.js ,

  1. Обработка информации в Javascript и отображение результатов с помощью встроенного HTML.
  2. Обработка информации в Python, отправка ее во встроенный Javascript и отображение во встроенном HTML.

При желании мы можем иметь элементы управления физикой во встроенном HTML

Встроенный Javascript

Чтобы отобразить javascript в Jupyter Notebook, мы сначала создадим ячейку python, в которую мы импортируем необходимую библиотеку python, необходимую для отображения фрагментов HTML.

from IPython.core.display import display, HTML
from string import Template
import json

Следующим шагом является создание встроенного HTML-объекта, который будет содержать визуализацию. Здесь мы создаем элемент div в записной книжке.

%%html

И, наконец, мы добавляем встроенный вызов javascript, который использует require для указания vis.js библиотека, которую мы ранее добавили в конфигурацию jupyter, мы создаем сеть и добавляем в нее элемент контейнера div .

%%javascript
requirejs.config({
    paths: {
        vis: 'vis'
    }
});

require(['vis'], function(vis){
    
    var nodes = [
        {id: 1, label: 'Beyonce', group: 'United States'},
        {id: 2, label: 'Barak Obama', group: 'United States'},
        {id: 3, label: 'Miley Cyrus', group: 'United States'},
        {id: 4, label: 'Pope Francis', group: 'Vatican'},
        {id: 5, label: 'Vladimir Putin', group: 'Rusia'}
    ];

    // create an array with edges
    var edges = [
        {from: 1, to: 2},
        {from: 1, to: 3},
        {from: 2, to: 4},
        {from: 2, to: 5}
    ];

    // create a network
    var container = document.getElementById('mynetwork');
    var data= {
        nodes: nodes,
        edges: edges,
    };
    var options = {
        width: '800px',
        height: '400px'
    };
    
    var network = new vis.Network(container, data, options);
});

Как только мы запустим все ячейки, мы получим следующую визуализацию под ячейкой HTML.

Как только мы запустим все ячейки, мы получим следующую визуализацию под ячейкой HTML.

Python для встроенного Javascript

Теперь мы собираемся отобразить этот график в блокноте с помощью vis.js получение данных из Python. Первый шаг-перенести этот график в Javascript. Здесь мы выбираем экспорт графика в формате JSON. Поскольку мы хотим избежать сохранения файла JSON на диск, мы переводим данные на внешний интерфейс. Обратите внимание, что vis.js ожидает, что каждое ребро будет объектом с источником и целью.

from IPython.core.display import display, HTML
from string import Template

nodes = [
        {'id': 1, 'label': 'Beyonce', 'group': 'United States'},
        {'id': 2, 'label': 'Barak Obama', 'group': 'United States'},
        {'id': 3, 'label': 'Miley Cyrus', 'group': 'United States'},
        {'id': 4, 'label': 'Pope Francis', 'group': 'Vatican'},
        {'id': 5, 'label': 'Vladimir Putin', 'group': 'Rusia'}
]

edges = [
        {'from': 1, 'to': 2},
        {'from': 1, 'to': 3},
        {'from': 2, 'to': 4},
        {'from': 2, 'to': 5}
]

Это что-то вроде взлома. Поскольку %javascript magic выполняется на стороне клиента, окно настроено. Поэтому мы привязываем данные к окну, чтобы они были глобально доступны. Все браузеры поддерживают объект window. Он представляет собой окно браузера. Все глобальные объекты JavaScript, функции и переменные автоматически становятся членами объекта window. Глобальные переменные – это свойства объекта окна. Но подождите, это становится лучше: Python JSON.dumps преобразует выходные данные в строку JSON! Единственный трюк сейчас-это выполнение некоторого кода JS, который загружает дамп JSON.

from IPython.display import Javascript
import json

# Transform the graph into a JSON graph
data = {"nodes":nodes, "edges":edges}
jsonGraph = json.dumps(data, indent=4)

# Send to Javascript
Javascript("""window.jsonGraph={};""".format(jsonGraph))

Следующим шагом является создание встроенного HTML-объекта, который будет содержать визуализацию. Здесь мы создаем элемент div в записной книжке.

%%html

И, наконец, мы добавляем встроенную ячейку Javascript, которая получает узлы и ребра из глобальной переменной window.json Graph .

%%javascript
requirejs.config({
    paths: {
        vis: 'vis'
    }
});

require(['vis'], function(vis){
    
    // create a network
    var container = document.getElementById('mynetwork');
    var options = {
        width: '800px',
        height: '400px'
    };
    
    // We load the JSON graph we generated from iPython input
    var graph = window.jsonGraph;
    
    // Display Graph
    var network = new vis.Network(container, graph, options);
});

Как только мы запустим все ячейки, мы получим следующую визуализацию под ячейкой HTML.

Как только мы запустим все ячейки, мы получим следующую визуализацию под ячейкой HTML.

Заворачивая Вещи

Добавив vis.js визуализация в Jupiter мы расширяем функциональность и позволяем нам обрабатывать и извлекать данные в Python , показывая его визуализацию в Javascript , которая не только отображает график, но и позволяет добавлять элементы управления физикой и персонализированные действия.

Вы Пробовали Следующее

Теперь, когда вы знаете основы, как насчет проверки некоторых примеров из vis.js и их реализация. Как насчет добавления элементов управления физикой?

Поиграйте и проверьте, что происходит. Создайте свою собственную визуализацию; идея состоит в том, чтобы узнать что-то новое. Если вам нравится этот урок, поделитесь им со своими друзьями.

Читайте ещё по теме: