O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning Responsive Data Visualization

Book Description

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.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Learning Responsive Data Visualization
    1. Table of Contents
    2. Learning Responsive Data Visualization
    3. Credits
    4. About the Author
    5. About the Reviewer
    6. www.PacktPub.com
      1. eBooks, discount offers, and more
        1. Why subscribe?
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    8. 1. Getting Started with Responsive Design, Bootstrap, and D3.js
      1. What is Responsive Design?
        1. Conditional CSS with Media Queries
        2. Understanding Breakpoints
        3. Having the right viewport
        4. Relative Units – %, REM, and EM
        5. Designing for mobile devices first
      2. Bootstrap – a popular mobile first CSS framework
        1. Including Bootstrap
        2. Finding additional resources
        3. Understanding grid layouts
        4. Hiding elements on different screen resolutions
        5. Using Bootstrap's Media Queries in LESS
      3. Vector graphics in the browser with SVG
        1. Raster/Pixel graphics with Canvas
        2. Hardware-accelerated Pixel Graphics with WebGL
        3. Vector graphics with SVG
      4. Creating graphics with D3.js
        1. Including D3.js
        2. Finding additional resources
      5. Summary
    9. 2. Creating a Bar Chart Using D3.js and SVG
      1. Getting started with D3.js
        1. Selecting and manipulating DOM elements
        2. Manipulating SVG elements
        3. Data-driven transformations
          1. Data Binding and Dynamic Properties
          2. Data Join – next-level data binding
        4. Using the update pattern
          1. Defining an Identifier for the elements
      2. Drawing shapes with D3
        1. Drawing Lines and Curves
        2. Drawing Areas between curves
        3. Drawing arcs
      3. Creating Scales and Axis
        1. Mapping data values to a Pixel Range with scales
          1. Linear Scales for linear Mappings
          2. Ordinal scale for Mapping non-numeric data
          3. Time scales for Mapping time series data
        2. Creating Axis
      4. A simple bar chart
      5. Summary
    10. 3. Loading, Filtering, and Grouping Data
      1. Preprocessing data
        1. Filtering data to remove outliers
        2. Mapping data to access inner properties
        3. Aggregate data to extract valuable information
        4. Reduce functions in D3.js
      2. Loading and parsing remote data
        1. Parsing any string data
          1. Splitting strings using Regular Expressions
          2. Parsing dates from strings
          3. Parsing and formatting numeric values
      3. Grouping data
      4. Summary
    11. 4. Making the Chart Responsive Using Bootstrap and Media Queries
      1. Units and lengths in the browser
        1. Units for absolute lengths
        2. Units for relative lengths
        3. Units for resolution
        4. Mathematical expressions
      2. Responsive charts
        1. Using relative lengths in SVG
          1. Conclusion about using relative lengths
        2. Scaling the viewport
          1. Prevent Strokes from Scaling
          2. Preserving the Aspect Ratio
          3. The conclusion of using Viewport scaling
        3. Using the JavaScript resize event
          1. The native resize event
          2. Adapting the resolution of the data
          3. The conclusion of using resize events
      3. Using Bootstrap's Media Queries
        1. Media Queries in CSS
        2. Media Queries in LESS/SASS
        3. Media Queries in JavaScript
        4. Using Bootstrap's grid system
      4. Summary
    12. 5. Building Responsive Interactions
      1. Using an event system
        1. Custom events in D3.js
        2. Responsive events
        3. Interaction areas
          1. Creating interaction targets
          2. Computing the nearest data point
        4. Touch events
        5. Mouse events
      2. Panning and zooming
        1. A simple zoom
        2. An axis zoom
      3. Summary
    13. 6. Designing Transitions and Animations
      1. Is there a web standard for animations?
        1. Animate SVG using SMIL
        2. Animating HTML using CSS
        3. Animating anything using JavaScript
      2. Creating animations with JavaScript
        1. Timers and intervals in D3
        2. Interpolating attributes using D3
        3. Easing – Animation progress over time
          1. Bézier curves
          2. Easing functions in D3
      3. Transitions
        1. Path transitions made easy
        2. Attribute and style tweens for custom interpolation
        3. Chained transitions
      4. Shape tweens
      5. Summary
    14. 7. Creating Maps and Cartographic Visualizations Using GeoJSON
      1. Overview of cartographic visualizations
        1. A geographic coordinate system
        2. Projecting a sphere on a flat map
        3. Which data can be displayed on a map?
        4. Can we start now?
      2. Data representation for topology and geographic features
        1. GeoJSON – a format for geographic features
        2. TopoJSON – GeoJSON for web visualizations
          1. GeoJSON to TopoJSON via the server API
          2. TopoJSON to GeoJSON via the Client API
      3. Maps and projections
        1. The Equirectangular projections
        2. Orthographic projection
        3. Albers projection
        4. Spherical Mercator projection
        5. Azimuthal Equidistant projection
      4. Helpful tools for creating maps in D3
        1. Color scales
        2. The geographic shape generator
        3. Graticule – grids on maps
        4. Loading multiple resources
      5. Types of geographic visualization
        1. Symbol maps
        2. Choropleth maps
      6. Summary
    15. 8. Testing Responsive Visualizations
      1. A guide on testing visualizations
        1. Why should I care about testing?
        2. The different types of test
          1. Manual tests
          2. Automated tests
        3. Semi-automated tests
          1. Unit tests
          2. Integration tests
          3. Continuous Integration
          4. Test-driven development (TDD)
      2. Manual testing and debugging
        1. Testing and debugging locally
          1. Changing Device Modes in a Chrome desktop browser
          2. Emulating mobile devices
          3. Syncing Real Devices using Browsersync
        2. Remote-debugging responsive applications
        3. Semi-automated visual Regression tests
      3. Automated testing and Continuous Integration
        1. Running tests on your local machine
          1. Running unit tests using Karma
          2. Integration testing using Protractor and Selenium
        2. Running your tests in the cloud
      4. A testing strategy for visualizations
      5. Summary
    16. 9. Solving Cross-Browser Issues
      1. A solution to cross-browser compatibility issues
        1. Conditional comments for Internet Explorer
        2. Detecting native features with Modernizr
          1. Using Modernizr in JavaScript
          2. Using Modernizr in CSS
        3. Custom implementations of native features
          1. Polyfill – implementing missing features
          2. Shims – intercepting API calls
          3. Wrappers – abstracting APIs
        4. Compatibility of D3
      2. Cross-browser Media Queries
        1. Window.matchMedia() and its Polyfill
        2. Min-width and max-width support via Respond.js
        3. Media Queries in JavaScript with Enquire.js
      3. Cross-browser SVG features
        1. SVG animations
        2. Using SVG filters
        3. Clipping elements in SVG
      4. Handle touch and mouse events with ease
        1. Mouse and touch events
        2. Breaking the event execution chain
        3. Touch events in D3
        4. A note on detecting Touch Devices
        5. A hover state for touch
        6. Pointer events – combining mouse, touch and pen
        7. Disabling pointer events for elements
      5. Summary
    17. Index