Learning Responsive Data Visualization

Christoph Korner

  • 出版商: Packt Publishing
  • 出版日期: 2016-03-28
  • 售價: $1,940
  • 貴賓價: 9.5$1,843
  • 語言: 英文
  • 頁數: 258
  • 裝訂: Paperback
  • ISBN: 178588378X
  • ISBN-13: 9781785883781
  • 相關分類: Data-visualization
  • 海外代購書籍(需單獨結帳)

相關主題

商品描述

Key Features

  • Learn the techniques for building data visualizations that work well for all screen sizes
  • Implement responsive techniques with popular libraries to get to grips with building responsive visualizations that work in the real world
  • Incorporate responsive workflow in your data visualization process to build visualizations that take a mobile-first approach.

Book Description

Using D3.js and Responsive Design principles, you will not just be able to implement visualizations that look and feel awesome across all devices and screen resolutions, but you will also boost your productivity and reduce development time by making use of Bootstrap―the most popular framework for developing responsive web applications.

This book teaches the basics of scalable vector graphics (SVG), D3.js, and Bootstrap while focusing on Responsive Design as well as mobile-first visualizations; the reader will start by discovering Bootstrap and how it can be used for creating responsive applications, and then implement a basic bar chart in D3.js. You will learn about loading, parsing, and filtering data in JavaScript and then dive into creating a responsive visualization by using Media Queries, responsive interactions for Mobile and Desktop devices, and transitions to bring the visualization to life. In the following chapters, we build a fully responsive interactive map to display geographic data using GeoJSON and set up integration testing with Protractor to test the application across real devices using a mobile API gateway such as AWS Device Farm.

You will finish the journey by discovering the caveats of mobile-first applications and learn how to master cross-browser complications.

What you will learn

  • Get familiar with responsive design for data visualizations
  • Understand the main concepts of D3.js to create interactive visualizations
  • Unleash the power of Bootstrap to create stunning and responsive visualizations for all screen resolutions
  • Implement Touch and Mouse interactions for mobile-first applications
  • Design Transitions and Animations that impress in portrait and landscape
  • Build a Responsive World Map using GeoJSON and D3.js

About the Author

Christoph Korner, CTO and lead developer at GESIM, a start-up company, is a passionate software engineer, web enthusiast, and an active member of the JavaScript community with more than 5 years of experience in developing customer-oriented web applications. He is the author of Data Visualizations with D3 and AngularJS and is currently pursuing his master's degree in Visual Computing at Vienna Institute of Technology.

Table of Contents

  1. Getting Started with Responsive Design, Bootstrap, and D3.js
  2. Creating a Bar Chart Using D3.js and SVG
  3. Loading, Filtering, and Grouping Data
  4. Making the Chart Responsive Using Bootstrap and Media Queries
  5. Building Responsive Interactions
  6. Designing Transitions and Animations
  7. Creating Maps and Cartographic Visualizations Using GeoJSON
  8. Testing Responsive Visualizations
  9. Solving Cross-Browser Issues

商品描述(中文翻譯)

關鍵特點
- 學習建立適用於所有螢幕尺寸的數據視覺化技術
- 使用流行的庫實現響應式技術,掌握在現實世界中構建響應式視覺化的技巧
- 在數據視覺化過程中融入響應式工作流程,構建以行動優先為導向的視覺化

書籍描述
透過使用 D3.js 和響應式設計原則,您不僅能夠實現在所有設備和螢幕解析度下看起來和感覺都很棒的視覺化,還能透過使用 Bootstrap 這個最受歡迎的響應式網頁應用程式開發框架來提升生產力並縮短開發時間。

本書教授可擴展向量圖形(SVG)、D3.js 和 Bootstrap 的基礎知識,同時專注於響應式設計以及行動優先的視覺化;讀者將從探索 Bootstrap 開始,了解如何使用它來創建響應式應用程式,然後在 D3.js 中實現基本的條形圖。您將學習如何在 JavaScript 中加載、解析和過濾數據,然後深入創建響應式視覺化,使用媒體查詢、針對行動和桌面設備的響應式互動,以及過渡效果使視覺化生動起來。在接下來的章節中,我們將構建一個完全響應式的互動地圖,以顯示地理數據,使用 GeoJSON 並設置與 Protractor 的集成測試,以便在使用 AWS Device Farm 等行動 API 閘道的真實設備上測試應用程式。

您將在探索行動優先應用程式的注意事項後,學會如何掌握跨瀏覽器的複雜性。

您將學到的內容
- 熟悉數據視覺化的響應式設計
- 理解 D3.js 的主要概念以創建互動式視覺化
- 發揮 Bootstrap 的力量,為所有螢幕解析度創建驚豔且響應式的視覺化
- 為行動優先應用程式實現觸控和滑鼠互動
- 設計在豎屏和橫屏中都令人印象深刻的過渡和動畫
- 使用 GeoJSON 和 D3.js 構建響應式世界地圖

關於作者
**Christoph Korner**,GESIM 的首席技術官和首席開發人員,是一位熱情的軟體工程師、網頁愛好者,並且是 JavaScript 社群的活躍成員,擁有超過 5 年開發以客戶為導向的網頁應用程式的經驗。他是《使用 D3 和 AngularJS 的數據視覺化》的作者,目前正在維也納科技大學攻讀視覺計算的碩士學位。

目錄
1. 開始使用響應式設計、Bootstrap 和 D3.js
2. 使用 D3.js 和 SVG 創建條形圖
3. 加載、過濾和分組數據
4. 使用 Bootstrap 和媒體查詢使圖表響應式
5. 構建響應式互動
6. 設計過渡和動畫
7. 使用 GeoJSON 創建地圖和製圖視覺化
8. 測試響應式視覺化
9. 解決跨瀏覽器問題