[JAVA] Visualisez le vocabulaire caractéristique d'un document avec D3.js

Cette fois, j'ai utilisé D3.js pour le vocabulaire extrait des travaux d'Aozora Bunko dans l'article Dernière fois. Visualisons-le.

L'application de démonstration terminée peut être consultée depuis ici. (Si cela ne semble pas bon, essayez de recharger votre navigateur)

Visualiser les données textuelles

Jusqu'à présent, en se concentrant sur le traitement des données textuelles, Comment utiliser le flux et Extraction de sujets d'intérêt d'un grand nombre de documents par classification basienne Méthode et Extraire le vocabulaire caractéristique de documents utilisant TF-IDF comme index J'ai expliqué comment procéder.

Comme mentionné à la fin de Dernière fois, il vaut mieux utiliser la bibliothèque de visualisation que d'afficher le résultat ainsi extrait sous forme de données comme une chaîne de caractères. C'est bien transmis.

Créer des données à afficher dans D3.js

Dans le passé, j'ai réalisé Démo de visualisation interactive avec D3.js, mais j'ai implémenté l'application de la même manière et [Heroku](https: //) Lançons-le sur www.heroku.com/).

Tout d'abord, le groupe de vocabulaire est utilisé comme clé et son poids est exprimé numériquement.

require 'json'
require 'codecs'

def write_json_data(dic):
    """Une fonction qui écrit le résultat dans JSON"""
    arr = [] #Puisqu'un vecteur bidimensionnel est créé en JSON, préparez d'abord un tableau
    for k, v in dic.items():
        for w, s in v:
            #Ajouter au tableau tout en ajustant le score de manière appropriée
            arr.append([w, str(round(s * 10000 + 100, 2))])

        #Lors de la conversion d'un dictionnaire contenant du japonais en JSON avec Python
        #Assurer comme ça_Si ascii est défini sur False, il ne sera pas brouillé
        hash = json.dumps({'values': arr},
                          sort_keys=True,
                          ensure_ascii=False,
                          indent=2,
                          separators=(',', ': '))
                          #Clarifiez le séparateur et faites-en un beau JSON

        #Codecs pour sortir le fichier.avec ouvert
        f = codecs.open(os.path.join(output_dir, k),
                            "w", "utf-8")
        f.write(hash) #Exportation
        f.close() #Fermer correctement

Le JSON généré ressemble à ceci lorsque seul le début est affiché

{
  "values": [
    [
      "Vue arrière",
      "199.26"
    ],
    [
      "Particulier",
      "299.26"
    ],

De cette façon, il devient un tableau à deux dimensions avec un tableau de clés et de valeurs à l'intérieur du tableau.

Visualisez avec D3.js

Pour être honnête, je ne suis pas très doué en JavaScript, j'aimerais donc entendre des experts. Je vais l'écrire dans le but de pouvoir l'afficher pour le moment.

//Ajouter un nœud
var svg = d3.select("body")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  //Liaison des données JSON
  d3.json('../json/novel_name.json', function(error, data) {
    data.values.forEach(function(d) {
      d.word = String(d[0]); //Clé
      d.score = d[1]; //valeur
    });
  force
    .nodes(data.values)
    .start();

  var node = svg.selectAll("g.node")
    .data(data.values)
    .enter()
    .append("g")
    .attr("class", "node")
    .call(force.drag);
  //Déterminez la taille du cercle en fonction de la valeur
  //De plus, la couleur est modifiée en fonction de la valeur.
  node.append("circle")
    .attr("r", function(d) { return d.score * .1; })
    .attr("opacity", .67)
    .attr("fill", function(d){
      if (d.score <= 300) {
        return "#449944"
      } else if (d.score > 300 && d.score <= 500) {
        return "#33AA33"
      } else if (d.score > 500 && d.score <= 750) {
        return "#22CC22"
      } else if (d.score > 750 && d.score <= 1000) {
        return "#11DD11"
      }
    });
  //Ajouter du vocabulaire et ses valeurs
  node.append("text")
    .text(function(d){ return d.word; })
    .attr('fill', '#fff')
    .attr('font-size', 24)
    .attr('dx', -16)
    .attr('dy', -5);
  node.append("text")
    .text(function(d){ return d.score; })
    .attr('fill', '#fff')
    .attr('dx', -25)
    .attr('dy', 15);
  //Direction
  force.on("tick", function() {
    node
    .attr('transform', function(d) {
      return 'translate('+ Math.max(20, Math.min(width-20, d.x)) + ','
        + '' + Math.max(20, Math.min(height-20, d.y)) + ')'; }); 
  });
})

Achèvement de l'application de démonstration

Tout ce que vous avez à faire est de pousser vers Heroku et vous avez terminé.

heroku create myapp
git push heroku master
heroku open

Application de démonstration D3.js http://d3js-data-clips.herokuapp.com/

Résumé

Cette fois, j'ai visualisé les fonctionnalités obtenues avec D3.js et je l'ai déplacé avec Heroku.

À ce stade, la liste des mots et des valeurs numériques qui caractérisent le document a été obtenue, je pense donc qu'elle peut être appliquée pour correspondre à d'autres sources de données ou pour étudier la relation entre plusieurs documents. Je vais.

Recommended Posts

Visualisez le vocabulaire caractéristique d'un document avec D3.js
Visualisez la couche interne du réseau neuronal
Visualisez le comportement de l'algorithme de tri avec matplotlib
Visualisez la gamme d'insertions internes et externes avec python
Visualisez le statut d'appréciation des œuvres d'art avec OpenCV
Calculer le produit des matrices avec une expression de caractère?
Visualisez la trajectoire de Hayabusa 2
Un diagramme de réseau a été créé avec les données du COVID-19.
Mesurer l'importance des entités avec un outil de forêt aléatoire
Visualisez les résultats des arbres de décision réalisés avec Python scikit-learn
Visualisez la "couleur régionale" de la ville en appliquant la vectorisation des documents
Visualisons le nombre de personnes infectées par le virus corona avec matplotlib
Visualisez le flux des tweets avec Diamond + Graphite + Grafana
Analysez le modèle thématique pour devenir romancier avec GensimPy3
L'histoire de la création d'un bot de boîte à questions avec discord.py
Traitez le contenu du fichier dans l'ordre avec un script shell
Une histoire coincée avec l'installation de la bibliothèque de machine learning JAX
Trouvez la valeur optimale de la fonction à l'aide d'un algorithme génétique (partie 2)
[Statistiques] Saisir l'image de la théorie de la limitation du pôle central avec un graphe
[python, ruby] sélénium-Obtenez le contenu d'une page Web avec le pilote Web
[Introduction à StyleGAN] J'ai joué avec "The Life of a Man" ♬
L'histoire de la création d'un pilote standard pour db avec python.
Compter la partie concaténée maximale d'un graphe aléatoire avec NetworkX
Obtenir l'URL du ticket JIRA créé par la bibliothèque jira-python
Visualisez la fréquence des occurrences de mots dans les phrases avec Word Cloud. [Python]
L'idée d'alimenter le fichier de configuration avec un fichier python au lieu de yaml
Visualisez l'état de la réponse du recensement national 2020
L'histoire de l'exportation d'un programme
L'histoire de la création d'un module qui ignore le courrier avec python
Créez un programme de jugement de compatibilité avec le module aléatoire de python.
Une histoire qui visualise le présent de Qiita avec Qiita API + Elasticsearch + Kibana
L'histoire d'un capteur de stationnement en 10 minutes avec le kit de démarrage GrovePi +
[Explication AtCoder] Contrôlez les problèmes A, B, C d'ABC182 avec Python!
Calculer l'itinéraire le plus court d'un graphe avec la méthode Dyxtra et Python
Générez une liste contenant le nombre de jours du mois en cours.
[Introduction à Python] Comment trier efficacement le contenu d'une liste avec le tri par liste
Calculez la probabilité d'être une pièce de calmar avec le théorème de Bayes [python]
Hit une méthode d'une instance de classe avec l'API Web Python Bottle
Recevez une liste des résultats du traitement parallèle en Python avec starmap
L'histoire de la création d'une caméra sonore avec Touch Designer et ReSpeaker
J'ai fait GAN avec Keras, donc j'ai fait une vidéo du processus d'apprentissage.
J'ai essayé de visualiser le texte du roman "Weather Child" avec Word Cloud
Créez DNN-CRF avec Chainer et reconnaissez la progression des accords de la musique
Obtenez le salaire moyen d'un emploi avec des conditions spécifiées sur Indeed.com
J'ai fait une erreur en récupérant la hiérarchie avec MultiIndex of pandas
[Explication AtCoder] Contrôle ABC184 Problèmes A, B, C avec Python!
Alignez la taille de la barre de couleurs avec matplotlib
Visualisez la valeur limite du perceptron multicouche
Vérifier l'existence du fichier avec python
Mesurer la force de l'association dans un tableau croisé
Rechercher le labyrinthe avec l'algorithme python A *
Visualisez les effets de l'apprentissage profond / de la régularisation
[python] [meta] Le type de python est-il un type?
La troisième nuit de la boucle avec pour