1 / 14

科專 計畫 「 區域智慧資本三年計畫 」 團隊會議

創意展演 : 內容、工具與應用. 科專 計畫 「 區域智慧資本三年計畫 」 團隊會議. 劉吉軒、廖文宏 郭怡雯、黃邦欣、彭聲揚 103 年 6 月 9 日. 整合地圖、數據、圖表與時間軸的呈現工具. Google map engine. Stat Planet. 曾經使用之模型 :. Arc GIS.  Weaknesses . 費用問題 $ License fee 客製化程度 Difficult to customize 限於本機端運行 Work only locally 資料儲存 Data hosting

darcie
Download Presentation

科專 計畫 「 區域智慧資本三年計畫 」 團隊會議

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 創意展演: 內容、工具與應用 科專計畫「區域智慧資本三年計畫」團隊會議 劉吉軒、廖文宏 郭怡雯、黃邦欣、彭聲揚 103年6月9日

  2. 整合地圖、數據、圖表與時間軸的呈現工具 Google map engine Stat Planet • 曾經使用之模型: Arc GIS

  3.  Weaknesses • 費用問題 $ License fee • 客製化程度 Difficult to customize • 限於本機端運行 Work only locally • 資料儲存 Data hosting • 跨平台 Cross platform issue (mobile phone/desktop/touch pad) • 非開放標準 Not open standard (ex. Flash)

  4.  D3: Data driven Document • For data visualization. • Dynamic and interactive graphical forms. • Open standard: Scalable Vector Graphics (SVG), JavaScript, HTML5, and Cascading Style Sheets (CSS3) • Run in web browsers. • Cross platform. • Code re-usable. • It’s free!

  5. Related library • Cytoscape.jshttp://cytoscape.github.io/cytoscape.js/ • NVD3.jshttp://nvd3.org/ • Chart.jshttp://www.chartjs.org/ • JavaScriptInfoVis Toolkithttp://philogb.github.io/jit/ • Google charthttps://developers.google.com/chart/?hl=zh-tw

  6. Open Data + D3 • 底特律Data Driven Detroit Open Data Site • Tutorial by Jim Vallandingham • by Chris Whong • g0v零時政府

  7. g0v Projects (零時政府) • 台灣行政分區圖 • 中央政府總預算 • 立委投票結果產生器 • MoreG0V projects

  8. 資料視覺化流程

  9. Visualization Process Details

  10. Visualization Process Details 原始資料 資料表 視覺化 資料結構 視覺化呈現 互動呈現 資料轉換 資料 對應 圖形化 • D3 • NVD3 • Google chart • jQuery UI • Json/geojson • Xml • SVG • Plain text • CSV • Excel • Data base

  11. Our example: D3+jQuery UI+NVD3 http://jade.rd.ssic.nccu.edu.tw/js/d3-test/

  12. 簡報完畢，敬請指教

  13. More Examples • World tour • interactive_network_demo • World wide women’s rights • UK Olympic Sentiment Analysis • Visualizing Facebook Friends With D3.js • US budget viz • Visualizing San Francisco Home Price Ranges • Over 2000 D3.js Examples and Demos

More Related