Learning Responsive Data Visualization电子书

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