D3.js 世界地圖與 NLP 斷句

3 min readJun 2, 2017

用 django-tables2 成功做到動態表格的呈現後，下一步，我希望能做成由使用者點選世界地圖，下面表格就能動態呈現不同內容。所以這篇是接續著 Django 以及 django-tables2 後做的。

安裝 Node.js：我裝了 v6.10.3 LTS。
在 html 裡面載入套件：

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://datamaps.github.io/scripts/datamaps.world.min.js?v=1"></script>

由於地理資訊釋出的格式為 SHP Shapefile 檔格式，所以 D3.js 的作者提供了 topojson，可以將 SHP 檔輸出成 GeoJSON 格式。

3. 編輯 html body：

<body><div id="container" style="position: relative; width: 500px; height: 300px;"></div><script>
var map = new Datamap({element: 　
　　　　　　　　　　　　　　　　　document.getElementById('container')});
</script></body>

如此這般就會有一張美麗的世界地圖了。

Datamap 裡面還有些參數可以調，因為我想將點選的國家當做參數傳入我的 function 裡面，所以寫成：

var map = new Datamap({
       element: document.getElementById('container'),
       height: 600,
       width: 1200,
       done: function(datamap) {             
           datamap.svg.selectAll('.datamaps-subunit').on('click',   
           function(geography) {     
             location.href = 'http://127.0.0.1:8000/country/'+ 
                                          geography.properties.name;
              });
          }
      });

設了 click 事件，取得國家名稱（geography.properties.name）傳入我之後的 function 裡面。不知道有沒有其他更聰明的方法？

接下來，我根據傳入的參數寫了一些 Python 的判斷，讓使用者點選什麼國家，django-tables2 就出現有描述關於該國家的句子。由於是公司內部的資料不方便公開，所以簡單用文字在這邊敘述一下。

首先，會認為做斷句可能是有用的，是因為我手邊的資料是一些紀錄的摘要，基本上都是一句話就能說完一件事情，不像文章式的內容可能上下文都還是在講一樣的東西，那樣可能就比較不適合用找關鍵字然後斷句來呈現。另外，也因為手邊的資料算是比較正式的文件，因此簡單用一些標點符號或是正規表示法就能輕鬆斷句，這部分算是比較沒有太大的困難。

D3.js 世界地圖與 NLP 斷句

Written by Pei Lee

No responses yet