infographics.tw

blog.infographics.tw

這樣做就對了！圖表的使用心法 – 基本圖表篇 | 資料視覺化

http://blog.infographics.tw/2016/08/tips-on-basic-charts

這樣做就對了 圖表的使用心法 – 基本圖表篇. 八月 11, 2016. 這是個所有人都需要圖表的時代，但你確定你的圖表做對了嗎 其實，使用圖表有一些簡單的規則跟手法，今天我們就三個最基本的要點、從基本的圖表著手，來與大家分享 – 做好圖表的第一步該怎麼踏出去。 但是，這些圖表做對了嗎 比方說， Microsoft Excel 提供給我們許多製圖的選項. 下圖為一個 3D 長條圖從正面 (左) 與側面 (右) 觀察的實例 右圖在投影的影響下，較遠的線段在螢幕上的實際長度會比較近的還要短，我們用藍色與紅色的長條單獨將他們的長度拿來做比較. 在這個例子中雖然表長度扭曲了，我們勉強還能依賴生活中對立體的感覺來估計資料的正確比例 但更糟糕的是，很多立體圖表其實也沒有把透視做好，讓圖表跟常識中的立體感有所出入，這時不光是繪製的長度受影響，同時還會影響我們的判讀，這是一種稱為 Perspective Illusion ( 透視錯覺 ) 的錯覺效果. 他們運用的視覺線索都不盡相同，包含了 角度 、 長度 、 方向 、 位置 等等 這些視覺線索又各自為這些圖表帶來了不同的功能. Reveal.js slides...

blog.infographics.tw

用結巴斷詞實作文字視覺化 — 以 2016 總統就職演講為例 | 資料視覺化

http://blog.infographics.tw/2016/05/text-visualization-with-jieba

用結巴斷詞實作文字視覺化 以 2016 總統就職演講為例. 五月 22, 2016. 最近大家最關注的話題之一即是新總統就職，同時也出現了許多演講內文分析的圖表與新聞，但是你知道這樣的視覺化要怎麼製作嗎 這次就讓我們帶大家一起來看看，如何使用最棒的 Python 中文斷詞套件 結巴 ( Jieba ) 來為我們快速做字頻分析。 美國 人民 主要 在 今天. 美國人 民主 要 在 今天. 除了切分的方法，不斷新增的詞彙也是個問題 魯蛇 、 八嘎囧 、 頗ㄏ 等等時下流行的用語，往往不在字典中，要怎麼讓程式知道這些字是個 詞 這一直都是個不容易處理的問題。 當然，我們不大可能為了一個文字視覺化的專案而去自行開發斷詞系統，這時若有現成的斷詞函式庫，就好了 恰好，結巴 ( Jieba ) 是一個由來自百度的 Sun Jun Yi 所開發，以 Python 為主的中文斷詞函式庫，他除了內含的斷詞演算法外，也提供我們載入客製化詞庫的功能，並且是開放源碼的專案. 目前結巴已有各種程式語言的版本，我們今天就用 Python 版的結巴 ( 結巴原始版本 ) 來玩玩看 2016 年總統就職演說的講稿吧. 也因為開源，結巴除...

blog.infographics.tw

讓我的視覺化動起來！D3.js 動畫函式入門 | 資料視覺化

http://blog.infographics.tw/2016/11/d3js-transition

讓我的視覺化動起來 D3.js 動畫函式入門. 十一月 7, 2016. 看膩了靜態圖表，又覺得互動套件效果有限嗎 D3.js 除了提供強大的視覺化輔助函式，就連製作動畫也難不倒他 那麼，就讓我們一起來看看要如何使用 D3.js 做到動態圖表的效果吧. 然而，即使程式都已經自行撰寫了，一般要做動畫並不是這麼容易，所幸我們還有 D3.js – D3.js 作者 Mike Bostock 從最初設計 D3.js 時就已經考慮到圖表元件的動畫彈性，而其 Functional Style 的特性更是讓這件事變得相當容易。 舉例來說，若我們想用 D3.js 產生一個紅色的正方形，可以這樣寫. D3select("body").append("svg").append("rect").attrs({ x: 10, y: 10, width: 20, height: 20, fill: "red" });. 若對 D3js 不了解想要開始學習，可參考我們先前撰寫的 網頁視覺化利器 – D3.js 簡介. 由於其 Functional Style 特性，我們可以繼續在上述程式碼後面接上其它樣式的設定. Attrs({ ...

datasci.tw

2015台灣資料科學愛好者年會 — Exploring the Potentials of Real-world Data Analytics

http://www.datasci.tw/speaker.php

江彥生 / Yen-Sheng Chiang. 江彥生是位社會學家，對各式各樣的 社會行為 研究議題都感興趣，他目前任職於香港中文大學，之前曾在美國加州大學 (UC-Irvine) 以及台灣中央研究院服務過。 江博士的研究專長是社會網絡 (Social Networks) 與社會心理學 (Social Psychology)，但舉凡任何冠上 社會 兩個字的學科領域，他都有興趣涉獵，包含近年來發展快速的 計算社會科學 (Computational Social Science)。 朱威達 / Wei-Ta Chu. 朱威達教授於 2006 年在台灣大學取得博士學位，2007 年起任職於中正大學資訊工程學系。 曾在多媒體頂尖研討會 ACM Multimedia 獲得最佳論文獎，也曾到美國哥倫比亞大學擔任短期訪問學者。 車品覺 / Pun-Kok Chia. 香港人，曾在美英澳洲等地接受西方教育, 新南威爾士大學畢業，後於清華及 INSEAD 獲得雙碩士學位，先後在 HSBC / PCCW / 微軟 / eBay 等多家跨國公司任高管職務, 未加入阿里巴巴前在敦煌網曾任 CIO 及 CPO。 A self-e...

blog.infographics.tw

為所有人打造的資料視覺化服務 — PlotDB | 資料視覺化

http://blog.infographics.tw/2016/11/plotdb-the-data-visualization-service

十一月 13, 2016. 看到想嘗試的視覺化手法，卻不知道該怎麼做嗎 讓 PlotDB 幫你吧 線上視覺化服務 PlotDB 提供上百種的視覺圖表樣版供我們自由選用，同時也提供了一個專為視覺化打造的編輯介面，而且最酷的是 – 不會寫程式也能上手. 隨著網路普及，越來越多各領域的人 – 包括商管、行銷、甚至新聞媒體 – 都想利用視覺化的力量，但當套件軟體的基本圖表無法滿足他們的時候，他們都面臨到了一個很大的門檻 程式設計。 圖表產製通常牽涉到自動化，而編程製圖能讓我們免於費時且重覆的手工繪圖 然而，雖然 D3.js 的作者 Mike Bostock 提出了 Toward Reusable Chart. 的概念，另一方面我們卻看到網路上有越來越多樣性的圖表，即使已經開源，也都只能使用 一次 – 若你完全不懂程式，你幾乎不太可能利用它們。 為什麼我們不能像逛街購物一樣的挑圖表，回家打開來就可以直接使用 於是 infographics.tw 團隊決定親手打造一個這樣的工具，經過了幾個月的努力後 PlotDB 就這樣誕生了。 在上圖中，右方 (1) 為圖表結果預覽，左方(2) 則為圖表設定。 存檔之後便會回到 ...

blog.infographics.tw

無痛爬梳自己來，用 Google Spreadsheet 爬取網頁資料 | 資料視覺化

http://blog.infographics.tw/2016/11/google-spreadsheet-data-scraping

無痛爬梳自己來，用 Google Spreadsheet 爬取網頁資料. 十一月 23, 2016. 你常用到網路上各種來源的資料嗎 搜集整理總是一番功夫，是不是覺得若有一個小精靈能幫我們從搜集、整理到計算都自動完成就好了呢 這次我們要來與大家分享使用 Google Spreadsheet 的秘技 如何利用 Google Spreadsheet 將整個資料分析的過程給自動化. 試算表工具 ( 像是 Microsoft Excel 或 Google Spreadsheet ) 其實可以幫我們不少忙，利用試算表的公式與函式功能，我們可以透過儲存格的串連運算很快的將繁複的運算過程自動化，但是資料的來源又該怎麼辦呢. 其實， Google Spreadsheet 已經內含了幾個資料爬取的工具，其中包括. ImportDATA – 讀取網路上的 CSV / TSV 檔. 使用 Magic JSON 匯入 json 檔. 使用 importDATA 讀取 CSV 檔. 要使用 importDATA 很簡單，首先我們需要一個 CSV 的網址，這裡我們利用政府資料開放平臺中的 01年平均餘命-依年齡別分.CSV.

blog.infographics.tw

微動畫簡單做！使用 animate.css 五秒提升作品質感 | 資料視覺化

http://blog.infographics.tw/2016/11/animate-css

微動畫簡單做 使用 animate.css 五秒提升作品質感. 十一月 20, 2016. 這次要介紹的 Animate.css 為我們預建了 75 種不同的動態效果，讓我們簡單一個動作就為元件加上動畫. 微動畫 ( micro animation ) 在 UX 至上的現在越來越流行，它為我們的作品加上互動的線索、引導讀者的視線，可說已經是一種不可或缺的要素。 使用 D3js 的動畫函式 ( 可參考 讓我的視覺化動起來 D3.js 動畫函式入門. 使用 CSS3 的 Animation 屬性. 然而，前者程式的方式雖然不難且頗具彈性，卻需要具備 D3.js 與 JavaScript 的背景知識 而後者 CSS3 的方法除了需要懂 CSS3 之外，自行維護也需要費一番功夫。 Animate.css 由 Daniel Eden 開發，即是一個 CSS3 Animation 預設集大全，內含 75 個不同的動畫效果，我們只要透過設定 Class 的方式使用即可，例如. 上例為一常見的網頁標題，要讓他跳起來，我們只需要兩個動作，首先，引入 Animate.css 樣式檔. 接著，為 h2 加上三個 CSS 類別.

blog.infographics.tw

熱度地圖簡單做！使用 Datamaps | 資料視覺化

http://blog.infographics.tw/2016/11/make-choropleth-with-datamaps

十一月 1, 2016. 簡單的地圖視覺化，你還要靠 QGIS 繁複的製作步驟嗎 開源專案 Datamaps 讓我們在線上快速產製十來組不同類型的熱度地圖，並且直接提供向量檔讓我們後續客製，趕快來看看可以怎麼玩吧. 搭配地圖有各式各樣的視覺化手法，比方說追求認知精確的統計地圖 ( Cartogram ) 、標記資訊的泡泡地圖或長條圖地圖、而這次我們所要談的主角則是熱度地圖 / 面量圖 ( Choropleth )。 下載後製 下載成 PNG 或 SVG 檔供我們後續於簡報或向量編輯軟體中使用. 連至 Datamaps.co 線上編輯器. 我們可以上傳預先準備好的 CSV 檔，但裡面需要有已經對應到代碼的國家 / 區域代碼，有時我們不是很清楚這些碼是什麼，這時候我們可以選擇 Go to the data table 直接利用線上表格來建立資料，在這邊國家 / 區域的名字已經事先提供，因此就不用再自己建立區域代碼，只需要逐一將資料填入. Datamaps 提供 PNG 或 SVG 格式下載，我們可以使用 Adobe Illustrator 等向量編輯軟體做進一步的客製化。 169; 2017 資料視覺化.

blog.infographics.tw

關於我們 | 資料視覺化

http://blog.infographics.tw/about-us

新形態數位專輯 Innovative Long Form Journalism. 使用者介面 / 體驗最佳化 – UI / UX Optimization. 四月 2nd, 2015. 五月 28th, 2015. 七月 19th, 2015. 七月 20th, 2015. 您好, 我們的 github: http:/ github.com/infographicstw. 有些範例中的程式碼片段是放在 github gist: http:/ gist.github.com/infographicstw. 十二月 30th, 2015. 十二月 30th, 2015. 三月 18th, 2016. 三月 19th, 2016. Vectr – 永久免費的線上向量圖形編輯服務. 無痛爬梳自己來，用 Google Spreadsheet 爬取網頁資料. 微動畫簡單做 使用 animate.css 五秒提升作品質感. Reveal.js slides.com 製作令人驚豔的互動式簡報. 169; 2017 資料視覺化.

blog.infographics.tw

視覺化編程入門 — 我該選什麼程式語言？ | 資料視覺化

http://blog.infographics.tw/2016/08/coding-intro

八月 30, 2016. 你想做視覺化，但不會寫程式嗎 程式設計往往是資料視覺化的一大門檻，即便現今已有相當多工具可以幫我們達成任務，但當我們問起 那我要怎麼做到 xxx 效果 時，得到的答案通常都還是 得寫 Code。 這兩天看到了 Nathan Yau 於 Flowing Data 網站所分享的文章 5 Tips for Learning to Code for Visualization. 有鑑於此，我們決定來規畫一系列的文章，從 0 到 1 ，一步步的帶大家邁向視覺化的殿堂 不過在那之前，就讓我們先來了解一下 程式語言百百種，我該挑哪一個. 事實上，幾乎任何程式語言都可以做視覺化，我剛開始學程式時曾用 Quick Basic 的繪圖函式做了很多漂亮的圖、而大家在學 C 語言時一定也有過經典的 印出三角形 作業。 不過若談到資料科學，現今最流行的大概就是 R 、 Python 與 JavaScript。 舉個例子來說，若我們有一堆資料，想要一次將他們都乘上 5 ，在 R 中可能是這樣寫. Data - c(1,2,3,4,5) data - data * 5. 因此，若從 R 想要製作互動圖表，製...