JavaScript and jQuery for Data Analysis and Visualization

 JavaScript and jQuery for Data Analysis and Visualization
Jon Raasch, Graham Murray, Vadim Ogievetsky, Joseph Lowery
ISBN: 978-1-118-84706-0
480 pages
Wiley, January 2015
JavaScript and jQuery for Data Analysis and Visualization (1118847067) cover image
Description
Go beyond design concepts—build dynamic data visualizations using JavaScriptJavaScript and jQuery for Data Analysis and Visualization goes beyond design concepts to show readers how to build dynamic, best-of-breed visualizations using JavaScript—the most popular language for web programming.The authors show data analysts, developers, and web designers how they can put the power and flexibility of modern JavaScript libraries to work to analyze data and then present it using best-of-breed visualizations. They also demonstrate the use of each technique with real-world use cases, showing how to apply the appropriate JavaScript and jQuery libraries to achieve the desired visualization.

All of the key techniques and tools are explained in this full-color, step-by-step guide. The companion website includes all sample codes used to generate the visualizations in the book, data sets, and links to the libraries and other resources covered.

  • Go beyond basic design concepts and get a firm grasp of visualization approaches and techniques using JavaScript and jQuery
  • Discover detailed, step-by-step directions for building specific types of data visualizations in this full-color guide
  • Learn more about the core JavaScript and jQuery libraries that enable analysis and visualization
  • Find compelling stories in complex data, and create amazing visualizations cost-effectively

Let JavaScript and jQuery for Data Analysis and Visualization be the resource that guides you through the myriad strategies and solutions for combining analysis and visualization with stunning results.

Table of Contents

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

Author Information

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.

You may also like...