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

VIS.JS Визуализация в записной книжке Jupyter

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

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

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

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

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

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

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

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

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

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

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

Краткие заметки

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

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

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

jupyter_notebook_config.py || добавив следующую строку (где || dist || - расположение папки распространения || vis.js || библиотеки.):
c.NotebookApp.extra_static_paths = ["/Users/isai/Documents/Jupyter/Viz/dist"]
jupyter_notebook_config.py || добавив следующую строку (где || dist || - расположение папки распространения || vis.js || библиотеки.):
jupyter_notebook_config.py || добавив следующую строку (где || dist || - расположение папки распространения || vis.js || библиотеки.):

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

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

jupyter notebook

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

Мы создадим новый файл в нужном месте.

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

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

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

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

Встроенный Javascript

Чтобы отобразить javascript в записной книжке Jupyter, мы сначала создадим ячейку 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. Глобальные переменные-это свойства объекта 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 визуализация для Юпитер , мы расширяем функциональность и позволяем нам обрабатывать и извлекать данные в Python , показывая их визуализацию в Javascript , которая не только отображает график, но и позволяет добавлять физические элементы управления и персонализированные действия.

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

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

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

Оригинал: “https://www.codementor.io/@isaib.cicourel/sparql-query-using-endpoints-101-du10884g8”