Observable:互動式D3.js環境,讓你專注於資料視覺化,而不用費心於測試環境

The purpose of visualization is insight, not pictures

Observable(原本為d3.express)是開發出d3的Mike Bostock新的作品,目的是為了創造一個更好的資料探索環境,讓資料分析的重點在於取得insight而非不斷的搭建背後的支持代碼。在Mike Bostock的這篇文章A Better Way to Code裡面仔細談了這個observalbe的目的和特色,其功能如同jupyter之於python,或是rnotebook/shiny之於R,但是其更是為了web而生,因為其更貼近DOM和前端邏輯。

螢幕快照 2018-02-12 下午8.41.32

Observable有幾個特色:
1. Reactivity
– visual output
– animation
– iteraction
– transition
2. Visibility
3. Reusability
4. Portability

目前Observable的教學可以參考下面的順序來閱讀和探索:
1. Five-Minute Introduction
2. Introduction to Notebook
3. Introduction to Code
4. Introduction to HTML
5. Introduction to Promise
6. Introduction to Data
7. Standard Library
8. A Brief Introduction to Viewof
9. Multi-Value Inputs
10. Introductino to Asynchronous iteration

閱讀Mike Bostock文章:What Makes Software Good?

註:此篇為翻譯Mike Bostock的文章:What Makes Software Good?

身為一個開源軟體開發者,我花很多時間在思考如何讓軟體很好。

身為開發者,無可避免地會有永無止盡的求救來自於Stack Overflow, GitHub issues和Slack mentions、email等。幸運地是你也可以看到大家是如何成功應用你所開發的軟體做出超乎你想像的事情,知道自己幫得上忙,也是一個很強大的自我鼓勵,讓你堅持者去開發。

所以你會開始思考一件事?什麼樣的軟體特質,可以讓使用者成功或是失敗?如何改善我的軟體讓更多人可以成功?我可以清楚地說明任何開發原則,或者其實我只是見招拆招?如同知名德國工業設計師Dieter Ram’s的設計十誡

Good design is innovative.
Good design makes a product useful.
Good design is  aesthetic.
Good design makes a product understandable.
Good design is unobtrutive.
Good design is honest.
Good design is long-lasting.
Good design thorough down to the last details.
Good design is environmentally-friendly.
Good design is as little design as possible.

我曾經嘗試談論過所謂的Big Picture Stuff,像是從有趣的小問題著手、辨認和減少工具的偏誤或是利用相關技術以及標準。

雖然Big picture是重要的,可能重要於今天我要談的事情,但實際上我自己感覺Big picture的建議往往不實用,甚至很差。比如說,“盡量簡單,但別太簡單(Make it as simple as possible, but no simpler)”,我們也許都想要事情越簡單越好,但往往我們不知道如何取捨來達到目標。

即使你有一個正確的大目標,往往不能保證你的設計能成功。實踐一個想法和想法本身同樣重要。魔鬼就在細節之中。

假如我沒辦法提供實務性或是可以立即實踐的意見,那麼給少點意見反而更好。一個來自Green&Petre的Cognitive dimensions defines a set of “discussion tools" to “raise the level of discourse" about the usability of “information artifacts" such as code.

Abstraction gradient

Closeness of mapping

Consistency

Diffuseness

Error-proness

Hard mental operations

Hidden dependencies

Premature commitment

Progressive evaluation

Role-expressiveness

Secondary notation

Viscosity

Visibility

上面這十誡聽起來不是很完美,也不是框架。聽起來只是單純對於視覺編成(Visual Programming),且只限於特定情境。我發現很難單純地把一個領域中單一象限的問題直接映射到另一個領域,但還是個很好的起點來思考軟體設計的“Cognitive consequences”。

這邊我並不會去定義一個泛用型的框架,但我有一些觀點可以分享,恰好是一個時機對於D3 4.0做事後的分析(Post-hoc rationalization),除了對於Data joing, scales, layout解離於視覺呈現很滿意外,這邊我將D3分解成一個又一個模組,讓其他人更容易來延展應用,且修改了編程上的API,很擔心這樣的改變對於使用者來說很微妙,但實際上很重要。多數開發者過度專注於functionality, performance, correctness這些較好量化的主觀特性。

的確上面的特質很重要,但是使用不易(poor usability)造成的代價也不小。問問那些在奮力理解令人疑惑代碼模塊的人,以及如找髮絲般除蟲的人。我們必須盡快找到一個評估易用性的方法,且讓程式更好用(We need to get better at evaluating usability sooner, and better at making software usable in the first place.)。

我們無法把代碼放在手上把玩感受它的重量或是質地。代碼的本質是資訊的"人工產物"(information artifact)而非物理性或是圖形。你可以藉由編輯文本或是指令行來跟這些API互動。

這些互動依據標準定義來說,受到人為因子複雜性所影響。所以我們應該評估代碼,就如同評估任何工具一樣,並非只依據他能否達成任務,還要看這些工具是否好用,有效率和令人享受。同時我們還需要考慮到其Affordance(直觀特質)和Aesthetics(美觀)。

編程介面即是所謂的使用者介面。簡單說,編程者也是人。在關於低估設計中人的成分,又可以聽到Ram’s的說法:

Indifference towards people and the reality in which they live is actually the one and only cardinal sin in design.

這同樣的暗示好的文檔說明不代表是壞設計的藉口。也許你可以叫使用者去RTFM,但這是相當蠢(folly)的假設所有使用者能記得文檔中的任何小細節。範例的清晰明白(clarity)、軟體的可拆性(Decipherability)和除蟲性(Debuggability)在真實生活中很重要。

這裡提供七個案例來分享D3 4.0所做的改進和想法,這邊先挑一個來翻譯:

案例一:關於enter.append語法的改進

D3最重要的觀念,便是資料驅動(Data-Driven),這邊的Data代表的是你要視覺化的資料,而document則是你視覺化的呈現,更精確地說就是網頁的Document Object Model(DOM)。


<!DOCTYPE html>
<svg width="960" height="540">
  <g transform="translate(32,270)">
    <text x="0">b</text>
    <text x="32">c</text>
    <text x="64">d</text>
    <text x="96">k</text>
    <text x="128">n</text>
    <text x="160">r</text>
    <text x="192">t</text>
  </g>
</svg>

上面是一個簡單的html文件,裡面包含一個svg模塊,其中相對應的資料就如下:


var data=[
"b",
"c",
"d",
"k",
"n",
"r",
"t"
];

在這序列資料中,要有相對應的文檔模塊(即為),這時就是d3中很重要的關鍵概念:Data-join

螢幕快照 2018-02-09 下午6.14.38

D3中Data-join的設計是給予其資料的序列和相對應要的文件模塊,其會返回三個selection:

  • enter selection: 代表還未添加上去的要用來呈現資料的部件(element)。
  • update selection: 代表本來在文檔中的部件,但需要調整的部分。
  • exit selection:代表在更動後需要被移除的部件。

但data-join並分直接去調整DOM本身,而是去計算所需要的enter, update, exit樣貌。在下面這個簡單的範例中,如何讓文檔隨者資料改動而改動,是D3核心的功能。


var text = g
  .selectAll("text")
  .data(data, key); // JOIN

text.exit() // EXIT
    .remove();

text // UPDATE
    .attr("x", function(d, i) { return i * 32; });

text.enter() // ENTER
  .append("text")
    .attr("x", function(d, i) { return i * 32; }) // 🌶
    .text(function(d) { return d; });

上面這塊代碼,是最初data-join設計的邏輯,先選擇文檔模塊,導入資料(join),去掉更新後被移除的模塊(exit),在更新還存在的部分(update),接者把新加入的資料代表要件更新(enter)。觀察上面的代碼模塊會發現畫有辣椒部分的代碼是重複的:分別是更新x attribute在enter和update的部分。

在D3 2.0的時候,為了解決這個重複的問題,將對於enter selection執行append時,自動複製entering elements到update selection的部分,如此撰寫邏輯可以變成如下面這樣:


var text = g
            .selectAll("text")
            .data(data, key); // JOIN
text.exit() // EXIT
    .remove();

text.enter() // ENTER
    .append("text") // 🌶
    .text(function(d){ return d; });

text // ENTER + UPDATE
    .attr("x", function(d, i){ return i*32; });

雖然這樣的設計減少了代碼重複,但是實際上似乎是造成了使用性降低,第一點,因為其實踐的機制,會讓人不知道原來enter selection,會將append的要件,複製到update selection的部分,因此而產生了前面設計所謂的poort role-expressiveness或是hidden dependency。
第二點,代碼的順序因此變得會影響到執行,最後在D3 4.0版本,取消了這樣的設計,提出了新的selection.merge,來整合enter和update的selection。


var text = g
  .selectAll("text")
  .data(data, key); // JOIN

text.exit() // EXIT
    .remove();

text.enter() // ENTER
  .append("text")
    .text(function(d) { return d; })
  .merge(text) // ENTER + UPDATE
    .attr("x", function(d, i) { return i * 32; });

由上面的過程,可以體會到Rams原則: good design makes a product undersandable,而在cognitive dimension詞彙上,它造成了poor consistency、poor role-expressiveness和hidden dependency.

使用D3.js做複雜資料視覺化(一):簡介

在熟悉完html5/css的基礎後(真的是頗多坑),終於可稍微踏進d3.js的世界,邊搞懂基本js邊搞起來,然後在開發時,還必須稍微把後端的東西淺嚐一番(採取用koa2來做後端,前後從xdk到browserify到node.js下的koa2框架),來支撐前端的設計呈現,這坑走來一定要稍微紀錄一下。

 不得不說D3.js背後的邏輯很美,尤其是在閱讀資料視覺化經典裡的概念後,會發現作者Mike Bostock開發D3所花費的苦心,同時慢慢體會到Javascript背後的想法。

放在軟體世界中,D3.js是建立在前端的領域中javascript的視覺化套件(讓瀏覽器 etc. firefox/chrome/safari 跑起來的程式語言),而前端領域是個變化快速的領域,尤其是javascript

在摸索過程中,可以發現網路上的js範例是由各個不同版本js語法(ES2016, ES2017….)所組成的,隔幾年,基本上語法和函數都有點變化,所以要花一點時間大致理解圍繞D3.js所需要的工具,其目前開發到什麼程度。

D3.js是個快速迭代的Javascript 項目,所有書籍的教學和網路文章教學常常是過時

在學習D3.js的起手,挑了兩本在2017年發表的書來閱讀,分別是Data Visualization with D3 4.x Cookbook(Nick Zhu)D3.js 4.x Data Visualization(Ændrew Rininsland ,‎ Swizec Teller),在實踐的過程,我馬上發現了兩本都是在2017年發行的書,Javascript風格、使用的D3.js語法和目前最新版本的D3.js 4.x版本(話說在前幾天D3.js 5.0發佈了)都不太一樣,部分邏輯也有些出入,所以基本上在使用D3.js的路上,會遇到很多版本語法的坑,很難直接把在網上的代碼直接拿來應用,善用官方解釋和…..動手入坑。

假如再重來一次的話,會推薦直接看這本Interactive Data Visualization for the Web, 2nd Edition,因為其書名沒有D3js,所以一開始用網路搜d3js,其被放在較後面的排序,後來發現其內容撰寫方式,雖然囉唆,但是是作者心法的傳授,蠻推薦的,這本書的作者Scott Murray,本曾經是學術界的教授,所以文章架構比較文鄒鄒,跟單純工程師的寫法不同,會交代前因後果,和放入自己的想法。

D3.js開宗明義就是要做Data-Driven Document,重點不是在華麗的視覺化,而是如何有效地呈現資料

D3.js快速迭代的過程,其中一個目的便是簡化資料處理的過程,以及讓資料結構更貼近視覺化的流程,另外一部分的重點,便是互動性,資料視覺化的重點不是只停留於靜態的視覺呈現,而是讓使用者與資料更有效的互動,所以盡量由“資料特性”出發來思考設計,而不要一下子就用視覺化來想像,否則會創造出很多無用的設計

 想了解Mike Bostock開發D3背後的點點滴滴,可以看一下其在reddit的AMA專欄:連結

螢幕快照 2018-02-15 上午11.02.34

書籍閱讀:WTF?: What’s the Future and Why It’s Up to Us

WTF_book

這本書WTF:What’s The Future And Why It’s Up To Us是由Tim O’Reailly所寫,在2017年10月份出版,目前還沒有中文版,作者本身算是歷經網路世代的消長,直到目前都是IT領域重要的領袖之一。

這本書分成四大部分

第一部分: Using the Right Maps

第二部分: Platform Thinking

第三部分: A World Ruled by Algorithm

第四部分:Up to Us

如何思考未來,用地圖

第一部分作者主要想分享關於這瞬息外變的世界,我們必須如何面對。其中一個關鍵思維就是要畫一張自己關於未來的地圖,把所以對於未來的想像用地圖般的脈絡來撰寫。

 

node在osx開發環境設置: 一次釐清brew,nvm, npm,node

如同在設置python的開發環境一樣,需要先想好版本控制的流程,讓自己可以在不同版本間切換,在node相關的開發更是需要小心翼翼,因為那是一個非常快速迭代,和擁有各式各樣依賴的開發社群。

在osx下,還是偏向以brew作為全局套件的最高層版本控制。在node和npm不同版本間的控制,則使用nvm,而在單一個項目下的第三方js套件,則可以使用npm來做安裝。

 

brew node development.001

第一步:用brew安裝nvm

# 直接安裝最新版nvm
brew install nvm

第二步: 設定shell的configuration檔案(/etc/profile, ~/.bash_profile)

export NVM_DIR="$HOME/.nvm"
. "/usr/local/opt/nvm/nvm.sh"

第三步:用nvm安裝node

nvm install node

第四步:在專案的資料夾中放.nvmrc設置檔

node -v > .nvmrc

閱讀參考
Node.js安裝和版本切換教學
使用nvm管理不同版本的npm/node
nvmrc範例
nvm v.s npm

書籍閱讀:The Visual Display of Quantitative Information

圖片搜尋結果
這本書The Visual Display of Quantitative Information是耶魯大學統計學家艾德華。塔夫特(Edward Tufte)的經典著作,談論視覺化如何呈現量化資訊(就是資料視覺化),他被稱作現代視覺化大師,整本書很樸素簡單,提供非常大量的精美圖片,來呈現資訊視覺化的方方面面概念,書的寫作邏輯有點特別,需要稍微適應一下。

本書主要分成兩大部分:

1. Graphical Practice
– Graphical Excellence
– Graphical Integrity
– Souces of Graphical Integrity and Sophistication
2. Thoery of Data Graphics
– Data-Ink and Graphical Redesign
– Chartjunk: Vibrations, Grids, and Ducks
– Multifunctioning Graphical Design
– High-Resolution Data Graphics
– Aesthetics and Technique in Data Graphical Design

什麼是好的視覺化(Graphical Excellence)

好的視覺圖表可以展現複雜的想法,將其表達的清楚(clarity)、精準(precision)和有效(efficiency):

  1. 呈現資料(show data)
  2. 讓觀看者去思考圖表呈現的概念,而非背後的方法
  3. 利用有限的空間呈現量化數字
  4. 鼓勵用視覺去比較資料
  5. 展現資料在不同層次上的細節,從概觀到細部樣貌
  6. 具有明確的目的:描述、探索、格式化、裝飾
  7. 可以用來結合統計和資料描述

Principles of Graphical Excellence
這張的最後,用什麼定義一個良好的視覺化作結,關鍵就是視覺化的效果能表達清楚資料背後的想法。

Graphical excellence is the well-designed presentation of interesting data-a matter of substance, of statistics, and of design.

Graphical excellence consists of complex ideas communicated with clarity, precision, and efficiency.

Graphical excellence is that which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space.

Graphical excellence is nearly always multivariate.
And graphical excellence requires telling the truth about the data

視覺化要有誠信Graphical Integrity

這章要談的就是如何讓資料視覺化能“實話實說”,而非玩弄是非。

第一個概念就是:

The number of information-carring dimensions depicted should not exceed the number of dimensions in the data.

這張開頭使用了許多“錯誤”的資料視覺化例子,往往過度華麗資料本身,因此造成視覺化的誤差,這往往就是用了超過資料本身的“維度”來表現資料特性。

第二個概念就是:

Graphics must not quote data out of context, which mean context is essential for graphical integrity.

可以把“要跟誰比”這個想法放在心上,讓資料有足夠的對照組,提供更好的脈絡。

The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the numerical quantities represented.

Clear, detailed, and thorough labeling should be used to defeat graphical distortion and ambiguity. Write out explanations of the data on the graphic itself. Label important events in the data.

Show data variation, not design variation. #這句講得超好,很容易犯的錯誤

The number of information-carrying dimensions depicted should not exceed the number of dimensions in the data.

Graphics must not quote data out of context.

Data-Ink and Graphical Redesign

Occasionally artfulness of design makes a graphic worthy of the Museum of Modern Art, but essentially statistical graphics are instruments to help people reason about quantitative information

這章開始直指資料視覺化的想法,一開始提到William Playfair這位200多年前的蘇格蘭工程師,所繪製的圖表,左邊是其在1785年,右邊是相隔一年後的風格改進,會發現這樣的改善,很大程度提升直觀性,原因在於其減少了跟資料無關的素材,這邊作者提出的一個核心原則

Above all else show the data.

一張圖表中,決大部分的"墨水"要跟想呈現的資料相關聯,就是所謂的Data-Ink(non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented)。

Data-ink ratio = data-ink / total ink used to print the graphic

這邊作者提出一個公式:Data-ink ratio,用來評估一張圖表是否切合這邊提出的原則,盡量減少非資料相關的"墨水",最大化Data-ink ratio

除了最大化Data-ink的比例,再來則是去除非Data-ink的部分,下面這張圖表做了很好的示範

螢幕快照 2018-02-14 下午10.01.36.png

左邊是原始的圖表,而右邊則是non-data ink + data ink的分圖,會發現最右邊只剩下data-ink的圖表,相對於原始圖表更加的清晰明白。

Erase non-data-ink and erase redundant data-ink.

去除圖表中的三個常見多餘:Moiré vibration, Grid 和 Duck

螢幕快照 2018-02-19 下午11.54.54

曾經有段時間蠻流行有上面這種填充方式來呈現黑白圖表中的不同資訊,這類黑白型態所形塑的分塊,作者moire vibration來暱稱,直指是擾亂視聽,沒有太多用處的裝飾。

螢幕快照 2018-02-19 下午11.51.59

另外一個就是把隔線(Grid)簡化,藉由合併去除,或是用淡色來取代,可以很大程度提高簡潔感。

延伸閱讀
史上最傑出的繪圖大師
讀後總結:The Visual Display of Quantitative Information
知乎討論串
豆瓣書單

使用zapier將evernote筆記自動發布到wordpress部落格上

目前應用程式玲琅滿目,此時有一個方便的方式串連起來兩個應用程式,可以省去許多時間,比如我常用evernote來收集資料,有時候是直接在evernote上整理部落格文章需要的資料和圖片,因為相對於evernote編寫環境穩定,wordpress 網頁版操作感亟待提升,也不好管理的文章,此時就需要在evernote上編寫文章,然後發布到wordpress上的自動化流程。

Zapier就能很好的提供這個需求,跟IFTTT功能類似(用起來比IFTTT順暢許多),裡面有各式各樣串連兩個應用程式的自動化服務,非常棒!

 

裡面的串接邏輯很簡單, A應用程式做了一件事後(Action),會觸發B應用程式,所以在我evernote的使用場景中,當我在特定筆記本儲存篇新的筆記,便會把這篇evernote,轉貼到wordpress上,而zapier可以提供我去調整evernote文章上的資訊,如何貼到wordpress上,評律大概15分鐘一次。

螢幕快照 2018-01-09 下午5.24.57

研究科學家背景:Winston Hide

最近在整理堆積如山的待閱讀論文,其中看到這邊撰寫於2010年的文章Gene-Expression Ontologies and Tag-Based Expression Profiling,通訊作者是Winston Hide教授,主要是探討CAGE資料的分析方式,因之前項目需求,稍微知道目前FANTOM計畫中,主要使用的技術便是根基於CAGE而來,因而產生興趣。

winstonhide

Winston Hide教授是學分子生物學出身,目前是計算生物學教授,參與英國的The 100,000 Genomes Project,本身有個部落格Element of Impact,最後一次更新是在2015年,他的學經歷非常豐富,也跑去在美國矽谷的超級電腦公司MasPar(已倒)工作過,學術經歷則橫跨美國、南非(在南非時參與pan-african genomic project)再到英國University of Sheffield任職神經科學轉譯醫學研究部門的負責人。

他的研究方式通常都會從調控的角度著手,使用整合性分析的方式(偏生物資訊手法),也會開發生物資訊的工具如CAGExploreR。

E. Dimont, O. Hofmann, S. J. Ho Sui, A. R. R. Forrest, H. Kawaji, the FANTOM Consortium, and W. Hide, “CAGExploreR: an R package for the analysis and visualization of promoter dynamics across multiple experiments.” Bioinformatics, Mar. 2014.

這篇的軟體已經沒有在維護惹,在Oxford雜誌上面的圖也看不太到,有點可惜!

FANTOM Consortium and the RIKEN PMI and CLST (DGT), “A promoter-level mammalian expression atlas.,” Nature, vol. 507, no. 7493, pp. 462–470, Mar. 2014.
K. L. Kathrein, A. Barton, Z. Gitlin, Y.-H. Huang, T. P. Ward, O. Hofmann, A. DiBiase, A. Song, W. Hide, Y. Zhou, and L. I. Zon, “A network of epigenetic regulators guides developmental haematopoiesis in vivo.,” Nature Cell Biology, vol. 15, no. 12, pp. 1516–1525, Dec. 2013.

假如對於基因調控機制的研究有興趣,那麼一定要關注FANTOM計畫相關的論文

C. J. Sandberg, G. Altschuler, J. Jeong, K. K. Strømme, B. Stangeland, W. Murrell, U.-H. Grasmo-Wendler, O. Myklebost, E. Helseth, E. O. Vik-Mo, W. Hide, and I. A. Langmoen, “Comparison of glioma stem cells to neural stem cells from the adult human brain identifies dysregulated Wnt- signaling and a fingerprint associated with clinical outcome,” Exp Cell Res, vol. 319, no. 14, pp. 2230–2243, Aug. 2013.

G. M. Altschuler, O. Hofmann, I. Kalatskaya, S. J. Ho Sui, A. V. Krivtsov, S. A. Armstrong, L. Stein, and W. A. Hide, “Pathprinting: An integrative approach to understand the functional basis of disease.” Genome Medicine, vol. 5, no. 7, p. 68, Jul. 2013.
pathprinting分析架構圖
很經典的手法,他把GSEA的觀念放入pathway分析中,將一個個pathway作為單位來看有無顯著,蠻有創意的方法,期待後續的發展。

N. Tiffin, E. Adie, F. Turner, H. G. Brunner, M. A. van Driel, M. Oti, N. Lopez-Bigas, C. Ouzounis, C. Perez-Iratxeta, M. A. Andrade-Navarro, A. Adeyemo, M. E. Patti, C. A. M. Semple, and W. Hide, “Computational disease gene identification: a concert of methods prioritizes type 2 diabetes and obesity candidate genes.” Nucleic Acids Res, vol. 34, no. 10, pp. 3067–3081, 2006.

使用purrr package學functional programming的觀念(六):vector transformation

在使用purrr的時候,會把要計算或是處理的資料以list或是vector的型式導入,通常都會是較複雜的nested資料結構,此時為了方便ETL,需要在pipeline中去調整資料結構,此時就會用到purrr這類vector transformation的函數,主要有七大類:

函數名稱 功能
accumulate, accumulate_right accumulate recursive folds across a list
cross, cross2, cross3, cross_df produce all combinations of list elements
flatten, flatten_lgl,flatten_int,flatten_dbl, flatten_chr, flatten_dfr, flatten_dfc Flatten a list of lists into a simple vector
list_modify, list_update modify a list
reduce, reduce_right, reduce2, reduce2_right reduce a list to a single value by iteratively applying a binary function
splice splice objects and lists of objects into a list
transpose transpose a list

這七大類中,在做資料ETL時,flatten系列、reduce系列、list_modift系列(這次整理時才發現新增的,應該會很好用)、splice和transpose的使用率會比較高,在做一些統計運算時,cross系列和accumulate系列則會幫助頗多!