1 of 49

資料可視化

HW03 - 樓層平面圖及面量圖 Choropleth

吳泳霈

國立臺北科技大學資訊工程系

2 of 49

目錄

P.2

01

章節 01

3 of 49

目錄

  • JSON 檔介紹
  • JavaScript讀取Json檔案
  • Choropleth 介紹
  • 評分標準
  • 作業說明
  • 繳交資訊

P.3

4 of 49

JSON 檔介紹

P.4

02

章節 02

5 of 49

JSON 檔

定義：JavaScript Object Notation (JSON) 是資料交換格式。是一種以文字為基礎的方式來表示 JavaScript 物件文字、陣列和純量資料。

https://hackmd.io/IB66HLWrStq5GGiJaYywhw?view

  • GeoJSON
  • TopoJSON

​

​

P.5

6 of 49

一般的JSON檔

  1. 純粹的資料格式 — 僅具備屬性，而無函式。
  2. 需要雙引號＂＂，才能有效使用＼。
  3. 單一個逗號或冒號放錯位置，會讓 JSON 檔出錯而無法運作。

https://csvjson.com/json_beautifier

  • 不限於陣列或物件，只要是符合標準 JSON 物件形式。

P.6

7 of 49

GeoJSON

基於JSON格式，用來描述地理空間資訊的數據交換格式，它定義了幾種類型的JSON對象(Object)，和它們組合於一起的方法，用來表示地理相關要素、屬性和空間範圍資料的資訊。

GeoJSON 的最外層是一個單獨的對象（object），對象可表示：

  • 幾何體（Geometry）。
  • 特徵（Feature）。
  • 特徵集合（FeatureCollection）。

​

​

​

P.7

GeoJSON & TopoJSON地理資訊教學

JSON 淺談 — 7.0 GeoJSON 和 Topo

8 of 49

GeoJSON

最外層的對象（object）包含許多子對象，而每個子對象都具有一個 type 屬性，用來表示對象的類型，type 值必須是下面其中之一：

  • Point 點 / MultiPoint 多點
  • LineString 線 / MultiLineString 多線
  • Polygon 面 / MultiPolygon 多面
  • GeometryCollection 幾何體集合
  • FeatureCollection 特徵集合
  • Feature 特徵

P.8

GeoJSON & TopoJSON地理資訊教學

9 of 49

重要規定

如果 type 設定為：

  1. Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon : 必須有變量 coordinates，也就是需要設定坐標。
  2. GeometryCollection(幾何體的集合): 必須有變量 geometries，而它的值是一個數組(Array)，裡面的每一項都是一個 GeoJSON 幾何對象。
  3. Feature(特徵): 必須有變量 geometry 和 properties，properties 表示特性，值可以是任何的 JSON 對象或是 null(空值)。
  4. FeatureCollection(特徵集合): 必須包含一個名稱為 features 的成員。

P.9

GeoJSON & TopoJSON地理資訊教學

10 of 49

範例：第一種

P.10

https://hackmd.io/IB66HLWrStq5GGiJaYywhw?view

線上實現 GeoJSON工具：https://geojson.io/#map=2/20.0/0.0

點：

{

"type": "Point",

"coordinates": [30, 10]

}

面：

{

"type": "Polygon",

"coordinates": [

[[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]

]

}

線：

{

"type": "LineString",

"coordinates": [

[30, 10], [10, 30], [40, 40]

]

}

11 of 49

範例：第二種

P.11

{

"type": "GeometryCollection", //object

"geometries": [ //變量

{

"type": "Point", //子 object

"coordinates": [120, 60]

},

{

"type": "LineString",

"coordinates": [ [100, 60], [100, 40] ]

}

]

}

12 of 49

範例：第三種

P.12

{

"type": "FeatureCollection",

"features": [

{

"type": "Feature",

"properties": {

"name": "Taipei 101"

},

"geometry": {

"type": "Point",

"coordinates": [121.5615184,25.0338266]

}

}

]

}

13 of 49

TopoJSON

為 GeoJSON 依照拓樸學編碼後的擴展形式，由鼎鼎大名的 D3.JS 視覺化套件作者 Mike Bostock 制定。

相比 GeoJSON 直接使用 Polygon、Point 之類的幾何體來表示圖形的方法，TopoJSON 中的每一個幾何體都是透過共享體(arcs)整合後組成的幾何體圖形。

​

P.13

14 of 49

TopoJSON

優勢：TopoJson 產出的檔案更小，大概縮小了80%

原因：

  • 邊界線只會記錄一次，像是台北和桃園的邊界線只會記錄一次
  • 地理坐標是使用整數，而非浮點數

​

P.14

15 of 49

JavaScript讀取JSON檔案

P.15

03

章節 03

16 of 49

一、使用getJSON、Fetch等

假設在目錄底下新增一份 test.json 檔，且個人路徑是 yungpei/json/，因使用ajax相關技術，須留意檔案位置是否為可讀取的靜態檔案路徑。

P.16

<script>

fetch('yungpei/json/test.json')

.then(function (response) {

return response.json();

})

.then(function (result) {

console.log(result);

});

</script>

JavaScript讀取Json檔案

[

{

"Email": "t112598033@ntut.org.tw",

"Floor": "1F",

"Pressure": 0.0,

"Timestamp": "2023/11/03 14:20:05",

"X": 13.328418731689454,

"Y": -4.617437362670898,

"RotateY": -0.4538845419883728

},

{

"Email": "t112598033@ntut.org.tw",

"Floor": "1F",

"Pressure": 0.0,

"Timestamp": "2023/11/03 14:20:06",

"X": 13.328418731689454,

"Y": -4.617437362670898,

"RotateY": -0.3522264361381531

},

17 of 49

二、使用JavaScript import、export

將 Json 檔改為 Js 檔，如：test.json.js 或 test.js，使用 import 讀檔。

P.17

[

export const test = {

"Email": "t112598033@ntut.org.tw",

"Floor": "1F",

"Pressure": 0.0,

"Timestamp": "2023/11/03 14:20:05",

"X": 13.328418731689454,

"Y": -4.617437362670898,

"RotateY": -0.4538845419883728

},

{

"Email": "t112598033@ntut.org.tw",

"Floor": "1F",

"Pressure": 0.0,

"Timestamp": "2023/11/03 14:20:06",

"X": 13.328418731689454,

"Y": -4.617437362670898,

"RotateY": -0.3522264361381531

},

JavaScript讀取Json檔案

<script type="module">

import { test } from 'yungpei/json/test.json.js';

console.log(test);

</script>

18 of 49

(補充)MDN有關於讀取JSON檔的方法

參考：https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Objects/JSON

P.18

JavaScript讀取Json檔案

<script>

var requestURL = 'yungpei/json/test.json';

var request = new XMLHttpRequest();

request.open('GET', requestURL);

request.responseType = 'json';

request.send();

request.onload = function() {

console.log(request.response);

}

</script>

19 of 49

Choropleth 介紹

​

P.19

04

章節 04

20 of 49

面量圖 Choropleth 介紹

"面量圖(分級著色圖)是一種統計地圖。使用假色把空間單位（如人口密度）等地理特徵，對應到不同顏色。面量圖能夠反映變數在地理區域上的變化情況。熱圖和等值線圖也有類似作用，利用變數來繪製區域，而面量圖則反之，是彙總並填充預先劃定的區域。"(出處: 維基百科)

P.20

出處: 維基百科

REFERENCES

[3] Wikipedia. 2017. Choropleth map. Retrieved from https://en.wikipedia.org/wiki/Choropleth_map.

圖1、面量圖範例。(出處: 維基百科)

21 of 49

面量圖 Choropleth 結構

"面量圖融合了兩套數據：將地理空間劃分為「區域」的空間數據，以及某個變數在每個區域內彙總得到的統計數據。

對於這兩種數據如何在面量圖中相互作用，有兩種概念模式：

  1. 「區域主導」：區域（通常是已有的行政單元）是統計資料收集統計的單元，這些資料就包括用於製圖的數據。
  2. 「變數主導」：將變數視作一種地理現象，對應著現實世界的空間分佈，而區域的劃分僅僅是基於數據分佈的技術操作。"(出處: 維基百科)

​

P.21

22 of 49

假色

"指在一幅影像中使用與真實色彩不同的顏色描述一項物體。

例如負片的顏色就可以被叫做假色，因為負片的顏色是物體顏色的補色。但假色常被用於表示電磁波譜中不可見光的部分。

面量圖是指在地圖或影像上加上顏色形成一個目錄顯示不同的值或變量。面量圖因為多用於地圖，因此被認為是假色的極端形式。"

(出處: 維基百科)

​

P.22

23 of 49

熱圖

"Heat map，是在二維空間中以顏色的形式顯示一個現象的絕對量，是一種資料視覺化技術。顏色的變化可能是通過色調或強度，給讀者提供明顯的視覺提示，說明現象是如何在空間上聚集或變化的。

面量圖有時被誤稱為熱圖。面量圖的特點是在地理邊界內有不同的陰影或圖案，以顯示感興趣的變數的比例，而熱圖（在地圖上）的顏色變化與地理邊界並不能對應上。"(出處: 維基百科)

​

P.23

24 of 49

評分標準

05

24

25 of 49

評分標準

  • Simple baseline (3pt)
    • 播放自己的參訪路徑 (1pt)
    • 計算自己的移動距離/卡路里 (2pt)
  • Medium baseline (3pt)
    • 美術館樓層平面圖行走軌跡(3pt)
  • Strong baseline (4pt)
    • 建立課程學生居住縣市人數的面量圖 Choropleth (4pt)

P.25

26 of 49

作業說明

06

26

27 of 49

Simple baseline (3pt)

  • 播放自己的參訪路徑 (1pt)
  • 計算自己的移動距離/卡路里 (2pt)

​

P.27

https://yungpei.github.io/vis2023f/hw03/src/simple/planar_graph.html

28 of 49

Medium baseline (3pt)

  • 美術館樓層平面圖行走軌跡 (3pt)

P.28

29 of 49

Strong baseline (4pt)

  • 建立課程班上學生居住縣市人數的 Choropleth (4pt)

P.29

details

.enter()

.append("path")

.attr("fill", (d) => {

const townData = data.find(

(t) =>

t.county === d.properties.COUNTYNAME &&

t["county"].replace("　", "") === d.properties.TOWNNAME

);

//return

})

.attr("d", path);

https://observablehq.com/d/ec0e39b666962d0e

30 of 49

Refernce

P.30

31 of 49

繳交資訊

07

31

32 of 49

繳交資訊 Simple baseline

  • Simple baseline – 播放自己的參訪路徑、計算自己的移動距離/卡路里，程式碼放在

https://github.com/你的帳號/vis2023f/hw03/src/simple/

​

P.32

33 of 49

繳交資訊 Medium baseline

  • Simple baseline – 美術館樓層平面圖分區(造訪頻率)，程式碼放在

https://github.com/你的帳號/vis2023f/hw03/src/medium/

​

P.33

34 of 49

檔案分類

P.34

35 of 49

Export notebook

P.35

1. 點擊 ...

2. 選擇 Export

3. Download code

1. 匯出檔案前請確認所有cell都有run過、地圖、Table皆有呈現。

36 of 49

Export notebook

P.36

2. 將下載下來的檔案解壓縮，刪除裡面的 files 資料夾。並修改最主要的js檔案。

(名字是亂碼的那個，例如 ec0e39b666962d0e@457)，並將URL路徑改成 ../UserData.json。如下圖紅框處。

​

37 of 49

Export notebook

P.37

3. 資料夾裡面會有兩個名字是亂碼的js檔案，選擇程式碼內有自己做的notebook 內容。

​

38 of 49

Github

P.38

4. 將 UserData.json 放到 src 檔案夾底下

39 of 49

Github

5. 在 src 檔案夾底下建立 strong 檔案夾，並將修改過後的檔案放入。

P.39

40 of 49

新增前往你的Demo網頁

P.40

<!-- ------------------------------------------------>

<div class="row hw12">

<div class="col-md-12 twenty">

<h4>前往你的 Demo 網頁</h4>

</div>

</div>

<!-- ------------------------------------------------>

<div class="row hw12">

<div class="col-md-12 twenty">

<a href="https://你的帳號.github.io/vis2023f/hw03/src/simple/你的檔案">https://你的帳號.github.io/vis2023f/hw03/src/simple/</a>

<hr>

<a href="https://你的帳號.github.io/vis2023f/hw03/src/medium/你的檔案">https://你的帳號.github.io/vis2023f/hw03/src/medium/</a>

<hr>

<a href="https://你的帳號.github.io/vis2023f/hw03/src/strong/">https://你的帳號.github.io/vis2023f/hw03/src/strong/</a>

</div>

</div>

41 of 49

Embed cells

P.41

1. 點擊 ...

2. 選擇 Export

3. Embed cells

42 of 49

Embed cells

P.42

1. 選擇 Entire notebook

3. Copy URL only

2. 確認是Iframe

43 of 49

Iframe

在hw03/index.html中原本為影片的地方程式碼如下：

改成自己的內容：

P.43

<div class="row hw12">

<div class="col-md-12 twenty">

<video id="video1" style="width:100%;max-width:100%;" controls="">

<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">

</video>

</div>

</div>

<div class="row hw12">

<div class="col-md-12 twenty">

<h4>Strong baseline - 建立課程班上學生居住縣市人數的 Choropleth</h4>

</div>

</div>

<div class="row hw12">

<div class="col-md-12 twenty">

<iframe width="100%" height="500" frameborder="0" style="background-color: #FFFFFF"

src="你的URL"></iframe>

</div>

</div>

44 of 49

評分表

更改 hw03/index.html 中程式碼

P.44

<table>

<tr>

<th>總分</th>

<th>完成後打勾</th>

<th>配分</th>

<th>分項描述</th>

</tr>

<tr>

<td rowspan="0" id="myTotal"></td>

<td><input type="checkbox" class="flipswitch" id="myCheckbox1" checked></td>

<td id='m1'>1</td>

<td>Simple baseline-1 - 播放自己的參訪路徑</td>

</tr>

​

<tr>

<td><input type="checkbox" class="flipswitch" id="myCheckbox2" checked></td>

<td id='m2'>2</td>

<td>Simple baseline-2 - 計算自己的移動距離/卡路里</td>

</tr>

<tr>

<td><input type="checkbox" class="flipswitch" id="myCheckbox3" checked></td>

<td id='m3'>3</td>

<td>Medium baseline - 建立課程班上學生居住縣市人數的 Choropleth</td>

</tr>

<tr>

<td><input type="checkbox" class="flipswitch" id="myCheckbox4" checked></td>

<td id='m4'>4</td>

<td>Strong baseline - 美術館樓層平面圖分區(造訪頻率)</td>

</tr>

​

</table>

45 of 49

評分表

更改 hw03/index.html 中程式碼

P.45

function update(){

​

var score = 0;

​

if (d3.select("#myCheckbox1").property("checked")){

score += parseInt(d3.select('#m1').html());

}

​

if (d3.select("#myCheckbox2").property("checked")){

score += parseInt(d3.select('#m2').html());

}

​

if (d3.select("#myCheckbox3").property("checked")){

score += parseInt(d3.select('#m3').html());

}

​

if (d3.select("#myCheckbox4").property("checked")){

score += parseInt(d3.select('#m4').html());

}

​

d3.select("#myTotal").html(score);

}

46 of 49

P.46

https://yungpei.github.io/vis2023f/hw03/index.html

47 of 49

Regulations

  • You should finish your homework on your own. 
  • Do not share your codes with any living creatures. 
  • Your HW will get 0 pt if you violate any of the above rules. 
  • Professor & TAs preserve the rights to change the rules & grades.

P.47

48 of 49

助教聯絡資訊

08

48

49 of 49

助教聯絡資訊

  • TA Email
    • 吳泳霈 t112598033@ntut.org.tw
    • Email 標題請按照此格式(X為作業編號) : [vis2023f-hw03-學號]

P.49