[PYTHON] Visualisieren Sie das charakteristische Vokabular eines Dokuments mit D3.js.

Dieses Mal habe ich D3.js für das Vokabular verwendet, das aus den Werken von Aozora Bunko im Artikel Last time extrahiert wurde. Lassen Sie es uns visualisieren.

Die ausgefüllte Demo-Anwendung kann unter hier eingesehen werden. (Wenn es nicht gut aussieht, laden Sie Ihren Browser neu.)

Visualisieren Sie Textdaten

Bisher mit Schwerpunkt auf dem Umgang mit Textdaten, Verwendung des Feeds und Extrahieren von interessanten Themen aus einer großen Anzahl von Dokumenten nach basianischer Klassifikation Methode und Charakteristisches Vokabular aus Dokumenten mit TF-IDF als Index extrahieren ) Ich habe erklärt, wie es geht.

Wie am Ende von Letztes Mal erwähnt, ist es besser, die Visualisierungsbibliothek zu verwenden, als das auf diese Weise extrahierte Ergebnis als Daten wie eine Zeichenfolge anzuzeigen. Es ist gut übertragen.

Erstellen Sie Daten für die Anzeige in D3.js.

In der Vergangenheit habe ich Interaktive Visualisierungsdemo mit D3.js erstellt, die Anwendung jedoch auf die gleiche Weise implementiert und [Heroku](https: //) implementiert. Lassen Sie es uns unter www.heroku.com/) ausführen.

Zunächst wird die Vokabulargruppe als Schlüssel verwendet und ihr Gewicht wird numerisch ausgedrückt.

require 'json'
require 'codecs'

def write_json_data(dic):
    """Eine Funktion, die das Ergebnis in JSON schreibt"""
    arr = [] #Da in JSON ein zweidimensionaler Vektor erstellt wird, bereiten Sie zunächst ein Array vor
    for k, v in dic.items():
        for w, s in v:
            #Fügen Sie dem Array hinzu, während Sie die Punktzahl entsprechend anpassen
            arr.append([w, str(round(s * 10000 + 100, 2))])

        #Beim Konvertieren eines Wörterbuchs mit Japanisch in JSON mit Python
        #Stellen Sie so sicher_Wenn ascii auf False gesetzt ist, wird es nicht verstümmelt
        hash = json.dumps({'values': arr},
                          sort_keys=True,
                          ensure_ascii=False,
                          indent=2,
                          separators=(',', ': '))
                          #Klären Sie das Trennzeichen und machen Sie es zu einem schönen JSON

        #Codecs zur Ausgabe der Datei.mit offen
        f = codecs.open(os.path.join(output_dir, k),
                            "w", "utf-8")
        f.write(hash) #Export
        f.close() #Richtig schließen

Der generierte JSON sieht folgendermaßen aus, wenn nur der Anfang angezeigt wird

{
  "values": [
    [
      "Rückansicht",
      "199.26"
    ],
    [
      "Eigenartig",
      "299.26"
    ],

Auf diese Weise wird es zu einem zweidimensionalen Array mit einem Array von Schlüsseln und Werten innerhalb des Arrays.

Visualisieren Sie mit D3.js.

Um ehrlich zu sein, bin ich nicht sehr gut in JavaScript, daher würde ich gerne von Experten hören. Ich werde es mit dem Ziel schreiben, es vorerst anzeigen zu können.

//Fügen Sie einen Knoten hinzu
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 + ")");

  //Bindung von JSON-Daten
  d3.json('../json/novel_name.json', function(error, data) {
    data.values.forEach(function(d) {
      d.word = String(d[0]); //Schlüssel
      d.score = d[1]; //Wert
    });
  force
    .nodes(data.values)
    .start();

  var node = svg.selectAll("g.node")
    .data(data.values)
    .enter()
    .append("g")
    .attr("class", "node")
    .call(force.drag);
  //Bestimmen Sie die Größe des Kreises anhand des Werts
  //Außerdem wird die Farbe entsprechend dem Wert geändert.
  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"
      }
    });
  //Fügen Sie den Wortschatz und seine Werte hinzu
  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);
  //Regie
  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)) + ')'; }); 
  });
})

Abschluss der Demo-Bewerbung

Alles was Sie tun müssen, ist Heroku zu schubsen und Sie sind fertig.

heroku create myapp
git push heroku master
heroku open

D3.js Demo-Anwendung http://d3js-data-clips.herokuapp.com/

Zusammenfassung

Dieses Mal habe ich die mit D3.js erhaltenen Funktionen visualisiert und mit Heroku verschoben.

Zu diesem Zeitpunkt wurde die Liste der Wörter und numerischen Werte erhalten, die das Dokument charakterisieren. Ich denke, dass sie angewendet werden kann, um sie mit anderen Datenquellen abzugleichen oder die Beziehung zwischen mehreren Dokumenten zu untersuchen. Ich werde.