Learning Responsive Data Visualization

Packt Publishing Limited
  • 1. Auflage
  • |
  • erschienen am 23. März 2016
  • |
  • 258 Seiten
E-Book | ePUB mit Adobe DRM | Systemvoraussetzungen
978-1-78588-433-7 (ISBN)
Master the art of building responsive visualizations on the WebAbout This BookLearn the techniques for building data visualizations that work well for all screen sizesImplement responsive techniques with popular libraries to get to grips with building responsive visualizations that work in the real worldIncorporate 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 LearnGet familiar with responsive design for data visualizationsUnderstand the main concepts of D3.js to create interactive visualizationsUnleash the power of Bootstrap to create stunning and responsive visualizations for all screen resolutionsImplement Touch and Mouse interactions for mobile-first applicationsDesign Transitions and Animations that impress in portrait and landscapeBuild 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 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 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.
  • Englisch
  • Birmingham
978-1-78588-433-7 (9781785884337)
1785884336 (1785884336)
weitere Ausgaben werden ermittelt
  • 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 Issues
  • Index
  • 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 JavaScript
  • Transitions
  • 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 Queries
  • Understanding 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 pattern
  • Drawing 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
  • Media Queries in JavaScript
  • Using Bootstrap's grid system
  • Custom events in D3.js
  • Responsive events
  • Interaction areas
  • Touch events
  • Mouse events
  • A simple zoom
  • An axis zoom
  • Animate SVG using SMIL
  • Animating HTML using CSS
  • Animating anything using JavaScript
  • Timers and intervals in D3
  • Interpolating attributes using D3
  • Easing - Animation progress over time
  • Path transitions made easy
  • Attribute and style tweens for custom interpolation
  • Chained transitions
  • A geographic coordinate system
  • Projecting a sphere on a flat map
  • Which data can be displayed on a map?
  • Can we start now?
  • GeoJSON - a format for geographic features
  • TopoJSON - GeoJSON for web visualizations
  • The Equirectangular projections
  • Orthographic projection
  • Albers projection
  • Spherical Mercator projection
  • Azimuthal Equidistant projection
  • Color scales
  • The geographic shape generator
  • Graticule - grids on maps
  • Loading multiple resources
  • Symbol maps
  • Choropleth maps
  • Why should I care about testing?
  • The different types of test
  • Semi-automated tests
  • Testing and debugging locally
  • Remote-debugging responsive applications
  • Semi-automated visual Regression tests
  • Running tests on your local machine
  • Running your tests in the cloud
  • Conditional comments for Internet Explorer
  • Detecting native features with Modernizr
  • Custom implementations of native features
  • Compatibility of D3
  • Window.matchMedia() and its Polyfill
  • Min-width and max-width support via Respond.js
  • Media Queries in JavaScript with Enquire.js
  • SVG animations
  • Using SVG filters
  • Clipping elements in SVG
  • 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
  • Data Binding and Dynamic Properties
  • Data Join - next-level data binding
  • Defining an Identifier for the elements
  • Linear Scales for linear Mappings
  • Ordinal scale for Mapping non-numeric data
  • Time scales for Mapping time series data
  • Splitting strings using Regular Expressions
  • Parsing dates from strings
  • Parsing and formatting numeric values
  • Conclusion about using relative lengths
  • Prevent Strokes from Scaling
  • Preserving the Aspect Ratio
  • The conclusion of using Viewport scaling
  • The native resize event
  • Adapting the resolution of the data
  • The conclusion of using resize events
  • Creating interaction targets
  • Computing the nearest data point
  • Bézier curves
  • Easing functions in D3
  • GeoJSON to TopoJSON via the server API
  • TopoJSON to GeoJSON via the Client API
  • Manual tests
  • Automated tests
  • Unit tests
  • Integration tests
  • Continuous Integration
  • Test-driven development (TDD)
  • Changing Device Modes in a Chrome desktop browser
  • Emulating mobile devices
  • Syncing Real Devices using Browsersync
  • Running unit tests using Karma
  • Integration testing using Protractor and Selenium
  • Using Modernizr in JavaScript
  • Using Modernizr in CSS
  • Polyfill - implementing missing features
  • Shims - intercepting API calls
  • Wrappers - astracting APIs

Dateiformat: EPUB
Kopierschutz: Adobe-DRM (Digital Rights Management)


Computer (Windows; MacOS X; Linux): Installieren Sie bereits vor dem Download die kostenlose Software Adobe Digital Editions (siehe E-Book Hilfe).

Tablet/Smartphone (Android; iOS): Installieren Sie bereits vor dem Download die kostenlose App Adobe Digital Editions (siehe E-Book Hilfe).

E-Book-Reader: Bookeen, Kobo, Pocketbook, Sony, Tolino u.v.a.m. (nicht Kindle)

Das Dateiformat EPUB ist sehr gut für Romane und Sachbücher geeignet - also für "fließenden" Text ohne komplexes Layout. Bei E-Readern oder Smartphones passt sich der Zeilen- und Seitenumbruch automatisch den kleinen Displays an. Mit Adobe-DRM wird hier ein "harter" Kopierschutz verwendet. Wenn die notwendigen Voraussetzungen nicht vorliegen, können Sie das E-Book leider nicht öffnen. Daher müssen Sie bereits vor dem Download Ihre Lese-Hardware vorbereiten.

Weitere Informationen finden Sie in unserer E-Book Hilfe.

Download (sofort verfügbar)

35,85 €
inkl. 19% MwSt.
Download / Einzel-Lizenz
ePUB mit Adobe DRM
siehe Systemvoraussetzungen
E-Book bestellen

Unsere Web-Seiten verwenden Cookies. Mit der Nutzung des WebShops erklären Sie sich damit einverstanden. Mehr Informationen finden Sie in unserem Datenschutzhinweis. Ok