Index
A
- Albers projection / Albers projection
- Android emulator
- URL / Emulating mobile devices
- animate
- about / Is there a web standard for animations?
- SVG, SMIL used / Animate SVG using SMIL
- HTML, CSS used / Animating HTML using CSS
- JavaScript used / Animating anything using JavaScript
- animations
- creating, JavaScript used / Creating animations with JavaScript
- timers and intervals in D3 / Timers and intervals in D3
- attributes interpolating, D3 used / Interpolating attributes using D3
- progress over time / Easing – Animation progress over time
- Bézier Curves / Bézier curves
- easing functions, in D3 / Easing functions in D3
- arcs
- drawing / Drawing arcs
- areas
- drawing, between curves / Drawing Areas between curves
- attributes
- interpolating, D3 used / Interpolating attributes using D3
- automated testing
- axes
- URL / Creating Axis
- axis
- creating / Creating Scales and Axis, Creating Axis
- axis zoom / An axis zoom
- Azimuthal Equidistant projection / Azimuthal Equidistant projection
B
- BackstopJS / Semi-automated visual Regression tests
- bar chart
- about / A simple bar chart
- bisectors
- Bootstrap
- about / Bootstrap – a popular mobile first CSS framework
- URL / Bootstrap – a popular mobile first CSS framework, Finding additional resources
- including / Including Bootstrap
- additional resources, finding / Finding additional resources
- grid layouts / Understanding grid layouts
- elements, hiding on different screen resolutions / Hiding elements on different screen resolutions
- Media Queries, using in LESS / Using Bootstrap's Media Queries in LESS
- Bootstrap blog
- Bootstraps Media Queries
- URL / Using Bootstrap's Media Queries in LESS
- about / Using Bootstrap's Media Queries
- in CSS / Media Queries in CSS
- in LESS/SASS / Media Queries in LESS/SASS
- in JavaScript / Media Queries in JavaScript
- grid system, using / Using Bootstrap's grid system
- Bower
- URL / Including Bootstrap
- breakpoint
- about / Understanding Breakpoints
- Browserstack / Remote-debugging responsive applications
- Browsersync
- used, for syncing Real Devices / Syncing Real Devices using Browsersync
- URL / Syncing Real Devices using Browsersync
- Bézier Curves / Bézier curves
- URL / Bézier curves
C
- Cartesian coordinate system / A geographic coordinate system
- cartographic visualizations
- about / Overview of cartographic visualizations
- geographic coordinate system / A geographic coordinate system
- sphere, projecting on flat map / Projecting a sphere on a flat map
- data, displaying on map / Which data can be displayed on a map?, Can we start now?
- Chai assertion library
- choropleth maps / Choropleth maps
- Chrome desktop browser
- Device Modes, changing / Changing Device Modes in a Chrome desktop browser
- mobile devices, enabling / Emulating mobile devices
- Cloud
- tests, running / Running your tests in the cloud
- Codeship / Continuous Integration
- Color Brewer library
- URL / Color scales
- command-line tool
- conditional comments
- reference link / Conditional comments for Internet Explorer
- conditional CSS
- with Media Queries / Conditional CSS with Media Queries
- Content Delivery Network (CDN) / Including Bootstrap
- continuous Integration / Continuous Integration
- continuous integration / Automated testing and Continuous Integration
- cross-browser compatibility issues
- cross-browser Media Queries
- about / Cross-browser Media Queries
- Window.matchMedia() function / Window.matchMedia() and its Polyfill
- min-width, via Respond.js / Min-width and max-width support via Respond.js
- max-width, via Respond.js / Min-width and max-width support via Respond.js
- using, in JavaScript with Enquire.js / Media Queries in JavaScript with Enquire.js
- cross-browser SVG features
- about / Cross-browser SVG features
- animations / SVG animations
- SVG filters, using / Using SVG filters
- elements, clipping / Clipping elements in SVG
- Cross Origin Request error / Loading and parsing remote data
- CSS
- Bootstraps Media Queries / Media Queries in CSS
- Modernizr, using / Using Modernizr in CSS
- CSS3
- CSS3 Selectors
- curves
- drawing / Drawing Lines and Curves
- custom implementations, native features
- about / Custom implementations of native features
- polyfill / Polyfill – implementing missing features
- shims / Shims – intercepting API calls
- wrappers / Wrappers – abstracting APIs
D
- D3
- timers and intervals / Timers and intervals in D3
- timers, URL / Timers and intervals in D3
- interpolations, URL / Interpolating attributes using D3
- easing functions / Easing functions in D3
- documentation, URL / Attribute and style tweens for custom interpolation
- compatibility / Compatibility of D3
- reference link / Compatibility of D3
- touch events / Touch events in D3
- D3 Github page
- D3 Show Reel
- URL / Shape tweens
- D3 Superformula plugin
- URL / Shape tweens
- d3.event
- D3.js
- graphics, creating / Creating graphics with D3.js
- including / Including D3.js
- URL / Finding additional resources
- about / Getting started with D3.js
- DOM elements, selecting / Selecting and manipulating DOM elements
- DOM elements, manipulating / Selecting and manipulating DOM elements
- SVG elements, manipulating / Manipulating SVG elements
- data-driven transformations / Data-driven transformations
- data binding / Data Binding and Dynamic Properties
- dynamic properties / Data Binding and Dynamic Properties
- data join / Data Join – next-level data binding
- Update Pattern, using / Using the update pattern
- identifier, defining for elements / Defining an Identifier for the elements
- shapes, drawing / Drawing shapes with D3
- reduce function / Reduce functions in D3.js
- high-level wrappers / Loading and parsing remote data
- custom events / Custom events in D3.js
- d3.mouse
- d3.touches
- data
- pre-processing / Preprocessing data
- filtering, to remove outliers / Filtering data to remove outliers
- mapping, to access inner properties / Mapping data to access inner properties
- aggregating, to extract valuable information / Aggregate data to extract valuable information
- reduce functions, in D3.js / Reduce functions in D3.js
- grouping / Grouping data
- data join
- data values
- mapping, to pixel range with scales / Mapping data values to a Pixel Range with scales
- Date object
- datetime specifiers
- d attribute
- URL / Drawing Lines and Curves
- debugging
- locally / Testing and debugging locally
- Device Mode
- DOM elements
- selecting / Selecting and manipulating DOM elements
- manipulating / Selecting and manipulating DOM elements
- DX filters
- reference link / Using SVG filters
E
- easing functions
- Enquire.js
- reference link / Media Queries in JavaScript with Enquire.js
- Equirectangular projection / The Equirectangular projections
- ES6 Promises
- URL / Chained transitions
- event.preventDefault() function / Breaking the event execution chain
- event systems
- using / Using an event system
- URL / Custom events in D3.js
- responsive events / Responsive events
- interaction areas / Interaction areas
- interaction targets, creating / Creating interaction targets
- nearest data point, computing / Computing the nearest data point
- touch events / Touch events
- mouse events / Mouse events
G
- Genymotion
- URL / Emulating mobile devices
- Geographic Information Systems (GIS) / Data representation for topology and geographic features
- geographic visualizations
- types / Types of geographic visualization
- syymbol maps / Symbol maps
- choropleth maps / Choropleth maps
- GeoJSON
- about / GeoJSON – a format for geographic features
- types / GeoJSON – a format for geographic features
- URL / GeoJSON – a format for geographic features
- for Web visualizations / TopoJSON – GeoJSON for web visualizations
- to TopoJSON, via Server API / GeoJSON to TopoJSON via the server API
- Github
- URL / Animating anything using JavaScript, Azimuthal Equidistant projection
- reference link / Compatibility of D3
- graphics
- creating, with D3.js / Creating graphics with D3.js
- grid layouts / Understanding grid layouts
H
- Hardware-accelerated Pixel Graphics
- with WebGL / Hardware-accelerated Pixel Graphics with WebGL
- HTML
- animating, CSS used / Animating HTML using CSS
I
- integration tests
- about / Automated tests, Integration tests
- Protractor and Selenium used / Integration testing using Protractor and Selenium
- Internet Explorer
- conditional comments / Conditional comments for Internet Explorer
J
- JavaScript
- Bootstraps Media Queries / Media Queries in JavaScript
- used, for animating / Animating anything using JavaScript, Creating animations with JavaScript
- Modernizr, using / Using Modernizr in JavaScript
- MediaQueries, using with Enquire.js / Media Queries in JavaScript with Enquire.js
- JavaScript resize event
- using / Using the JavaScript resize event
- native resize event / The native resize event
- data resolution, adapting / Adapting the resolution of the data
- conclusion / The conclusion of using resize events
K
- Karma
- used, for running unit tests / Running unit tests using Karma
- Karma test runner
L
- lengths
- in browser / Units and lengths in the browser
- LESS
- LESS/SASS
- Bootstraps Media Queries / Media Queries in LESS/SASS
- LESS compiler
- lines
- drawing / Drawing Lines and Curves
M
- maps
- URL / Maps and projections
- maps creation, tools
- about / Helpful tools for creating maps in D3
- color scales / Color scales
- geographic shape generator / The geographic shape generator
- grids on maps / Graticule – grids on maps
- multiple resources, loading / Loading multiple resources
- matchMedia function
- mathematical expressions / Mathematical expressions
- MDN
- MDP
- URL / Mouse events
- Mike Bostock's page
- Mocha test framework
- Modernizr
- used, for detecting native features / Detecting native features with Modernizr
- reference link / Detecting native features with Modernizr, Using Modernizr in JavaScript
- using, in JavaScript / Using Modernizr in JavaScript
- using, in CSS / Using Modernizr in CSS
- mouse events
- about / Mouse events, Mouse and touch events
- handling / Handle touch and mouse events with ease
- mouseenter / Mouse and touch events
- mouseover / Mouse and touch events
- mousemove / Mouse and touch events
- mousedown / Mouse and touch events
- mouseup / Mouse and touch events
- click / Mouse and touch events
- mouseleave / Mouse and touch events
- event execution chain, breaking / Breaking the event execution chain
N
- nearest data point
- computing / Computing the nearest data point
- numeric values
- parsing / Parsing and formatting numeric values
- formatting / Parsing and formatting numeric values
O
- orthographic projection / Orthographic projection
- own Vector Markup Language (VML) / Polyfill – implementing missing features
P
- panning
- about / Panning and zooming
- path motion
- reference link / SVG animations
- PhantomJS / Unit tests
- pointer events
- about / Pointer events – combining mouse, touch and pen
- used, for combining mouse and touch / Pointer events – combining mouse, touch and pen
- used, for combining mouse and pen / Pointer events – combining mouse, touch and pen
- reference links / Pointer events – combining mouse, touch and pen
- disabling, for elements / Disabling pointer events for elements
- polyfill
- about / Polyfill – implementing missing features
- missing features, implementing / Polyfill – implementing missing features
- reference link / Polyfill – implementing missing features
- preventDefault
- reference link / Breaking the event execution chain
- projections
- about / Maps and projections
- Equirectangular projection / The Equirectangular projections
- orthographic projection / Orthographic projection
- Albers projection / Albers projection
- spherical Mercator projection / Spherical Mercator projection
- Azimuthal Equidistant projection / Azimuthal Equidistant projection
- Protractor
Q
- Queue.js
R
- Raster/Pixel Graphics
- with canvas / Raster/Pixel graphics with Canvas
- Real Devices
- syncing, Browsersync used / Syncing Real Devices using Browsersync
- Regular Expressions
- in JavaScript, URL / Splitting strings using Regular Expressions
- relative lengths
- using, in SVG / Using relative lengths in SVG
- conclusion / Conclusion about using relative lengths
- remote data
- loading / Loading and parsing remote data
- parsing / Loading and parsing remote data
- any string data, parsing / Parsing any string data
- strings splitting, Regular Expressions used / Splitting strings using Regular Expressions
- dates, parsing from strings / Parsing dates from strings
- numeric values, parsing / Parsing and formatting numeric values
- numeric values, formatting / Parsing and formatting numeric values
- require.js
- Respond.js
- min-width support via / Min-width and max-width support via Respond.js
- max-width support via / Min-width and max-width support via Respond.js
- reference link / Min-width and max-width support via Respond.js
- responsive applications
- remote debugging / Remote-debugging responsive applications
- responsive charts
- about / Responsive charts
- relative lengths, using in SVG / Using relative lengths in SVG
- relative lengths, conclusion / Conclusion about using relative lengths
- viewport, scaling / Scaling the viewport
- JavaScript resize event, using / Using the JavaScript resize event
- Responsive Design
- about / What is Responsive Design?
- conditional CSS, with Media Queries / Conditional CSS with Media Queries
- breakpoints / Understanding Breakpoints
- viewport / Having the right viewport
- %, REM and EM / Relative Units – %, REM, and EM
- Mobile Devices, designing / Designing for mobile devices first
- responsive events / Responsive events
- rrappers
- about / Wrappers – abstracting APIs
S
- SASS format
- SASS precompiler
- Sauce Labs
- scales
- creating / Creating Scales and Axis
- data values, mapping to pixel range / Mapping data values to a Pixel Range with scales
- linear scales, for linear mappings / Linear Scales for linear Mappings
- ordinal scale, for mapping non-numeric data / Ordinal scale for Mapping non-numeric data
- time scales, for mapping time-series data / Time scales for Mapping time series data
- selections
- semi-automated tests / Semi-automated tests
- shapes, drawing
- about / Drawing shapes with D3
- lines and curves, drawing / Drawing Lines and Curves
- areas, drawing between curves / Drawing Areas between curves
- arcs, drawing / Drawing arcs
- shape tweens
- about / Shape tweens
- shims
- API calls, intercepting / Shims – intercepting API calls
- about / Shims – intercepting API calls
- SMIL Animations
- URL / Animate SVG using SMIL
- solutions, to cross-browser compatibility issues
- conditional comments, for Internet Explorer / Conditional comments for Internet Explorer
- native features, detecting with Modernizr / Detecting native features with Modernizr
- native features, custom implementations / Custom implementations of native features
- D3 compatibility / Compatibility of D3
- sphere
- projecting, on flat map / Projecting a sphere on a flat map
- spherical Mercator projection / Spherical Mercator projection
- stopImmediatePropagation
- reference link / Breaking the event execution chain
- stopPropagation
- reference link / Breaking the event execution chain
- SVG
- Vector Graphics with / Vector graphics with SVG
- animating, Synchronized Multimedia Integration Language(SMIL) used / Animate SVG using SMIL
- clipping elements / Clipping elements in SVG
- SVG animations
- about / SVG animations
- reference link / SVG animations
- SVG elements
- manipulating / Manipulating SVG elements
- data-driven transformations / Data-driven transformations
- Data Binding and Dynamic Properties / Data Binding and Dynamic Properties
- SVG filters
- using / Using SVG filters
- SVG shape abstractions
- URL / Drawing shapes with D3
- symbol maps / Symbol maps
- Synchronized Multimedia Integration Language(SMIL)
- used, for animating SVG / Animate SVG using SMIL
- system tests
- about / Automated tests
T
- Test-driven development (TDD) / Test-driven development (TDD)
- testing
- about / A guide on testing visualizations
- visualizations / A guide on testing visualizations
- need for / Why should I care about testing?
- types / The different types of test
- manual tests / Manual tests
- automated tests / Automated tests
- semi-automated tests / Semi-automated tests
- unit tests / Unit tests
- integration tests / Integration tests
- continuous Integration / Continuous Integration
- manual testing / Manual testing and debugging
- and debugging / Testing and debugging locally
- automated testing / Automated testing and Continuous Integration
- on local machine / Running tests on your local machine
- unit tests running, Karma used / Running unit tests using Karma
- integration testing, Protractor and Selenium used / Integration testing using Protractor and Selenium
- in Cloud, running / Running your tests in the cloud
- strategy, for visualizations / A testing strategy for visualizations
- TopoJSON
- about / TopoJSON – GeoJSON for web visualizations
- URL / TopoJSON – GeoJSON for web visualizations, TopoJSON to GeoJSON via the Client API, Symbol maps
- via Server API / GeoJSON to TopoJSON via the server API
- to GeoJSON, via Client API / TopoJSON to GeoJSON via the Client API
- touch devices
- detecting / A note on detecting Touch Devices
- touch events
- about / Touch events, Mouse and touch events
- handling / Handle touch and mouse events with ease
- touchstart / Mouse and touch events
- touchmove / Mouse and touch events
- event execution chain, breaking / Breaking the event execution chain
- in D3 / Touch events in D3
- hover state / A hover state for touch
- transitions
- about / Transitions
- path transitions / Path transitions made easy
- attribute and style tweens, for custom interpolation / Attribute and style tweens for custom interpolation
- chained / Chained transitions
- TravisCI / Continuous Integration
U
- units
- in browser / Units and lengths in the browser
- for absolute lengths / Units for absolute lengths
- for relative lengths / Units for relative lengths
- for resolution / Units for resolution
- mathematical expressions / Mathematical expressions
- unit tests
- about / Automated tests, Unit tests
- Update Pattern
- using / Using the update pattern
- URL / Using the update pattern
V
- Vector Graphics
- in browser, with SVG / Vector graphics in the browser with SVG
- Raster/Pixel Graphics, with Canvas / Raster/Pixel graphics with Canvas
- hardware-accelerated Pixel Graphics, with WebGL / Hardware-accelerated Pixel Graphics with WebGL
- with SVG / Vector graphics with SVG
- viewport
- about / Having the right viewport
- viewport, scaling
- about / Scaling the viewport
- strokes, preventing from scaling / Prevent Strokes from Scaling
- Aspect Ratio, preserving / Preserving the Aspect Ratio
- conclusion / The conclusion of using Viewport scaling
- visualizations
- testing strategy / A testing strategy for visualizations
- Visual Regression Testing / Semi-automated tests
- visual Regression tests
- semi-automated / Semi-automated visual Regression tests
W
- W3C
- URL / Animate SVG using SMIL
- WebSockets / Syncing Real Devices using Browsersync
- window.matchMedia() function
- about / Window.matchMedia() and its Polyfill
- polyfill / Window.matchMedia() and its Polyfill
- wrappers
- APIs, abstracting / Wrappers – abstracting APIs
X
- XMLHttpRequest (XHR) object / Loading and parsing remote data
Z
- zooming
- about / Panning and zooming
- sample zoom / A simple zoom
- axis zoom / An axis zoom
- URL / An axis zoom