[PYTHON] Utilisez des applications de type notebook pour développer des visualisations personnalisées (partie 1)

Cet article est une contribution au Calendrier de l'Avent de visualisation des données 2015.

introduction

Il existe tellement d'outils différents pour la visualisation des données qu'il est difficile de choisir. En plus des applications telles qu'Excel et Tableau, des boîtes à outils telles que D3 pour créer des visualisations personnalisées sont également disponibles pour les particuliers en tant que logiciels open source. Il n'y a pas de "c'est la bonne réponse" lors de la sélection d'un outil, et en gros, vous devriez en choisir un qui soit facile à utiliser en fonction de vos compétences et de votre type de données. Cependant, puisque c'est un endroit pour les programmeurs, nous nous concentrerons sur la visualisation qui se fait en écrivant du code. Dans cet article, nous présenterons des outils tels que Jupyter Notebook et Beaker Notebook qui sont utiles pour la visualisation par programmation. __ Parmi eux, je me concentrerai sur la manière d'utiliser un tel environnement lors de l'écriture de code JavaScript par vous-même et de la création d'une visualisation personnalisée. __

Flux de travail de visualisation

Parmi les diverses tâches de visualisation, lorsqu'il s'agit de données relativement petites, les tâches seront les suivantes.

1. Collecte de données
2. Traitement à l'état lisible par machine
3. Analyse
4. Visualisation
5. Examen des résultats
6. Analyse et visualisation supplémentaires au besoin (retournez à # 4)

Vous devriez travailler dans une boucle comme celle-ci. Ce qui suit est un examen de ces étapes du point de vue de l'outil.

Bien sûr, il est possible de tout faire dans un seul langage de programmation, mais je pense qu'il est souvent nécessaire de faire la partie nettoyage et analyse et la partie dessin proprement dite dans différents langages, en particulier lors de la création d'une visualisation personnalisée. .. Si vous avez besoin d'utiliser plusieurs langues et outils comme celui-ci, vous ne pouvez le faire qu'avec un éditeur de texte, un terminal et un navigateur pour vérifier les résultats, mais pour le travail de visualisation exploratoire, vous devez également répéter chaque étape. Le problème est qu'il est difficile d'obtenir une image complète du travail.

Un cas très utile dans ce cas est une application de type notebook. Initialement un logiciel utilisé par des professionnels tels que Mathematica [Notes expérimentales](https://ja.wikipedia.org/wiki/%E5%AE%9F%E9%A8%93%E3%83%8E%E3%83] C'est un concept créé dans une position comme la version numérique de% BC% E3% 83% 88), mais il est très pratique pour les analystes de données de mélanger du code avec des documents lisibles par l'homme, des résultats de visualisation, etc. De nos jours, il est largement utilisé non seulement en science mais également dans le domaine de l'analyse de données.

Application de type notebook typique

Jupyter Notebook

Je pense que c'est l'open source le plus connu. À l'origine une application nommée IPython Notebook pour Python, elle a changé d'avis il y a quelque temps et a été divisée en une partie application notebook et une partie noyau qui exécute le code réel, et maintenant Python, R, Julia Il prend en charge plus de 40 langages de programmation, y compris.

Il a une très grande affinité avec le langage Python initialement pris en charge, et des visualisations telles que la célèbre bibliothèque matplotlib sont prises en charge sans aucune action spéciale. Mais que faire si vous souhaitez développer vos propres visualisations telles que D3.js avec JavaScript?

Créer un module de visualisation personnalisé avec Jupyter

Cette capture d'écran est utilisée dans sur ce bloc-notes Cytocsape.js Il s'agit d'un diagramme de réseau rendu avec le module de visualisation intégré à //js.cytoscape.org/). De cette manière, il est possible d'incorporer une bibliothèque de visualisation tierce dans une cellule d'un bloc-notes. Cependant, la méthode n'est pas très sophistiquée ...

Comment intégrer des visualisations arbitraires?

Ici, je peux installer avec pip basé sur le [Prototype] de @domitory (https://github.com/domitry/cytoscape-ipy) [Python Package](https: //pypi.python. Jetons un coup d'œil aux cas résumés dans (org / pypi / py2cytoscape).

• py2cytoscape/cytoscapejs

1. Préparez un fichier HTML contenant des styles, etc.

Tout d'abord, préparez du HTML qui peut être intégré. Encore une fois, ce n'est pas exactement du HTML complet, mais quelque chose que Jupyter Notebook peut interpréter comme un modèle pour jinja2. Dans ce cas, vous insérez la visualisation réelle pour les balises suivantes.

<div id="{{uuid}}"></div>

2. Utilisez require.js pour charger du JavaScript externe

C'est aussi un problème avec le JavaScript actuel, mais comme ES5 n'a pas de mécanisme pour gérer proprement les modules externes, IPython Notebook utilise RequireJS en externe. Prend en charge l'intégration JavaScript.

if (window['cytoscape'] === undefined) {

    //Emplacement de la bibliothèque JS à lire de l'extérieur
    var paths = {
        cytoscape: 'http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min'
    };

    require.config({
        paths: paths
    });

    require(['cytoscape'], function (cytoscape) {
        console.log('Loading Cytoscape.js Module...');
        window['cytoscape'] = cytoscape;

        var event = document.createEvent("HTMLEvents");
        event.initEvent("load_cytoscape", true, false);
        window.dispatchEvent(event);
    });
}

3. Écrivez du code Python pour lui transmettre des données

Et enfin, écrivez le code pour transmettre les données du côté Python aux modèles JS et HTML préparés. Vous avez besoin du code pour rendre le modèle après avoir transmis les données côté Python sous une forme que le code JavaScript peut interpréter.

cyjs_widget = template.render(
  nodes=json.dumps(nodes),
  edges=json.dumps(edges),
  background=background,
  uuid="cy" + str(uuid.uuid4()),
  widget_width=str(width),
  widget_height=str(height),
  layout=layout_algorithm,
  style_json=json.dumps(style)
)

display(HTML(cyjs_widget))

• Le code réel peut être trouvé à ici 。

De cette façon, le Jupyter Notebook actuel n'avait pas à l'origine pour objectif de créer un mélange de plusieurs langues ou une visualisation personnalisée sur place, donc chargez une bibliothèque JS externe et créez une visualisation par essais et erreurs dans la cellule. Je pense qu'il est plus adapté à ceux qui ont un module de visualisation existant et qui souhaitent l'utiliser dans une cellule plutôt que d'aller.

Actuellement, le projet Jupyter est en train d'élargir son échelle en acquérant d'importantes subventions de divers sponsors, il est donc probable que le mécanisme d'expansion dans ce domaine sera amélioré à l'avenir.

Beaker Notebook

Notebook pour l'environnement d'analyse de données Polyglot

Jupyter / IPython Notebook est un outil très puissant, mais à l'heure actuelle, il n'y a aucun moyen de mélanger plusieurs langues dans un seul bloc-notes ou d'échanger des données entre plusieurs langues. De plus, comme il n'y a pas de mécanisme pour exécuter facilement JS pour du HTML arbitraire, le travail ci-dessus est requis lors de l'utilisation d'un module de visualisation unique autre que le module de visualisation préparé (matplotlib, Bokeh, etc.). Sera. Beamer est une application de type notebook qui dispose d'un mécanisme pour résoudre ces problèmes.

Différence avec Jupyter

La plus grande différence avec Jupyter est que __Jupyter limite les noyaux qui se connectent à chaque notebook et le gère sous la forme d'une langue par notebook, alors que dans Beaker, cela est géré cellule par cellule. __. Par conséquent, vous pouvez effectuer les opérations suivantes sur le même bloc-notes:

• Collecte de données en exécutant des clients pour le scraping de code par Python et diverses API Web
• De plus, organisez-les à l'aide de Pandas, etc.
• Analyse statistique du résultat dans la cellule R
• Déterminez la conception avec des cellules HTML
• Enfin, visualisez-les dans des cellules HTML avec un code de dessin personnalisé basé sur D3.js

Plus précisément, un mécanisme est fourni en standard qui permet aux données d'être échangées entre les cellules en utilisant un objet commun appelé `` bécher ''. Par exemple, la valeur attribuée en Python,

beaker.mydata = "My sample data"

Accès en langage R

beaker::get('mydata')

Vous pouvez facilement l'utiliser avec JavaScript.

var myJsData = beaker.mydata + " updated by JS";

En utilisant cela, vous pouvez lire CSV avec Pandas of Python, le convertir en objet Dictionary, le transmettre à la cellule JavaScript tel quel via l'objet bécher et l'utiliser pour dessiner, etc. avec uniquement des fonctions standard.

Voici un exemple de préparation de données en Python et de dessin dans la cellule HTML intégrée avec du code JavaScript à l'aide de Cytoscape.js:

De cette façon, cette application est recommandée lorsque vous souhaitez utiliser Python pour la partie traitement de __ données et R pour le calcul statistique, mais principalement pour dessiner les données en utilisant D3.js. En effet, toutes les étapes peuvent être effectuées dans un seul bloc-notes.

Résumé

Cette fois, nous avons introduit l'intégration de modules personnalisés dans Jupyter et Baker Notebook, mais dans la deuxième partie, nous verrons le travail réel avec Beamer.