1 of 27

資料可視化

HW05 - 分組圖

蕭裕憲

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

2 of 27

目錄

P.2

01

章節 01

3 of 27

目錄

  • 介紹Force-directed graph
  • 資料處理
  • 評分標準
  • 作業說明
  • 繳交資訊

P.3

4 of 27

介紹Force-directed graph

​

​

P.4

02

章節 02

5 of 27

介紹

P.5

Force-directed graph

圖 1.ObservableHQ Force-directed graph範例

Force-directed graph （力導向圖） 是一種用於視覺化圖形的方法，通過模擬物理力和運動，展示圖中節點之間的關係。這種視覺化方法模擬節點之間的吸引和斥力，使得節點布局呈現出合理的結構，幫助我們理解圖形的結構和特徵。在資料視覺化中被廣泛應用在展示社交網路、系統架構等。

6 of 27

資料處理

P.6

03

章節 03

7 of 27

檔案處理

到此連結下載四個資料檔案 : "分組名單.csv"、"個人github帳號.csv"、"Teamname.csv"、"URL.csv"，和一個python檔案 : "CSV_to_JSON.py

P.7

圖 2.需下載的檔案

8 of 27

檔案處理

執行CSV_to_JSON.py所需要函式庫:

(1)JSON 網頁連結

安裝指令 : pip install jsons

(1)Pands 網頁連結

安裝指令 : pip install pandas

安裝完畢以後，執行會得到一個output.csv檔案，接下來作業會用到此檔案

P.8

9 of 27

評分標準

P.9

04

章節 04

10 of 27

評分標準

  • Simple baseline (3pt)
    • 實作Force-directed tree呈現小組情況(1pt)
    • 使節點可以被拖拉移動(1pt)
    • 將個人圖片放入節點圓圈中(1pt)
  • Medium baseline (5pt)
    • 滑鼠移動過去顯示該成員相關資訊(1pt)
    • 滑鼠移動過去放大節點及圖片(2pt)
    • 點擊節點可以展開或縮放(2pt)
  • Strong baseline (2pt)
    • 利用蘋果成績圖環繞個人照片(小組)(2pt)

P.10

11 of 27

作業說明

05

P.11

12 of 27

Simple baseline (3pt)

  • 實作Force-directed tree呈現小組情況(1pt)

範例程式碼

P.12

圖 3.Force-directer-tree呈現圖

13 of 27

Simple baseline (3pt)

  • 使節點可以被拖拉移動(1pt)

範例程式碼

​

P.13

圖 4.拖拉效果呈現

圖 5.定義拖拉函數

圖 6.呼叫拖拉函數

14 of 27

Simple baseline (3pt)

  • 將個人圖片放入節點圓圈中(1pt)

範例程式碼

​

P.14

圖 7.放入個人圖片呈現結果

圖 8.加入個人圖片的程式片段

15 of 27

Medium baseline (5pt)

  • 滑鼠移動過去顯示該成員相關資訊(1pt)

範例程式碼

​

P.15

圖 10.小組節點的顯示資訊

圖 9.課程節點的顯示資訊

16 of 27

Medium baseline (5pt)

  • 滑鼠移動過去顯示該成員相關資訊(1pt)

範例程式碼

​

P.16

圖 12.加入節點資訊的程式片段

圖11.組員節點的顯示資訊

17 of 27

Medium baseline (5pt)

  • 滑鼠移動過去放大節點與圖片(2pt)

範例程式碼

​

P.17

圖 14.放大節點與圖片的程式片段

圖 13.節點放大的顯示結果

18 of 27

Medium baseline (5pt)

  • 點擊節點可以展開或縮放(2pt)

範例程式碼

P.18

圖 15.展開縮放效果呈現

圖 17.放大節點與圖片的程式片段

圖 16.新增節點click事件

19 of 27

Strong baseline (2pt)

  • 利用蘋果成績圖環繞個人照片(小組)(2pt)

範例程式碼

P.19

圖 18.蘋果環繞效果呈現

圖 19.蘋果環繞效果的程式片段

20 of 27

繳交資訊

06

P.20

21 of 27

繳交資訊

P.21

1

2

3

22 of 27

繳交資訊

上傳output.json到https://github.com/你的帳號/vis2023f/tree/main/hw05/src

​

P.22

23 of 27

繳交資訊

將下載下來的檔案解壓縮，並修改js檔案中最下面函式的URL路徑改成 ../output.json，simple、medium、strong都要修改才可以讀取到資料。

​

P.23

24 of 27

作業五範例網頁

繳交資訊

P.24

25 of 27

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.25

26 of 27

助教聯絡資訊

07

P.26

27 of 27

助教聯絡資訊

  • TA Email
    • 蕭裕憲 t112598018@ntut.org.tw
    • Email 標題請按照此格式(X為作業編號) : [vis2023f-hwX-學號]

​

P.27