Data Visualization with D3 and AngularJS (Paperback)

Build dynamic and interactive visualizations from real-world data with D3 on AngularJS

About This Book

• Explore the powerful vector graphics capabilities of modern browsers to build customized cross-platform visualizations using D3.js's data-driven techniques
• Learn how to modularize a visualization into reusable and testable components using the powerful concepts of modern web application design with AngularJS
• This is a step-by-step learning guide closely focused on developing responsive data visualization apps and AngularJS best practices with D3.js

Who This Book Is For

If you are a web developer with experience in AngularJS and want to implement interactive visualizations using D3.js, this book is for you. Knowledge of SVG or D3.js will give you an edge to get the most out of this book.

What You Will Learn

• Design, implement, and integrate an interactive dashboard to visualize server logs in real time using D3 graphics
• Learn cross-platform vector graphics to implement a dashboard visualization
• Perform data-driven transformations on selected HTML and SVG nodes
• Map, group, and filter datasets and create scales and axes
• Modularize data visualization information into reusable components to seamlessly integrate them into an AngularJS application
• Load, parse, and preprocess external data and autoupdate the visualization
• Design various chart types such as scatter, line, bar, or area and extend built-in shapes
• Create custom animations and transitions for the visualization
• Implement interactions and controls for the visualization preserving two-way binding between D3 and AngularJS components

In Detail

Using D3.js, the powerful JavaScript toolkit for creating cross-platform vector graphics, you can now combine performance with maximum compatibility to build a web-based visualization and present data in an interactive and convenient way. We'll reach top-notch reusability and testability by combining D3 graphics with our favorite web application framework, AngularJS.

This book teaches the basics of vector graphics, D3, and AngularJS integration, and then dives into controlling, manipulating, and filtering data. You will learn about the testability of components and how to implement custom interactions, filters, and controllers; discover how to parse and map data in D3.js; and get a grasp on drawing D3.js built-in shapes and curves. After reading the last few chapters, you'll be able to bring life to your visualizations with more features of D3.js such as interactions, animations, and transitions. You will finish your journey by implementing a parser for different server application logs and display them on a Google Analytics style interactive dashboard.

使用D3和AngularJS從現實世界數據建立動態和互動的可視化。本書介紹了以下內容:
- 探索現代瀏覽器強大的向量圖形功能，使用D3.js的數據驅動技術構建自定義的跨平台可視化
- 學習如何使用AngularJS的強大概念將可視化模塊化為可重用和可測試的組件
- 這是一本逐步學習指南，重點是開發響應式數據可視化應用和D3.js的最佳實踐

本書適合具有AngularJS經驗並希望使用D3.js實現互動可視化的網絡開發人員。對SVG或D3.js的了解將使您能夠充分利用本書。

您將學到以下內容:
- 使用D3圖形實時可視化服務器日誌，設計、實現和集成互動儀表板
- 學習跨平台向量圖形，實現儀表板可視化
- 在選定的HTML和SVG節點上執行數據驅動的轉換
- 對數據集進行映射、分組和過濾，創建比例尺和軸
- 將數據可視化信息模塊化為可重用組件，無縫集成到AngularJS應用程序中
- 加載、解析和預處理外部數據，並自動更新可視化
- 設計散點、線條、條形或區域等各種圖表類型，擴展內置形狀
- 為可視化創建自定義動畫和過渡效果
- 實現可視化的交互和控制，保持D3和AngularJS組件之間的雙向綁定

使用D3.js，您可以將性能與最大兼容性相結合，構建基於Web的可視化並以互動和便捷的方式呈現數據。通過將D3圖形與我們喜愛的Web應用程序框架AngularJS結合，我們將實現頂級的可重用性和可測試性。

本書教授了向量圖形、D3和AngularJS集成的基礎知識，然後深入探討了數據的控制、操作和過濾。您將了解組件的可測試性以及如何實現自定義的交互、過濾和控制器；了解如何在D3.js中解析和映射數據；並掌握繪製D3.js內置形狀和曲線的技巧。在閱讀最後幾章之後，您將能夠使用D3.js的更多功能（如交互、動畫和過渡效果）為可視化添加生命。最後，您將實現一個解析不同服務器應用程序日誌並在Google Analytics風格的互動儀表板上顯示它們的解析器。