D3.js 真是一個好工具 (snapshot only)

2018-01-24

heart drawn by d3.js author Nadieh Bremer

首頁圖 (image source
有辦法在網頁上畫一個愛心嗎?他有一名朋友最近有點難過
這次會有這篇文章要感謝OO同學因為她提了一個有趣的問題
 
我就來問問了我們偉大的Google大神
於是乎就找到了這個有趣的的文章
其實畫圖這件事並不難
重點是畫出愛心的方程式要怎寫
這對一個非數學系的人是一個不小的挑戰
所幸我們有Google (歡呼~)
 
這次文章程式碼主要是從Nadieh Bremer 網站的教學擷取出來
看完才發現原來這位作者Nadieh Bremer是一位data visualization 的專家
有興趣的可以點這個連結看更多這位作者的作品 https://www.visualcinnamon.com/portfolio
 
nadieh bremer works snapshot
 
Data visualization 一直是我很有興趣的一塊
但礙於我美工天份不足所以一直以來都只能是欣賞
而不太能實做 ><
結果直到看了這一篇
我才知道有一段時間我一直再做的其實就是data visualization
而我一直景仰的是inforgraphics
 
這兩者差異在那呢?
原文  Matthew Pritchard : Data visualization vs. infographics
 
Data visualization
  1. 描繪原始數據
  2. 傳達資訊
  3. 提供客觀性

簡單說data visualization 就是可以取得數值,圖表產生。基本上在這一步完成讀者就可以根據這些資訊來完成結論,但因為只有圖表, 所以還是會仰賴輔助文字說明,才能了解我們現在所看到的圖表究竟代表什麼意義。

Inforgraphics
  1. 故事視覺化
  2. 提出觀點
  3. 提供主觀性
光是只有上面的圖表可能無法吸引非專業人士的目光, 有時我們也會希望這組數據可以引起更多人注意, 所以吸引目光這件事情就主要是透過infographics來達成。因為有故事的關係還有版面配置, 會讓讀者就像在看童話故事書一般深入其中,並迫不及待想看完這故事,迎來最後英雄擊敗大魔王勝利的完美大結局
 
所以根據本質差異兩種方式有不同使用的場合
 
Data visualization
  1. 新聞
  2. 白皮書&電子書
  3. 年度報告

有興趣可以點以下連結了解 :http://killerinfographics.com/blog/storytelling-through-data-visualization.html

Inforgraphics
  1. 部落格文章
  2. 案例分析
  3. 市場行銷文案

有興趣可以點以下連結了解 :http://killerinfographics.com/blog/4-ways-to-stretch-your-infographic-content.html

而關於d3.js 以及data visualization的淵源我也不是很清楚
但這篇文章還介紹的滿詳細,就放在這邊供有興趣的人參考
 
Bonus : processing.js
這也是一個可以畫圖的js
但這個似乎比較偏向藝術類
有興趣可以點以下網站點每個作品進去看看
每次重新整理都會是不同的結果
 
 
p5p generative art gallery snapshot
 
 
 

留言

jonas on 2018/01/30, 週二 - 17:22

哇,你勾起了我難忘的sin、cos回憶了XD

最後面的作品滿美的,而且我點開後有好幾張再點進去是有做互動的(鼠標做點擊圖片可以朝指定方向運動,例如La Spirale)。

 

感謝分享,我也喜歡藝術,期待未來有相關類型的作品哦。