D 3でテイラースウィフト歌詞のインタラクティブなバーチャートを構築してください.観察可能なJS

データ視覚化は、データについて検討し、考える便利な方法です.あなたがリアルタイムで何をしているかを見ることができるように観察可能なJupyterノートブックのようなツールを迅速にセル内のJavaScriptコードを実行することができます.
このポストは、D 3を使用して観察可能な彼女の歌詞からテイラースウィフトの最も使用される単語を示しているインタラクティブなバーチャートを作る方法について行きます.js一方で、完成したノートブックと可視化をここで表示することができますし、フォークすることができますし、それを自分で編集します.

観察できる簡潔なイントロ

あなたは考えることができますeach different cell as a function . セルは2つの主要な形に入ります:

式.エクスプレッションセルは、最も簡潔であり、単純な定義のためのものであり、閉鎖の外で観察可能で、あなたはvar/const/let キーワード.

ブロック.ブロックセルには、キュリーブレースが含まれ、ローカル変数とループを含む複雑なコードが含まれます.

ローカル変数arr 上記の他のセルによって参照することはできません、多くの観測可能なノートブックは、自分のセルで別の定義と機能を入れた.これは、このポストが同様にすることです－すべてのコード断片は彼ら自身の細胞でなければなりません、そして、セルにコードを加えた後に、あなたはタイピングでそれを走らなければなりませんshift-return .
観測可能なより詳細な説明についてはcheck out this Notebook .

セットアップ

ダウンロードthis dataset of Taylor Swift lyrics それから、Observable account あなたがすでに1を持たないならば.したら、右上隅にある新しいボタンをクリックして、新しいノートブックを作成するアカウントがあります.

開始するには、セルの左側にマウスをホバーします.次のようなプラス記号が表示されます.

既存のストックマークダウンセルの下のプラス記号をクリックし、観測可能なセルにクリックしてクリックし、マシンからデータセットをインポートしますshift-command-u Macで次に、インポートしたいファイルを選択します.選択したセルで、次のように表示します.

FileAttachment("tswiftlyrics.csv")

ファイル名は異なります.実行セルボタンの右端に右側の三角形をクリックしてセルを実行できます

またはタイピングでshift-return , どちらも次のように返されます.

CSVから実際のデータを見るには、追加します.text ()を使用してデータを表示します.

FileAttachment("tswiftlyrics.csv").text()

また、そのセルには、そのファイルシンボルが右側にあるので、ファイルがインポートされたことがわかります.私たちは、各曲(テイラースウィフト)のアーティスト、アルバム名、トラックタイトル、アルバム上のトラック番号、歌詞、ライン歌詞がオンになっていると、その歌が出てきたデータを参照してください.
セルの左側のプラス記号をクリックしてコメントを保持する新しいセルを挿入します.Markdownでそれを行うことができます.

md`#### Require d3`

新しいセルを挿入し、D 3を必要とする場合に以下を追加します.js

d3 = {
  const d3 = require("d3-dsv@1", "d3@5","d3-scale@3","d3-scale-chromatic@1", "d3-shape@1", "d3-array@2")
  return d3
}

観察できるノートではrequire 任意のNPMパッケージ:あなたはUMDまたはAMDを介してモジュールを公開するツールを使用することができます.通常、unpkgからモジュールを含めることができます.COMは、ウェブページでCDNを介して、観測可能でそれを使用することができます.
今、我々はCSVファイルを通してループしますcsvParse 入力文字列(CSVファイルの内容)を解析する.これは、解析された行に従ってオブジェクトの配列を返します.

data = {
  const text = await FileAttachment(<your-imported-taylor-swift-file-name.csv>).text();
  return d3.csvParse(text, ({lyric}) => ({
    lyric: lyric
  }));
}

このセルを走らせて展開するならば、CSVファイルから歌詞を含んでいるこの入力を見ることができます.

新しいセルで、歌詞から単語を追加するには空の配列を作成します.

lyrics = []

新しいセルでは、以下をループに加えますdata オブジェクトをそれぞれの歌詞に追加するlyrics 配列.

data.forEach(lyric => lyrics.push(lyric.lyric));

変更を見ることができますlyrics 新しいセルのオブジェクト:

歌詞をクリーンアップする

観測可能な変数は、変数を再表示させませんNamed cells are declarations, not assignments .「あなたがリセットしようとしたり、再契約しようとするならlyrics 変数は、セル名が一意でなければならないので、このエラーを得るでしょう.

テイラーの歌詞から最も使用される単語を分析するには、新しいセルで配列を文字列に変換し、非文字列文字を削除するためにregexを使用します.

newLyrics = lyrics.join(' ').replace(/[.,\/#!""'$%\?^&\*;:{}=\-_`~()0-9]/g,"").toLowerCase()

我々は歌詞をクリーンアップした後、歌詞の配列からストップワードを削除してみましょう.これらの単語のほとんどはNLTK 言葉を止めて、あまり言いません:彼らは、一種の「scaffoling - y .」です

stopwords = ['i','me','my','myself','we','our','ours','ourselves','you','your','yours','yourself','yourselves','he','him','his','himself','she','her','hers','herself','it','its','itself','they','them','their','theirs','themselves','what','which','who','whom','this','that','these','those','am','is','are','was','were','be','been','being','have','has','had','having','do','does','did','doing','a','an','the','and','but','if','or','because','as','until','while','of','at','by','for','with','about','against','between','into','through','during','before','after','above','below','to','from','up','down','in','out','on','off','over','under','again','further','then','once','here','there','when','where','why','how','all','any','both','each','few','more','most','other','some','such','no','nor','not','only','own','same','so','than','too','very','s','t','can','will','just','don','should','now', 'im', 'ill', 'let', 'said', 'thats', 'oh', 'say', 'see', 'yeah', 'youre', 'ey', 'cant', 'dont', 'cause']

歌詞からこれらのstopwordsを取り除くために、この機能を新しいセルに加えてください.

remove_stopwords = function(str) {
    var res = []
    var words = str.split(' ')
    for(let i=0;i<words.length;i++) {
       var word_clean = words[i].split(".").join("")
       if(!stopwords.includes(word_clean)) {
           res.push(word_clean)
       }
    }
    return(res.join(' '))
}  

今、我々は新しいセルを呼び出して新しい変数remove_stopwords 関数.

lyrics_no_stopwords = remove_stopwords(newLyrics)

各歌詞の文字列の周波数を取得する

歌詞の各単語の出現数を取得するには、このコードを新しいセルに追加します[reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) .

strFrequency = function (stringArr) { //es6 way of getting frequencies of words
  return stringArr.reduce((count, word) => {
        count[word] = (count[word] || 0) + 1;
        return count;
  }, {})
}

それから私たちはstrFrequency 関数と出力を新しい変数に代入するobj .

obj = strFrequency(lyrics_no_stopwords.split(' '))

セルを実行すると、次のようになります.

ソート我々の単語の周波数

これがJavaScriptオブジェクトであるので、我々はちょうど電話することができませんsort() . 私たちの周波数をソートするには、少なくとも私たちのオブジェクトをソートするには、新しいセルにこの関数を追加します.

sortedObj = Object.fromEntries(
  Object.entries(obj).sort( (a,b) => a[1] - b[1] )    
) 

セルを実行すると、次の出力が表示されます.

新しいセルで新しい関数を作成して、オブジェクトの項目の最初のX番号(この場合、30)を返し、オブジェクトを編集するだけでlyric and freq 値の前には、値が簡単にアクセスできます.

final = Object.entries(sortedObj).map(([lyric, freq]) => ({lyric, freq})).slice(0,30);

あなたがそれを見ることができるセルを走らせることfinal が配列で、sortedObj 上記.

チャートを作る

グラフの属性を設定する必要があります.新しいセルで

margin = ({top: 20, right: 0, bottom: 30, left: 40})

新しいセルが続く

height = 500

現在、我々は新しい細胞でX値をつくりますd3.scaleBand() からの各々のテイラースウィフト叙情の我々の領域を壊すことfinal オブジェクトの値の範囲を指定します.これは、バンドの最小および最大の範囲です.

x = d3.scaleBand()
    .domain(final.map(d => d.lyric))
    .rangeRound([margin.left, width - margin.right])
    .padding(0.1)

我々のY値は、新しいセルで同様に作られます:

y = d3.scaleLinear()
    .domain([0, d3.max(final, d => d.freq)])
    .range([height - margin.bottom, margin.top])

スタイルを表示し、軸を表示するには、設定方向に応じて適切な位置にそれらを翻訳する関数として定義する必要があります.つの別々のセルにおいて、以下を含む

xAxis = g => g
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x).tickSizeOuter(0))

yAxis = g => g
    .call(d3.axisLeft(y).ticks(15))
    .call(g => g.select(".domain").remove())

Y軸にタイトルを追加するには、次のコードを新しいセルに追加します.

yTitle = g => g.append("text")
    .attr("font-family", "sans-serif")
    .attr("font-size", 10)
    .attr("y", 10)
    .text("Frequency")

今、我々は新しいセルで我々のチャートを作ることによってこれらを呼びます.SVGオブジェクトを作成しますviewBox 属性は、位置と寸法を設定します.それから私たちはg 要素(それはD 3 JSに固有ではありませんが、それはSVG図形をグループ化するために使用されます)、私たちの歌詞データから長方形を作成して、各長方形のためのX値と歌詞の頻度として歌詞を各々の長方形のためにy値として設定している歌詞.また、いくつかのスタイルの属性を設定しxAxis , yAxis , and yTitle .

{
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height]);

  svg.append("g")
  .selectAll("rect")
  .data(final)
  .enter().append("rect")
    .attr('x', d => x(d.lyric))
    .attr('y', d => y(d.freq))
    .attr('width', x.bandwidth())
    .attr('height', d => y(0) - y(d.freq))
    .style("padding", "3px")
    .style("margin", "1px")
    .style("width", d => `${d * 10}px`)
    .text(d => d)
    .attr("fill", "#CEBEDE")
    .attr("stroke", "#FFB9EC")
    .attr("stroke-width", 1)

  svg.append("g")
      .call(xAxis);
  svg.append("g")
      .call(yAxis);
  svg.call(yTitle);

  svg.call(yTitle);

  return svg.node();

このセルを実行すると、このグラフが出力されます.多田!

バーチャートに対話を加える

下にyAxis セル、ツールヒントを含むように新しいセルを追加します.テイラースウィフトアルバムと他のCSSのようなプロパティに関連する16進数の色に異なるスタイルの要素を設定します.

tooltip = d3.select("body")
      .append("div")
      .style("position", "absolute")
      .style("font-family", "'Open Sans', sans-serif")
      .style("font-size", "15px")
      .style("z-index", "10")
      .style("background-color", "#A7CDFA")
      .style("color", "#B380BA")
      .style("border", "solid")
      .style("border-color", "#A89ED6")
      .style("padding", "5px")
      .style("border-radius", "2px")
      .style("visibility", "hidden"); 

これで、次のツールヒントコードを追加して、グラフセルを編集します.でmouseover イベントのツールチップが表示され、どのように頻繁に単語テイラースウィフトの曲に表示される単語を示しています.マウスが棒グラフの四角形の上にホバリングしているときに移動すると、Tooltipとそのテキストも同様です.

{
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height]);

  // Call tooltip
  tooltip;

  svg.append("g")
  .selectAll("rect")
  .data(final)
  .enter().append("rect")
    .attr('x', d => x(d.lyric))
    .attr('y', d => y(d.freq))
    .attr('width', x.bandwidth())
    .attr('height', d => y(0) - y(d.freq))
    .style("padding", "3px")
    .style("margin", "1px")
    .style("width", d => `${d * 10}px`)
    .text(d => d)
    .attr("fill", "#CEBEDE")
    .attr("stroke", "#FFB9EC")
    .attr("stroke-width", 1)
  .on("mouseover", function(d) {
      tooltip.style("visibility", "visible").text(d.lyric + ": " + d.freq);
      d3.select(this).attr("fill", "#FDE5BD");
    })
    .on("mousemove", d => tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px").text(d.lyric + ": " + d.freq))
    .on("mouseout", function(d) {
      tooltip.style("visibility", "hidden");
      d3.select(this)
    .attr("fill", "#CEBEDE")
    });

  svg.append("g")
      .call(xAxis);
  svg.append("g")
      .call(yAxis);

  svg.call(yTitle);

  return svg.node();
}

次のようになります.

多田!今、バーを乗り越える場合は、正確な値を見ることができます.あなたが完全なコードを見たいならば、あなたはここで発表された観察可能なノートブックで遊ぶことができます.

データ視覚化の次は何か

JavaScriptでデータの視覚化を行うために観測可能なノートブックを使用する必要はありません.あなたの好みのテキストエディターのJSと他のデータ可視化ライブラリも、Webページに表示します.しかし、観測可能なコードの出力をすばやく表示することができますし、建物を構築し、簡単にデモを共有することができます便利なツールです.などの他のデータセットを使用することができますdifferent datasets here on Kaggle そして必ずask yourself these 5 questions before working with a dataset . あなたが構築しているものをオンラインで知らせてください!

ギタブelizabethsiegle

Twitter

メール[email protected]