概要

クリックすると変化するWord Cloudを作った↓

こちらのWebサービスで実際に触れます
【Where to Visit ?】

上記のWebサービスについては以下記事参照↓
GAE×DjangoでWebサービスを開発してみた

使った技術

D3.js
- d3-cloudを利用して、WordCloudを作成した
Ajax
- ページ遷移なしにWordCloudを変化させる
Python3, Django
- バックエンド

説明

python, Django

DjangoをWebサービスのバックエンドとして利用している。
Ajaxも、基本的にはViewと同じで、word cloudのデータの受け渡しをする。
AjaxはJSONで送るので、datetime型はstrにして渡すなど、取扱に注意が必要。

# view用のメッソド
def photo(request):
    # 省略
    # ...
    wordcloud_list = [
        {
            "word": "日本",  # 表示される文字
            "property": "country",  # 種別
            "count": 10,  # prefecture=word
        },
        {
            "word": "日本",  
            "property": "country",
            "count": 10,  
        },
        #...
    ]
    output = {
        "wordcloud_list": wordcloud_list,
    }
    return TemplateResponse(request, "ra/photo.html", output)

# ajax用のメソッド
def ajax(request):
    if request.method == "GET":
        # 省略
        # datetimeはstrにして渡す
        # ...
        # response in JSON
        res_data = {
            "wordcloud_list": wordcloud_list,
        }
        response = json.dumps(res_data)  # JSON形式に直して・・
        return HttpResponse(response, content_type="text/javascript")  
    else:
        raise Http404

HTML・javascript

view関数やajax用関数から受け取ったデータをもとに、D3.jsでWordCloudを描写する。
各WordはonclickをトリガーとしてWordCloudを描写する関数を再帰関数的に呼び出すようにしている。

<!-- 該当部分以外省略しています -->
<head>
  <!-- Spinner -->
  <link rel="stylesheet" href="{% static 'css/loading.css' %}">
</head>

<!--Spinner-->
<div id="overlay" class="hide">
  <div class="cv-spinner">
    <span class="spinner"></span>
  </div>
</div>

<!--WordCloud-->
<div class="row">
  <div class="col-12">
    <div class="collapse show" id="collapseExample">
      <div class="card">
        <div id="wordcloud"></div>
      </div>
    </div>
  </div>
</div>

<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<!-- 以下URL参照 -->
<!-- https://github.com/jasondavies/d3-cloud-->
<script src="{% static 'js/d3.layout.cloud.js' %}"></script>
<script>
var TARGET_ELEMENT_ID = '#wordcloud'; // 描画先

// Word Cloudを作成して、id="wordcloud"の要素に描写する関数
function draw_wc(data){
  var random = d3.randomIrwinHall(2); // アーウィンホール分布
  var countMax = d3.max(data, function(d){ return d.count} );
  var sizeScale = d3.scaleLinear().domain([0, countMax]).range([10, 100])
  var words = data.map(function(d) {
    return {
    text: d.word,
    property: d.property,
    size: sizeScale(d.count) //頻出カウントを文字サイズに反映
    };
  });
  d3.layout.cloud().size([w, h])
    .words(words)
    .rotate(function() { return (~~(Math.random() * 6) - 3) * 30; })
    .font("Impact")
    .fontSize(function(d) { return d.size; })
    .on("end", draw) //描画関数の読み込み
    .start();
  return words;

  // wordcloud 描画実行部分
  function draw(words) {
    d3.select(TARGET_ELEMENT_ID)
      .append("svg")
        .attr("class", "ui fluid image") // style using semantic ui
        .attr("viewBox", "0 0 " + w + " " + h )  // ViewBox : x, y, width, height
        .attr("width", "100%")    // 表示サイズの設定
        .attr("height", "100%")   // 表示サイズの設定
      .append("g")
        .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
      .selectAll("text")
        .data(words)
      .enter().append("text")
        .style("font-size", function(d) { return d.size + "px"; })
        .style("font-family", "Impact")
        .style("fill", function(d, i) { return d3.schemeCategory10[i % 10]; })
        .attr("text-anchor", "middle")
        .attr("transform", function(d) {
          return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function(d) { return d.text; })
        // onclickをトリガーにでAjaxでWord Cloudを更新する
        .on("click", function (d, i){
          // Ajax
          $.ajax({
            url: "{% url 'ra:ajax' %}", //ajaxのurlはDjangoのurls.pyから取得
            method: "GET",
            data: {
              text: d.text,
              prop: d.property,
            },
            timeout: 10000,
            dataType: "json",
            //リクエストが完了するまで実行される
            beforeSend: function(){
              $('#overlay').removeClass('hide');
            }
          })
          .done(function(data_ajax) {
            // 写真・モーダルの更新
            // 省略
            // ...
            // 既存Word Cloudを削除
            d3.select(TARGET_ELEMENT_ID).select('svg').remove();
            // 再帰関数的に呼び出して、再描写する
            draw_wc(data_ajax.wordcloud_list);
            // Spinner終了
            $('#overlay').addClass('hide');
          })
        });
  }
}

// 初回実行はDjangoから受け取ったデータを引数に、関数draw_wcを呼び出し
var data_list = [
  {% for td in wordcloud_list %}
  {
    "word": "{{td.word}}",
    "count": {{td.count}},
    "property": "{{td.property}}",
  },
{% endfor %}
]
words = draw_wc(data_list)
</script>

CSS

Ajax実行中はグルグル回るスピナーを表示させたかったので、CSSもを利用して実装した。
参考：https://pinkmonky.net/detail/?id=100

loading.css

.hide {
  display: none;
}

#overlay{
    position: fixed;
    top: 0;
    margin: 0;
    padding: 0;
    z-index: 100;
    width: 100%;
    height:100%;
    background: rgba(0,0,0,0.6);
}
.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}
.is-hide{
    display:none;
}

困ったこと（解決できていない）

データ数が少ないと正しく表示されない

どうもデータ数が少ないと、一部データが欠落して、全件正しく表示されないようだ。
→暫定対策として、同じデータを重複させることでデータ数を無理やり増やした。。。見栄えは良くない。。。

ちなみに

今回のWebサービスでは、WordCloudだけではなく、写真などの入れ替えもAjaxで実装しています。
そのへんも今後記事にしていきたい。

D3.jsのWord CloudにAjaxを実装する on Django

概要