Learning Responsive Data Visualization

Christoph Korner

• Publisher: Packt Publishing
• Year: 2016
• eBook ISBN: 9781785883781
• Edition: 1
• Topic: Computer Science
• Subtopic: Data Visualisation
• Index: Computer Science

Master the art of building responsive visualizations on the Web

About 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 For

Web 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.js

In Detail

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.

Style and approach

As 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.

Learning Responsive Data Visualization

---

Table of Contents

Learning Responsive Data Visualization

Credits

About the Author

About the Reviewer

www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Getting Started with Responsive Design, Bootstrap, and D3.js

What is Responsive Design?

Conditional CSS with Media Queries

Understanding Breakpoints

Having the right viewport

Relative Units – %, REM, and EM

Designing for mobile devices first

Bootstrap – a popular mobile first CSS framework

Including Bootstrap

Finding additional resources

Understanding grid layouts

Hiding elements on different screen resolutions

Using Bootstrap's Media Queries in LESS

Vector graphics in the browser with SVG

Raster/Pixel graphics with Canvas

Hardware-accelerated Pixel Graphics with WebGL

Vector graphics with SVG

Creating graphics with D3.js

Including D3.js

Finding additional resources

Summary

2. Creating a Bar Chart Using D3.js and SVG

Getting started with D3.js

Selecting and manipulating DOM elements

Manipulating SVG elements

Data-driven transformations

Data Binding and Dynamic Properties

Data Join – next-level data binding

Using the update pattern

Defining an Identifier for the elements

Drawing shapes with D3

Drawing Lines and Curves

Drawing Areas between curves

Drawing arcs

Creating Scales and Axis

Mapping data values to a Pixel Range with scales

Linear Scales for linear Mappings

Ordinal scale for Mapping non-numeric data

Time scales for Mapping time series data

Creating Axis

A simple bar chart

Summary

3. Loading, Filtering, and Grouping Data

Preprocessing data

Filtering data to remove outliers

Mapping data to access inner properties

Aggregate data to extract valuable information

Reduce functions in D3.js

Loading and parsing remote data

Parsing any string data

Splitting strings using Regular Expressions

Parsing dates from strings

Parsing and formatting numeric values

Grouping data

Summary

4. Making the Chart Responsive Using Bootstrap and Media Queries

Units and lengths in the browser

Units for absolute lengths

Units for relative lengths

Units for resolution

Mathematical expressions

Responsive charts

Using relative lengths in SVG

Conclusion about using relative lengths

Scaling the viewport

Prevent Strokes from Scaling

Preserving the Aspect Ratio

The conclusion of using Viewport scaling

Using the JavaScript resize event

The native resize event

Adapting the resolution of the data

The conclusion of using resize events

Using Bootstrap's Media Queries

Media Queries in CSS

Media Queries in LESS/SASS

Media Queries in JavaScript

Using Bootstrap's grid system

Summary

5. Building Responsive Interactions

Using an event system

Custom events in D3.js

Responsive events

Interaction areas

Creating interaction targets

Computing the nearest data point

Touch events

Mouse events

Panning and zooming

A simple zoom

An axis zoom

Summary

6. Designing Transitions and Animations

Is there a web standard for animations?

Animate SVG using SMIL

Animating HTML using CSS

Animating anything using JavaScript

Creating animations with JavaScript

Timers and intervals in D3

Interpolating attributes using D3

Easing – Animation progress over time

Bézier curves

Easing functions in D3

Transitions

Path transitions made easy

Attribute and style tweens for custom interpolation

Chained transitions

Shape tweens

Summary

7. Creating Maps and Cartographic Visualizations Using GeoJSON

Overview of cartographic visualizations

A geographic coordinate system

Projecting a sphere on a flat map

Which data can be displayed on a map?

Can we start now?

Data representation for topology and geographic features

GeoJSON – a format for geographic features

TopoJSON – GeoJSON for web visualizations

GeoJSON to TopoJSON via the server API

TopoJSON to GeoJSON via the Client API

Maps and projections

The Equirectangular projections

Orthographic projection

Albers projection

Spherical Mercator projection

Azimuthal Equidistant projection

Helpful tools for creating maps in D3

Color scales

The geographic shape generator

Graticule – grids on maps

Loading multiple resources

Types of geographic visualization

Symbol maps

Choropleth maps

Summary

8. Testing Responsive Visualizations

A guide on testing visualizations

Why should I care about testing?

The different types of test

Manual tests

Automated tests

Semi-automated tests

Unit tests

Integration tests

Continuous Integration

Test-driven development (TDD)

Manual testing and debugging

Testing and debugging locally

Changing Device Modes in a Chrome desktop browser

Emulating mobile devices

Syncing Real Devices using Browsersync

Remote-debugging responsive applications

Semi-automated visual Regression tests

Automated testing and Continuous Integration

Running tests on your local machine

Running unit tests using Karma

Integration testing using Protractor and Selenium

Running your tests in the cloud

A testing strategy for visualizations

Summary

9. Solving Cross-Browser Issues

A solution to cross-browser compatibility issues

Conditional comments for Internet Explorer

Detecting native features with Modernizr

Using Modernizr in JavaScript

Using Modernizr in CSS

Custom implementations of native features

Polyfill – implementing missing features

Shims – intercepting API calls

Wrappers – abstracting APIs

Compatibility of D3

Cross-browser Media Queries

Window.matchMedia() and its Polyfill

Min-width and max-width support via Respond.js

Media Queries in JavaScript with Enquire.js

Cross-browser SVG features

SVG animations

Using SVG filters

Clipping elements in SVG

Handle touch and mouse events with ease

Mouse and touch events

Breaking the event execution chain

Touch events in D3

A note on detecting Touch Devices

A hover state for touch

Pointer events – combining mouse, touch and pen

Disabling pointer events for elements

Summary

Index

2323__perlego__chapter_divider__232...

Table of contents

• Learning Responsive Data Visualization