JavaScript and jQuery for Data Analysis and Visualization

Jon Raasch is a freelance web developer and author of several books. A user-experience junkie, he builds HTML5 and JavaScript apps for desktop and mobile devices. Graham Murray is a software architect specializing in building UI development tools. Vadim Ogievetsky is a data flow processor at Metamarkets, where he works with data visualization framework development. Joseph Lowery is a professional web designer and online trainer with courses on website and app creation as well as data visualization at Lynda.com. Wrox guides are crafted to make learning programming languages and technologies easier than you think. Written by programmers for programmers, they provide a structured, tutorial format that will guide you through all the techniques involved.

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 RAPHAEL 203 Introducing Raphael 204 SVG Versus Canvas Charts 204 Getting Started with Raphael 204 Drawing Paths 205 Importing Custom Shapes into Raphael 206 Animating Raphael Graphics 208 Handling Mouse Events with Raphael 208 Working with gRaphael 209 Creating Pie Charts 209 Creating Line Charts 211 Creating Bar and Column Charts 213 Extending Raphael 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