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
  • |
  • Großbritannien
978-1-78588-433-7 (9781785884337)
1785884336 (1785884336)
weitere Ausgaben werden ermittelt
Christoph Korner, CTO and lead developer at GESIM, a start-up company, is a passionate software engineer, web enthusiast, and an active member of the JavaScript community with more than 5 years of experience in developing customer-oriented web applications. He is the author of Data Visualizations with D3 and AngularJS and is currently pursuing his master's degree in Visual Computing at Vienna Institute of Technology.
  • 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
  • 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
  • Chapter 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
  • Chapter 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
  • Chapter 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
  • Chapter 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
  • Chapter 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
  • Chapter 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
  • Chapter 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
  • Chapter 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 - astracting 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

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 dieser Web-Seiten erklären Sie sich damit einverstanden. Mehr Informationen finden Sie in unserem Datenschutzhinweis. Ok