讓視覺化作品躍出畫面 – 使用 loading.io 動畫圖示庫
圖表做來做去都一樣、視覺化再怎麼變化都很無聊嗎?試試看 loading.io 動畫圖示庫,讓你的視覺化活起來!loading.i ...
Vectr – 永久免費的線上向量圖形編輯服務
向量式圖形在網路時代的地位越來越重要,然而除了卡卡的 Inkscape 、貴鬆鬆的 Adobe Illustrator 之外,我 ...
無痛爬梳自己來,用 Google Spreadsheet 爬取網頁資料
你常用到網路上各種來源的資料嗎?搜集整理總是一番功夫,是不是覺得若有一個小精靈能幫我們從搜集、整理到計算都自動完成就好了呢? 這 ...
微動畫簡單做!使用 animate.css 五秒提升作品質感
用戶互動的過程中,一點動態效果能有效地提升整體的使用體驗,但程式製作動畫過程繁瑣,撰寫 CSS 也相當費時。這次要介紹的 Ani ...
Reveal.js + slides.com 製作令人驚豔的互動式簡報
做了超讚視覺化作品想要在簡報中與大家分享,卻總是受限於簡報軟體而無法自由發揮嗎?瀏覽器原生簡報工具 Reveal.js 讓你直接 ...
為所有人打造的資料視覺化服務 — PlotDB
看到想嘗試的視覺化手法,卻不知道該怎麼做嗎?讓 PlotDB 幫你吧!線上視覺化服務 PlotDB 提供上百種的視覺圖表樣版供我 ...
讓我的視覺化動起來!D3.js 動畫函式入門
看膩了靜態圖表,又覺得互動套件效果有限嗎?D3.js 除了提供強大的視覺化輔助函式,就連製作動畫也難不倒他!那麼,就讓我們一起來 ...
熱度地圖簡單做!使用 Datamaps
簡單的地圖視覺化,你還要靠 QGIS 繁複的製作步驟嗎?開源專案 Datamaps 讓我們在線上快速產製十來組不同類型的熱度地圖 ...
視覺化編程入門 — 我該選什麼程式語言?
你想做視覺化,但不會寫程式嗎?程式設計往往是資料視覺化的一大門檻,即便現今已有相當多工具可以幫我們達成任務,但當我們問起:「那我 ...
這樣做就對了!圖表的使用心法 – 基本圖表篇
這是個所有人都需要圖表的時代,但你確定你的圖表做對了嗎?其實,使用圖表有一些簡單的規則跟手法,今天我們就三個最基本的要點、從基本 ...
用結巴斷詞實作文字視覺化 — 以 2016 總統就職演講為例
最近大家最關注的話題之一即是新總統就職,同時也出現了許多演講內文分析的圖表與新聞,但是你知道這樣的視覺化要怎麼製作嗎?這次就讓我 ...
高手才知道!七個你所不知道的 D3.js 秘技
D3.js ,當前最火紅的視覺化套件,你用過了嗎?越來越多人使用 D3.js 來開發視覺化專案,但… 你對 D3.js 的了解又 ...
利用 Voronoijs 繪製多邊形式面積圖
「哇!這好炫!可是我不會做」這是否是你內心裡常常有的遺憾呢?一個常見的例子便是 Voronoi Treemap — 一種類似教堂 ...
NodeBox – 用視覺的方式快速製作資料視覺化
視覺化卻要靠寫程式這種反視覺化的方式來做,不是太諷刺了嗎?雖然程式搭配人機介面與螢幕可以展現非常強大的各種視覺化,但也為許多人製 ...
Python 上前端!利用 Bokeh 與 Python 製作網頁互動視覺化
老師叫我學 Python ,學完才發現沒辦法做互動視覺化,怎麼辦?不要緊,讓 Bokeh 解救你!Bokeh 為一個 Pytho ...
R 也能互動!用 Shiny 與 R 語言將你的數據變成互動圖表
會用 R 做圖表、但不懂網頁、不知道如何做互動視覺化嗎?讓 Shiny 來拯救你吧!Shiny 幫我們打包了網頁的製作細節、提供 ...
不用再拉半天!用 Labella.js 幫我們製作美麗的時間軸標籤
事件太多,拉起時間軸傷透腦筋嗎?時間軸是常見的視覺化手法,但現成工具往往缺乏變化,手繪又曠日費時。不要緊!Labella.js ...
顏色這樣挑!搞定你的視覺化色盤( 下 )
當你搞懂了明度彩度、資料型態與選色工具,挑選顏色還有更重要的問題:如何為你的讀者而選?搞定色盤最終章! ...
顏色這樣挑!搞定你的視覺化色盤( 中 )
上週我們帶大家了解了視覺化選色的基本原則與分類,也許大家都很急著想要實際做做看,但別急 — 選色的重點從現在才開始!這次就讓我們 ...
顏色這樣挑!搞定你的視覺化色盤( 上 )
曾煩惱視覺化作品的顏色怎麼選嗎?也許你看過很多色盤網站,但你可能不知道,一般色盤網站的色盤並不適合直接運用在資料視覺化之上的喔! ...
E2D3 — 不懂程式也能用 Excel 建立 D3 圖表
不會寫程式,也想要做出 D3.js 的各種動態圖表嗎?動態圖表往往比靜態圖表強力許多,但礙於技術與工具的限制,要做出動態的視覺化 ...
D3.js 重大更新! 4.0 版新鮮功能摘要整理
正在學 D3.js 嗎?那錯過這篇你就糗大了!大約在兩個多月前, D3.js 作者 Michael Bostock 宣佈下一版本 ...
總整理!你不可錯過的 d3.js 資料轉換技巧
手上的資料格式跟圖表格格不入,總要處理半天才搞定嗎?當我們在利用 d3.js 做視覺化時,常碰到需要把資料轉換成各種不同結構的時 ...
《圖表101》 拯救生命的圖表 — 南丁格爾玫瑰圖
長得很像圓餅圖,但概念更接近直方圖 ( Histogram ) — 這樣的極區圖又被稱做南丁格爾玫瑰圖,他與南丁格爾有什麼關係呢 ...
不用再自己畫圖表!自動視覺化服務 Popily
手上有筆資料試了半天,卻老是做不出好的圖表?覺得做圖步驟重覆又費時嗎?網路上有許多很棒的視覺化工具,然而往往我們卻不知道該如何下 ...
需要做互動式資訊圖表嗎?試試看 Venngage 吧!
想利用資訊圖表做行銷嗎?線上有各式各樣的資訊圖表工具,然而很少可以讓你加入互動元素。 Venngage 除了一般資訊圖表工具會有 ...
不懂設計?用 Slideloot + Powerpoint 快速製作資訊圖表
不擅長繪圖軟體也不會畫畫,卻又想要做出不錯的資訊圖表嗎?現在資訊圖表工具百百種,但其實光是 PowerPoint 就能做出很不錯 ...
DataBasic – 為初學者打造的資料探索器
手上有一堆資料,但對於內容卻毫無頭緒嗎?前陣子 Databasic 正式上線,一口氣推出了三個有趣的資料探索工具,主打資料科學初 ...
地理區塊自己畫 – 使用 geojson.io
想自製地理區塊範圍做視覺化,但現有的製圖軟體 QGIS、ArcGIS 等又好複雜!地圖視覺化總是讓人煩惱,有沒有比較好用的工具呢 ...
超簡單的甘特圖套件 — timesheet.js
甘特圖為一種特殊的長條圖,最常被用來進行專案管理,所以在專案管理軟體中比較常見,一般的視覺化工具裡反而不容易見到。沒關係,今天為 ...
用圖表為你的資料建立儀表板 — Chartio
每天監測流量、用戶互動、銷售跟伺服器狀態,一堆視窗真是蠟燭兩頭燒! Chartio 讓你建立視覺化的資料儀表版,將各大服務整合於 ...
當網路無障礙碰上資料 — 八個秘訣,打造無障礙視覺化
我的視覺化,盲人看得到嗎?雖然資料視覺化本質上就是要用「看」的,但我們其實也可以讓他用「聽」的、「讀」的或「摸」的!這次讓我們一 ...
拉出你的故事時間線 — Line.do
當我們看新聞時,報導往往一看過便忘,很多事件缺乏一個縱觀性的整理。Line.do 利用類似臉書動態牆的呈現形態,讓我們將各種資訊 ...
他的插畫說你的故事 — 用 Storybird 創作視覺故事
喜歡說故事,卻不善於繪畫與設計嗎?「要是有人能幫我畫就好了…」那你真的該看看這個服務!Storybird 串連起插畫家社群,讓無 ...
突破 D3.js 的速度極限 — 2D WebGL 與 PIXI.js
「好不容易學了 D3.js ,可是做出來的作品都好慢…」結合資料與文件模型的 D3.js 可說已是當代視覺化必備技能,可是與 S ...
Chartico – 快速製作可愛長條圖
「我只是要做個長條圖,有必要學程式嗎?」現今的圖表工具大多強調圖表類型多樣化與客製的彈性,卻往往把製作圖表的難度推到另一個門檻外 ...
彈性與易用性兼具的圖表工具 — Highchart
使用現成圖表,卻常覺得做不到想要的效果嗎? Highchart 身為一個圖表函式庫,它同時也提供了線上的圖表編輯器,讓你在使用工 ...
改作學習兩相宜、D3 源碼任你用 - D3 in a Box
強大的 D3.js 有個極大的缺點 — 任何圖表都要自己重頭寫!彈性往往帶來繁瑣的副作用,然而 Cloudstitch 這間公司 ...
用視覺化快速掌握大量資料 - Datacomb
龐大的資料常不易分析與理解,有沒有什麼可以快速探索資料的方式呢?你需要 Datacomb ! Datacomb 是個視覺化分析與 ...
給網頁苦手的數位專輯工具 - Pageflow 簡介
大家可能都看過這樣的數位專輯:滿版的影象、背景動畫等極具震憾效果的敘事方式,但你是否想過這要如何做到呢? Pageflow 讓你 ...
D3.js 實戰 - 利用 Treemap Layout 將政府預算視覺化
還記得最近爆紅的台北市政府預算視覺化嗎?它使用了 D3.js 的 Treemap 與 Force Layout 製作;前幾個月我 ...
四個步驟作圖表 — 開源圖表工具 Datawrapper
你曾經覺得需要一個量身打造的統計圖表工具嗎?線上圖表工具用過了百百種,真的要挑一個給公司、團隊的同事們使用,有時候還是綁手綁腳的 ...
SVG Crowbar — 視覺化一鍵打包帶回家
看到別人的網頁視覺化作品感到賞心悅目想要珍藏收集、或是帶回家改一改拿來自用嗎?紐約時報開發的「SVG Crowbar」套件幫你一 ...
Storify — 用網路拼出你的精彩故事
敘事是視覺化的一個重點要素,然而網路時代的今天,說個好故事怎麼少得了先進的工具幫忙呢?今天為大家介紹 Storify — 讓你透 ...
D3.js 實戰 - 上色落伍了,來點圖樣吧!
一成不變的色塊視覺化,想來點花樣嗎?一般我們在使用 SVG 繪圖時都會指定填滿形狀的顏色,不過其實 SVG 不光只能用顏色填滿, ...
Hyperlapse.js - 利用 Google 街景製作動態縮時效果
縮時攝影 ( Timelapse ) 的製作礦日費時,動態縮時 ( Hyperlapse ) 的製作更是麻煩,但是現在只要坐在家 ...
史上最強大的資料整理工具 - Open Refine
三天三夜的逐行修正、重新調整欄位 … 你曾經跟資料奮戰過嗎?為了加速人類文明進步以及節省我們的時間, Google 開發了 O ...
Odyssey.js — 幫你用 CartoDB 地圖說出動人故事
地圖是很棒的視覺化敘事媒介,先前我們也介紹過像是 TimeMapper 、 StorymapJS 等地圖敘事工具,但這些工具搭 ...
別再爬了!用 Blockspring 將任何 API 接到你的試算表
寫爬蟲程式、用爬蟲服務好麻煩,即便有 import.io 、 kimonolabs ,還是得點半天再另外整理,要是有個服務直接 ...
Visage.co - 簡單入門的線上視覺化工具
線上視覺化工具相當多,其中很多都提供了相當多的功能、素材以及複雜的收費模式。這次讓我們帶大家來看看 Visage.co - 一個 ...
線上阿拉伯數字與中文數字轉換工具幫你快速切換數字
中文數字轉換器除了 Spreadsheet 套件,也推出了網頁版,試試看吧:
...
六個訣竅,改進你的視覺化作品
資料視覺化並不難做,但做出一個優秀的視覺化作品卻是一門大學問。為了幫助大家做出更棒的視覺化作品,我們整理了六條關於視覺化相當基礎 ...
視覺化作品發表前,別忘了用這些工具測試一遍!
常聽到有人抱怨你的視覺化出包嗎?為什麼在臉書分享的效果總是這麼差?我們這次整理了幾個很方便的工具,讓我們可以在發表網頁視覺化作品 ...
我該用數字還是圖表?視覺化中四種數字的使用時機
初玩視覺化的朋友常常會犯這種錯誤:「不管什麼資料,通通畫出來就對了!」「不管資料類型,用最炫的方法就沒錯!」然而圖表也是有各自的 ...
D3.js 實戰 - Canvas 把我的視覺化變「快」了!
「我的視覺化好慢!」使用 D3.js 作網頁視覺化最常與 SVG 一起運用,但向量化的本質讓 SVG 實用上有些許限制,最大的問 ...
「路殺」生態資料視覺化
「路殺」(路死)兩個字,可能會讓很多人覺得驚悚與陌生,但它代表的卻是台灣生態圈常見的「死亡模式」。路殺究竟是什麼呢?生態界的資料 ...
用 Visme 製作會動的資訊圖表吧!
看過了許多線上資訊圖表製作工具,想要來點不一樣的嗎?那你一定要試試看 Visme !除了常見的大量素材跟方便的編輯介面, Vis ...
不知道怎樣把 PDF 表格轉資料嗎? 讓 Tabula 解救你!
「格式是PDF?喔不~~~!」相信不少人有類似的經驗,好不容易找到的資料,卻是藏在 PDF 的表格中。我們要的往往只有表格裡的資 ...
D3.JS 入門系列 - Voronoi Diagram 教學
發生災害時,如何用地圖快速呈現各地區最近的救護站?在做地理資料視覺化時,常有這樣的需求:依據站點將地圖切分成許多塊,每一塊都有專 ...
AI 變 HTML!ai2html 讓你用 Adobe Illustrator 做網頁
常常我們嘔心瀝血的圖表作品最後會轉換成圖後以圖片的方式發表,但麻煩的是圖片的內容 Google 搜尋無法分析,而每次修改又都要重 ...
資料爬梳一鍵搞定 - 使用 import.io 爬梳網頁資料
複製、貼上… 你還在手動爬資料嗎?類似 Kimono , import.io 同樣幫程式苦手爬網站的資料,但 import.io ...
視覺化的 3D 世界 - X3D 入門
不太懂程式的你想要做 3D 視覺化,卻覺得 3D 離你太遙遠嗎?事實上,我們完全可以用平常寫網頁的方式來製作 3D 內容!網頁上 ...
彈指間畫出迷你圖表 - jQuery Plugin 「Peity」 簡介
想要有個圖表,但你的資料很簡單,不想搞得太複雜嗎?繪圖軟體、線上圖表工具通通丟掉,在你的網頁裡裝上這個 jQuery Plugi ...
絕對別忽略的三個視覺化關鍵要素
要會動!要很炫!要很多功能!製作視覺化作品時你心裡想的是什麼?有沒有想過什麼才是真正該注意的重點呢?一個好的視覺化作品並不在於最 ...
網頁視覺化必備 - 可縮放向量圖 SVG 入門
想在網頁上做視覺化?那「SVG」這項技術你最好別錯過。可縮放式向量圖形 ( SVG , Scalable Vector Grap ...
用地圖說故事 - StoryMapJS
撰寫報導、文章時,常對如何傳達地理訊息的部份感到頭痛嗎?試試看故事地圖吧!美國北西大學奈特實驗室 ( Knight Lab o ...
D3.js 入門系列 - Force Layout 教學
看過人物關係圖嗎?說到 D3.js 與互動視覺化,你一定不能錯過的就是 Force Layout 了,這是一個利用引力與斥力計算 ...
用 Canva,設計苦手也能輕鬆做圖
曾經要做特殊用途的海報,卻搞不定尺寸、比例,也不知道怎麼設計嗎?那你可能會對線上設計軟體 Canva 有興趣!Canva 不僅提 ...
D3.js 入門系列 - 泡泡圖製作教學
常看到網上精美的泡泡圖,想不想自己做做看?透過 D3.js ,不光是一般的泡泡圖,還可以做出各種不同的變化喔!這次就讓我們來看看 ...
收集全世界的視覺語言 - The Noun Project
一圖勝萬語,有時萬言書不如一張圖來得巧。符號、圖標已成生活不可或缺的一部份,但設計圖示又不是簡單的工作;若有個地方已經收集了世界 ...
只要十秒鐘,使用 Loading.io 製作 Loading 圖示
在做視覺化時,曾考慮過載入速度嗎?資料視覺化常牽涉到資料讀取,然而費時的資料傳輸很容易就讓你的讀者轉台。在資料傳輸時,讓讀者轉 ...
台北走下坡?用坡度圖看五都失業率走勢
大家往往說台北工作好找,就業機會多,所以要上台北打拼… 事實上台北比各地的失業率狀況,你知道是如何嗎?這次我們就來利用政府釋出的 ...
三個步驟教你做地圖式時間軸 - 開源套件「時間地圖」介紹
你有沒有想過,在某個突發事件發生時,如果能立刻標出事件的發生次序以及地點,可以幫助更多人迅速了解發生過程。今天要介紹的,就是一款 ...
怡君 vs 雅婷!用年紀 API + Google 圖片搜尋計算菜市場名平均年齡
你知道怡君跟雅婷哪個名字比較「年輕」嗎?前陣子火紅的年齡計算器 how-old.net 其實是微軟 Oxford 計劃中的一部份 ...
免費地圖向量圖下載-Free Vector Map
製作視覺圖表,常常需要用到地圖表示不同的數據,但自己動手重頭畫又很麻煩。因此今天要推薦的網站 Free Vector Maps, ...
D3.js 視覺化教學 -全球即時地震視覺化
最近地震頻繁,剛剛在巴布亞紐幾內亞又發生一個規模七的地震,讓我們利用這個機會教大家一起來做全球地震視覺化吧! ...
六個訣竅,讓你用視覺化看透資料玄機
資料翻來翻去,就是不知道哪裡有玄機?如果你曾經試著解讀手上的資料,那你大概也了解:要用資料講故事,最困難的一點就是找出「爆點」了 ...
六個步驟,教你十分鐘內用 Google Earth 做出專業 3D 地圖
...
視覺化不及格,點擊率卻排第一?軟體盜版金額統計案例剖析
你有這樣的經驗嗎:明明覺得做得很棒的視覺化卻沒什麼人點?明明看起來很遜的作品卻引發了病毒效應?這樣的經驗小編有好幾次,可惜大多 ...
實價登錄地圖我也會!用 CartoDB 製作地圖視覺化
在地圖上畫資料,效能往往是個大問題。我們手上常有大量的資料,像是台北市監視器列表、全台登記工廠列表等等,但數十萬筆的資料要畫得 ...
台灣歷年地震多嚴重?地震視覺化告訴你
有沒有廁所上到一半、或是澡洗到一半卻發生地震的經驗?台灣處在地震帶上,經常發生地震,規模常常也不小,這次我們利用地圖事件視覺化工 ...
視覺化實戰 - D3.js 地理區塊視覺化
在台灣地圖上做視覺化常常讓人困擾,因為很多工具雖然支援地圖上的資料視覺化,但在台灣往往卻看不到比縣市還更細緻的區塊。沒問題,今天 ...
資訊圖表製作百寶箱 - Piktochart
做報告、做海報、做資訊圖 … 是不是曾經很煩惱,圖片資源找半天,圖表還要想辦法畫?來試試 Piktochart 吧 - Pikt ...
D3.js 實戰 - 地表最速地球儀實作
看過地球儀嗎?有沒有想過要怎麼做類似的視覺化?感覺起來好像很難,但是用 D3.js 的話,短短十幾行程式就做得到喔!這次 D3j ...
視覺化的夢幻組合 - D3.js 、 Adobe Illustrator 與 NodeJS
常用 D3.js 繪圖,但都只能在瀏覽器裡面看嗎?前端動態的結果需要即時截圖,卻不知道怎麼做比較好?這次我們帶大家看看怎麼利用 ...
不會寫程式也能爬,Kimono 幫你把網站變資料
常常做報告時需要網路上的資料,卻因為東西太多、滑鼠點壞了都都還抓不完嗎? 科技的進步就是這麼神奇,Kimono 讓你連程式都不用 ...
不只閱讀,更能看見-革命性的留言系統 pol.is
這個標題下得可能不好,因為 pol.is ( polis.io ) 不光是個留言版,而是包含「線上評論」與「觀點分析」的「視覺化 ...
上傳資料?落伍了!使用 DataHero 製作視覺化圖表
收集資料、匯出、整理再上傳?相信大家日常都會用到很多不同來源的資料,但在視覺化這些資料之前,難免要費一番功夫把資料搞定。Data ...
p5.js - 初學者的資料視覺化函式庫
網頁資料視覺化常使人感到挫折 - 各種不同規格、瀏覽器支援、技術細節的瑣碎,往往令初學者為之卻步。p5.js 包裝所有的技術細節 ...
不寫程式也能有強大彈性 - Amcharts 圖表工具
Amcharts 是一個強大的 Javascript 圖表函式庫,但他不只是一個函式庫而已;他同時提供了一個線上製作圖表的工具 ...
千萬別忘記,製作圖表要確認的 7 個要點
五彩繽紛的立體長條圖,有沒有什麼該注意的? ...
網頁視覺化利器 - D3.js 簡介
想在網站上做資料視覺化,你會怎麼做?用 Excel 填填拉拉產生圖表再存成圖檔上傳嗎?用套件產生千篇一律的圖表再嵌入到網站裡?雖 ...
Open Graph?跟資料視覺化有什麼關係?
做網站從來都沒有好好設定過 Open Graph Meta Data 嗎?你這下糗大了! 現在已有相當多的網站能讀取 Open ...
D3JS 實戰 - 是長條也是圓餅的變形圖表
常見的圖表工具提供的往往是繪製特定圖表的功能,你有看過可以在類型間變化的圖表嗎?這次我們為了展現 D3JS 與 SVG 強大的 ...
資料爬蟲實戰-使用 node.js
上次介紹了網頁前端資料直爬的手法,但當資料量很大或是需要費時處理時,並不適合在網頁上做,否則會讓我們讀者的電腦當掉。因此,後端資 ...
誰說前端爬不了資料?使用 crossorigin.me
資料,資料,我需要資料!視覺化通常拿整理好的資料來做,尤其是網頁上的資料視覺化。但如果你需要即時產生的資料,而且資料還是從別的網 ...
看過圖表社交平台嗎? - 使用 plot.ly 製作圖表
這次要介紹的線上圖表工具是 plot.ly 。比起 infogr.am 或 amchart 等不同的工具,plot.ly 更強調 ...
統計圖表製作 - 使用 RAW
RAW ( https://raw.densitydesign.org/ ) 是個很特別的圖表工具。基於 D3.js,一頁式不需 ...
只有圖表卻想要資料?讓 D3 Deconstructor 幫你!
偶而看到很棒的資料視覺化也會想玩玩看他的資料,而他們的資料通常也不難取得,只要透過瀏覽器監看網路傳輸的內容很容易就可以找到。不過 ...
千萬不要犯,7 個常見的圖表錯誤
我們看到了厲害的草莓、不錯的蘋果、可以的夏威夷豆跟龍眼,還有其它一堆無關緊要的傢伙 ...
統計圖表製作 – 使用 d3-generator
D3.js ( https://d3js.org ) 是一個強大的網頁端視覺化函式庫,除了他獨特的資料驅動式物件模型之外,完整的 ...
使用 infogr.am 製作圖表與資訊圖
不同於一般的資訊圖表製作網站, infogr.am 是以圖表製作為主軸,以捲軸式的頁面插入各種不同的素材來做編輯,大大簡化了圖表 ...
復航事件、人為失誤與設計心理學
Southwest Airlines Flight 1248, photo by Gabriel Widyna ...
歷年台灣航空事故圖表
2015年2月4日,一架從松山前往金門的復興航空 235 號班機疑因機件問題,機身傾斜無法順利控制,此時飛機剛駛離松山機場,尚在 ...