HW2 動態視覺化

最近看的漫畫，覺得劇情很棒，但因為出現的腳色太多，關係有點複雜。官方也有提供關係圖，藉此利用在動態網頁上。
利用有關樹狀圖（Node-Link Diagrams）的設計，在有複雜人物關係時可以讓人以淺顯易懂的方式了解每個腳色的關係。
當使用者將滑鼠移動至人物上時，為了使用者注意力集中，採取將照片，其他人物的名字隱藏的方法，把該人物的名字字體和圓圈加大，該人物相關的人物關係線加粗並顯示其關係。
除此之外，樹狀圖採用可以拖拉的形式呈現以增強互動性，使用者可以自己拖動人物頭像，通過將樹狀圖展開的過程，更加了解人物之間關係。