[PYTHON] 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.