Tagged

視覺化

A collection of 6 posts

Chart.xkcd:畫出手寫漫畫風的圖表
JavaScript程式視覺化網路

Chart.xkcd:畫出手寫漫畫風的圖表

平常要畫圖表的時候,應該會使用開源的 Chart.js 來畫互動式圖表。但是在跟大家長的一樣的圖表、或是自己加 CSS 之間做取捨,或許可以考慮用 Chart.xkcd 來畫出卡通樣式、手寫風的圖表。

Web 視覺化(四):建立 OpenStreetMap 地圖
HTML5程式網路視覺化開放資料

Web 視覺化(四):建立 OpenStreetMap 地圖

OpenStreetMap 是個開放的地圖,不需要被商業 API 所限制,開發者可以自由地使用。這篇文章將帶你用 Leaflet.js 建置網頁上的 OpenStreetMap 地圖。

高雄市 1999 市政儀表板:用 Open1999 開放資料做視覺化
程式JavaScript視覺化Hackathon開放資料

高雄市 1999 市政儀表板:用 Open1999 開放資料做視覺化

高雄市的 Open1999 開放資料算是很友善的了,不僅有 API 可以拿 JSON 欄位,也支援 https 請求。最近參加了高市府(2018)的比賽,把 1999 的派工資料做了一些整理。

Web 視覺化(三):在 Google Maps 中加入行政區邊界
JavaScript視覺化網路程式Google

Web 視覺化(三):在 Google Maps 中加入行政區邊界

在學會操作基本 Google Maps 以後,再來是如何把行政區邊界加進地圖裡。這篇會透過政府開放資料的行政區邊界,把 GeoJSON 格式讀進地圖裡。

Web 視覺化(二):使用 Google Maps JS API 建立地圖
JavaScript程式網路視覺化Google

Web 視覺化(二):使用 Google Maps JS API 建立地圖

除了建立長條圖等圖表,如果是有經緯度資料的,通常都會選擇用地圖來呈現。Web 上的地圖應該只有 OpenStreetMap 和 Google Maps 兩大宗,這篇則選用 Google Maps 來講解。

Web 視覺化(一):使用 Chart.js 輕鬆建立圖表
JavaScript程式網路視覺化

Web 視覺化(一):使用 Chart.js 輕鬆建立圖表

要有酷炫的動畫,還是要有酷炫的圖表?這一系列的 Web 視覺化教學並不會強調做視覺化(Data Visualization)時該強調哪些維度的資料、選什麼圖表才易讀,但會試圖找一些好上手的套件來做 Web 上的視覺化。