JavaScript and jQuery for Data Analysis and Visualization

INTRODUCTION xix
PART I: THE BEAUTY OF NUMBERS MADE VISIBLE
CHAPTER 1: THE WORLD OF DATA VISUALIZATION 3
Bringing Numbers to Life 4
Acquiring the Data 4
Visualizing the Data 4
Simultaneous Acquisition and Visualization 6
Applications of Data Visualization 7
Uses in the Public Sector 7
Business-to-Business and Intrabusiness Uses 8
Business-to-Consumer Uses 8
Web Professionals: In the Thick of It 9
Control of Presentation 9
What Tech Brings to the Table 11
Faster and Better JavaScript Processing 12
Rise of HTML5 12
Lowering the Implementation Bar 13
Summary 14
CHAPTER 2: WORKING WITH THE ESSENTIALS OF ANALYSIS 17
Key Analytic Concepts 18
Mean Versus Median 18
Standard Deviation 19
Working with Sampled Data 20
Standard Deviation Variation 20
Per Capita Calculations 21
Margin of Error 21
Detecting Patterns with Data Mining 22
Projecting Future Trends 23
Summary 25
CHAPTER 3: BUILDING A VISUALIZATION FOUNDATION 27
Exploring the Visual Data Spectrum 28
Charting Primitives 28
Exploring Advanced Visualizations 40
Candlestick Chart 42
Bubble Chart 42
Surface Charts 44
Map Charts 46
Infographics 46
Making Use of the HTML5 Canvas 49
Integrating SVG 52
Summary 54
PART II: WORKING WITH JAVASCRIPT FOR ANALYSIS
CHAPTER 4: INTEGRATING EXISTING DATA 57
Reading Data from Standard Text Files 58
Working Asynchronously 58
Reading CSV Files 59
Incorporating XML Data 61
Understanding the XML Format 61
Getting XML Data 62
Styling with XSLT 63
Displaying JSON Content 66
Understanding JSON Syntax 66
Reading JSON Data 67
Asynchronous JSON 68
Summary 71
CHAPTER 5: ACQUIRING DATA INTERACTIVELY 73
Using HTML5 Form Controls 73
Introducing HTML5 Input Types 74
Form Widgets and Data Formatting 74
Maximizing Mobile Forms 75
Using Contextual Keyboards 76
Styling Mobile Forms for Usability 77
Form Widgets for Mobile 77
Summary 77
CHAPTER 6: VALIDATING YOUR DATA 79
Server-Side Versus Client-Side Validation 80
Native HTML5 Validation 81
Native Versus JavaScript Validation 81
Getting Started with HTML5 Validation 82
HTML5 Validation for Numbers 82
Required Fields and Max Length 82
Custom HTML5 Validation Rules 83
Custom HTML5 Validation Messages 83
h5Validate Polyfi ll 84
jQuery Validation Engine 85
Getting Started with jQuery Validation Engine 85
Validators 86
Error Messages 90
Summary 91
CHAPTER 7: EXAMINING AND SORTING DATA TABLES 93
Outputting Basic Table Data 94
Building a Table 94
Using Semantic Table Markup 96
Labeling Your Table 101
Configuring the Columns 102
Assuring Maximum Readability 105
Styling Your Table 106
Increasing Readability 108
Adding Dynamic Highlighting 114
Including Computations 116
Using JavaScript for Calculations 120
Populating the Table 123
Using the DataTables Library 125
Making Pretty Tables with DataTables 126
Sorting with DataTables 128
Using Calculated Columns with DataTables 130
Relating a Data Table to a Chart 133
Mashing Visualizations Together 133
Summary 144
CHAPTER 8: STATISTICAL ANALYSIS ON THE CLIENT SIDE 145
Statistical Analysis with jStat 146
Getting Started with jStat 146
Stat 101 147
Rendering Probability Distributions with Flot 149
Getting Started with Flot 149
Rendering the Normal Curve 151
Summary 153
PART III: VISUALIZING DATA PROGRAMMATICALLY
CHAPTER 9: EXPLORING CHARTING TOOLS 157
Creating HTML5 Canvas Charts 158
HTML5 Canvas Basics 158
Linear Interpolation 159
A Simple Column Chart 160
Implementing Axes 176
Adding Animation 183
Starting with Google Charts 194
Google Charts API Basics 195
A Basic Bar Chart 195
A Basic Pie Chart 197
Working with Chart Animations 198
Summary 201
CHAPTER 10: BUILDING CUSTOM CHARTS WITH RAPHAËL 203
Introducing Raphaël 204
SVG Versus Canvas Charts 204
Getting Started with Raphaël 204
Drawing Paths 205
Importing Custom Shapes into Raphaël 206
Animating Raphaël Graphics 208
Handling Mouse Events with Raphaël 208
Working with gRaphaël 209
Creating Pie Charts 209
Creating Line Charts 211
Creating Bar and Column Charts 213
Extending Raphaël to Create Custom Charts 216
Setting Up with Common Patterns 216
Drawing an Arc 217
Massaging Data into Usable Values 221
Adding Mouse Interactivity 225
Labeling the Data 227
Wrapping Up 229
Summary 232
CHAPTER 11: INTRODUCING D3 233
Getting Started 235
DOM and SVG 236
.select 237
.selectAll 238
.data() (Also Known As Data Joining) 239
Key Functions 249
.transition() 250
Object Constancy 253
Nested Selections 255
D3 Helper Functions 257
Drawing Lines 257
Scales 258
D3 Helper Layouts 260
Summary 264
CHAPTER 12: INCORPORATING SYMBOLS 265
Working with SVG Symbols with D3 266
Creating a D3 Line Chart 266
Adding Symbols to the Line 271
Making the Symbols Interactive 273
Canvas Symbols with Ignite UI igDataChart 276
Creating a Line Chart with Ignite UI igDataChart 277
Adding Symbols to the Chart 281
Creating a Bubble Chart 284
Summary 289
CHAPTER 13: MAPPING GLOBAL, REGIONAL, AND LOCAL DATA 291
Working with Google Maps 292
The Basics of Mapping Visualizations 292
The Google Maps API v3 294
Customizing Maps with Iconography 297
Displaying a Map Marker 297
Preparing Data to Plot on a Map 299
Plotting Point Data Using Markers 303
Plotting an Additional Statistic Using Marker Area 307
Displaying Data Density with Heat Maps 310
Plotting Data on Choropleth Maps 314
Obtaining Geometry to Plot on a Map 314
Converting Geometry for Display Using Topojson 315
Rendering Map Geometry Using D3 316
Displaying Statistics Using a Choropleth Map 319
Summary 326
CHAPTER 14: CHARTING TIME SERIES WITH IGNITE UI IGDATACHART 327
Working with Stocks 328
The Basics of Stock Data 328
Obtaining Some Stock Data 329
Candlesticks and OHLC Visualizations 329
Implementing Ignite UI igDataChart 331
Obtaining Ignite UI 332
Implementing a Stock Chart Using igDataChart 333
Adding a Zoom Bar to the Chart 342
Adding a Synchronized Chart 344
Working with Technical Analysis Tools 347
Plotting Real-Time Data 348
Creating a Node Push Data Service 349
Receiving Updates in the Client 353
Exploring Update Rendering Techniques 359
Plotting Massive Data 361
Summary 366
PART IV: INTERACTIVE ANALYSIS AND VISUALIZATION PROJECTS
CHAPTER 15: BUILDING AN INTERCONNECTED DASHBOARD 371
The U.S. Census API 372
Rendering Charts 373
Sex Chart 373
Race Chart 375
Household Size Chart 377
Household Tenure Chart 378
Age by Sex Chart 379
Population History Chart 384
Creating the Dashboard 386
Basic Markup and Styling 386
Responsive Layer 389
Connecting Components with Backbone 390
Establishing Models and Collections 391
Converting the Chart Markup to a JavaScript Template 392
Creating the State Drop-down Menu 394
Rendering State Changes 396
Next Steps 410
Rerendering on Resize 411
Other Improvements 411
Summary 411
CHAPTER 16: D3 IN PRACTICE 413
Making D3 Look Perfect 414
Inline Styles Versus CSS 414
Margin 414
Ordering 415
Pointer Events 416
Crisp Edges 416
Working with Axes 417
Working with the Voronoi Map 421
A Basic Voronoi Map 421
Voronoi Point Picking 424
Making Reusable Visualizations 427
Summary 434
INDEX 435