Learning responsive data visualization : master the art of building responsive visualizations on the Web / Christoph K�orner.

Online resource; title from cover page (Safari, viewed April 5, 2016).

Includes index.

Annotation Master the art of building responsive visualizations on the WebAbout This Book 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. Who This Book Is ForWeb developers and data science professionals who want to make their visualizations work for smaller screen sizes. Some basic knowledge of JavaScript and Data visualization is expected. 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.jsIn DetailUsing 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 Bootstrapthe 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. Style and approachAs the world shifts to mobile devices for consuming data on the Web, developers are faced with the unique challenge of making data visualizations work for their smaller screens. The growth of responsive web design enabled developers to adopt page layouts and media for smaller screens, but there is still little information available on how to adapt data visualizations for the smaller screens. This book fills this important gap and shows how responsive web design principles can be extended to create visualizations that work well regardless of the screen size, thereby allowing developers to build user-friendly visualizations that work well on all devices. In addition to covering some of the popular techniques and design patterns for building responsive visualizations, the book also shows readers how to implement these techniques with the help of some popular tools and libraries.

Cover; Copyright; Credits; About the Author; About the Reviewer; www.PacktPub.com; Table of Contents; Preface; Chapter 1: Getting Started with Responsive Design, Bootstrap, and D3.js; Chapter 2: Creating a Bar Chart Using D3.js and SVG; Chapter 3: Loading, Filtering, and Grouping Data; Chapter 4: Making the Chart Responsive Using Bootstrap and Media Queries; Chapter 5: Building Responsive Interactions; Chapter 6: Designing Transitions and Animations; Chapter 7: Creating Maps and Cartographic Visualizations Using GeoJSON; Chapter 8: Testing Responsive Visualizations

Chapter 9: Solving Cross-Browser IssuesIndex; What is Responsive Design?; Bootstrap -- a popular mobile first CSS framework; Vector graphics in the browser with SVG; Creating graphics with D3.js; Summary; Getting started with D3.js; Drawing shapes with D3; Creating Scales and Axis; A simple bar chart; Summary; Preprocessing data; Loading and parsing remote data; Grouping data; Summary; Units and lengths in the browser; Responsive charts; Using Bootstrap's Media Queries; Summary; Using an event system; Panning and zooming; Summary; Is there a web standard for animations?

Creating animations with JavaScriptTransitions; Shape tweens; Summary; Overview of cartographic visualizations; Data representation for topology and geographic features; Maps and projections; Helpful tools for creating maps in D3; Types of geographic visualization; Summary; A guide on testing visualizations; Manual testing and debugging; Automated testing and Continuous Integration; A testing strategy for visualizations; Summary; A solution to cross-browser compatibility issues; Cross-browser Media Queries; Cross-browser SVG features; Handle touch and mouse events with ease; Summary

Conditional CSS with Media QueriesUnderstanding Breakpoints; Having the right viewport; Relative Units -- %, REM, and EM; Designing for mobile devices first; Including Bootstrap; Finding additional resources; Understanding grid layouts; Hiding elements on different screen resolutions; Using Bootstrap's Media Queries in LESS; Raster/Pixel graphics with Canvas; Hardware-accelerated Pixel Graphics with WebGL; Vector graphics with SVG; Including D3.js; Finding additional resources; Selecting and manipulating DOM elements; Manipulating SVG elements; Data-driven transformations

Using the update patternDrawing Lines and Curves; Drawing Areas between curves; Drawing arcs; Mapping data values to a Pixel Range with scales; Creating Axis; Filtering data to remove outliers; Mapping data to access inner properties; Aggregate data to extract valuable information; Reduce functions in D3.js; Parsing any string data; Units for absolute lengths; Units for relative lengths; Units for resolution; Mathematical expressions; Using relative lengths in SVG; Scaling the viewport; Using the JavaScript resize event; Media Queries in CSS; Media Queries in LESS/SASS

eBooks on EBSCOhost EBSCO eBook Subscription Academic Collection - Worldwide