Spis treści: „Data Visualization with JavaScript”

Spis treści publikacji pt. „Data Visualization with JavaScript”.

Tytuł: „Data Visualization with JavaScript”
Autor: Stephen A.Thomas
Wydawca: No Starch Press
Data wydania: 2015-07-01
Język: Angielski
Liczba stron: 381

Spis treści

Spis treści / Table of contents

SKRÓTOWY SPIS TREŚCI: Brief Contents

Acknowledgments / XVI

Introduction / 1

Chapter 1: Graphing Data / 5

Chapter 2: Making Charts Interactive / 47

Chapter 3: Integrating Charts on a Page / 89

Chapter 4: Creating Specialized Graphs / 119

Chapter 5: Displaying Timelines / 147

Chapter 6: Visualizing Geographic Data / 179

Chapter 7: Custom Visualizations with D3.js / 223

Chapter 8: Managing Data in the Browser / 269

Chapter 9: Building Data-Driven Web Applications: Part 1 / 295

Chapter 10: Building Data-Driven Web Applications: Part 2 / 327

Index / 353

DOKŁADNY SPIS TREŚCI:

Contents in Detail

Acknowledgments / xvi

Introduction / 1

The Book’s Philosophy / 2

The Book’s Contents / 3

Source Code for Examples / 4

Chapter 1: Graphing Data / 5

Creating a Basic Bar Chart / 6

Step 1: Include the Required JavaScript / 6

Step 2: Set Aside a <div> Element to Hold the Chart / 7

Step 3: Define the Data / 7

Step 4: Draw the Chart / 8

Step 5: Fix the Vertical Axis / 9

Step 6: Fix the Horizontal Axis / 10

Step 7: Adjust the Styling / 12

Step 8: Vary the Bar Color / 13

Step 9: Work Around Flotr2 “Bugs”/ 14

Plotting Continuous Data with a Line Chart / 15

Step 1: Define the Data / 15

Step 2: Graph the CO2 Data / 16

Step 3: Add the Temperature Data / 17

Step 4: Improve the Chart’s Readability / 17

Step 5: Clarify the Temperature Measurements / 18

Step 6: Label the Chart / 20

Step 7: Work Around Flotr2 “Bugs” / 21

Emphasizing Fractions Using a Pie Chart / 21

Step 1: Define the Data / 23

Step 2: Draw the Chart / 23

Step 3: Label the Values / 24

Step 4: Work Around Flotr2 “Bugs” / 25

Plotting X/Y Data with a Scatter Chart / 25

Step 1: Define the Data / 26

Step 2: Format the Data / 26

Step 3: Plot the Data / 26

Step 4: Adjust the Chart’s Axes / 27

Step 5: Label the Data / 28

Step 6: Clarify the X-Axis / 29

Step 7: Answer Users’ Questions / 30

Step 8: Work Around Flotr2 “Bugs” / 33

Adding Magnitudes to X/Y Data with a Bubble Chart / 34

Step 1: Define the Data / 34

Step 2: Create a Background for the Chart / 35

Step 3: Plot the Data / 36

Step 4: Add the Background / 37

Step 5: Color the Bubbles / 38

Step 6: Adjust the Legend Styles / 40

Step 7: Work Around Flotr2 “Bugs” / 41

Displaying Multidimensional Data with a Radar Chart / 41

Step 1: Define the Data / 42

Step 2: Create the Chart / 44

Step 3: Work Around Flotr2 “Bugs” / 45

Summing Up / 46

Chapter 2: Making Charts Interactive / 47

Selecting Chart Content / 48

Step 1: Include the Required JavaScript Libraries / 49

Step 2: Set Aside a <div> Element to Hold the Chart / 50

Step 3: Prepare the Data / 50

Step 4: Draw the Chart / 51

Step 5: Add the Controls / 52

Step 6: Define the Data Structure for the Interaction / 54

Step 7: Determine Chart Data Based on the Interaction State / 55

Step 8: Add the Controls Using JavaScript / 57

Step 9: Respond to the Interaction Control/ 58

Zooming In on Charts / 59

Step 1: Prepare the Page / 60

Step 2: Draw the Chart / 60

Step 3: Prepare the Data to Support Interaction / 61

Step 4: Prepare to Accept Interaction Events / 62

Step 5: Enable the Interaction / 63

Tracking Data Values / 65

Step 1: Set Aside a <div> Element to Hold the Charts / 66

Step 2: Prepare the Data / 67

Step 3: Draw the Charts / 68

Step 4: Implement the Interaction / 71

Retrieving Data Using AJAX / 75

Step 1: Understand the Source Data / 76

Step 2: Get the First Level of Data via AJAX / 77

Step 3: Process the First Level of Data / 80

Step 4: Get the Real Data / 81

Step 5: Process the Data / 84

Step 6: Create the Chart / 85

Summing Up / 88

Chapter 3: Integrating Charts on a Page / 89

Creating a Classic Sparkline / 91

Step 1: Include the Required JavaScript Libraries / 91

Step 2: Create the HTML Markup for the Sparkline / 91

Step 3: Draw the Sparkline / 92

Step 4: Adjust the Chart Style / 93

Charting Many Variables / 94

Step 1: Prepare the HTML Markup / 94

Step 2: Draw the Charts / 95

Step 3: Establish a Default Style for the Charts / 96

Step 4: Modify the Default Style for Special Classes / 97

Step 5: Create a Unique Style for a Specific Chart / 99

Annotating Sparklines / 101

Step 1: Prepare the Data / 102

Step 2: Prepare the HTML Markup / 102

Step 3: Add the Chart / 102

Step 4: Add the Primary Annotation / 103

Step 5: Provide Additional Information / 105

Drawing Composite Charts / 105

Step 1: Draw the Trading Volume Chart / 106

Step 2: Add the Closing Price Chart / 106

Step 3: Add the Annotations / 107

Step 4: Show Details as a Chart / 108

Responding to Click Events / 110

Step 1: Add the Chart / 110

Step 2: Handle Click Events / 111

Step 3: Improve the Transitions / 112

Step 4: Animate / 114

Updating Charts in Real Time / 115

Step 1: Retrieve the Data / 116

Step 2: Update the Visualization / 116

Summing Up / 117

Chapter 4: Creating Specialized Graphs / 119

Visualizing Hierarchies with Tree Maps / 120

Step 1: Include the Required Libraries / 120

Step 2: Prepare the Data / 121

Step 3: Draw the Tree Map / 121

Step 4: Vary the Shading to Show Additional Data / 122

Highlighting Regions with a Heat Map / 125

Step 1: Include the Required JavaScript / 126

Step 2: Define the Visualization Data / 127

Step 3: Create the Background Image / 127

Step 4: Set Aside an HTML Element to Contain the Visualization / 128

Step 5: Format the Data / 128

Step 6: Draw the Map / 129

Step 7: Adjust the Heat Map z-index / 130

Showing Relationships with Network Graphs / 130

Step 1: Include the Required Libraries / 130

Step 2: Prepare the Data / 131

Step 3: Define the Graph’s Nodes / 132

Step 4: Connect the Nodes with Edges / 133

Step 5: Automate the Layout / 134

Step 6: Add Interactivity / 137

Revealing Language Patterns with Word Clouds / 138

Step 1: Include the Required Libraries / 139

Step 2: Prepare the Data / 140

Step 3: Add the Required Markup / 141

Step 4: Create a Simple Cloud / 142

Step 5: Add Interactivity / 143

Summing Up / 146

Chapter 5: Displaying Timelines / 147

Building Timelines with a Library / 148

Step 1: Include the Required Libraries / 148

Step 2: Prepare the Data / 149

Step 3: Draw the Timeline / 150

Step 4: Set Chronoline.js Options for the Data / 150

Building Timelines with JavaScript / 153

Step 1: Prepare the HTML Skeleton / 154

Step 2: Start JavaScript Execution / 154

Step 3: Create the Timeline in Semantic HTML / 155

Step 4: Include the Supporting Content / 157

Step 5: Optionally Take Advantage of jQuery / 159

Step 6: Fix Timeline Problems with CSS / 159

Step 7: Add Styles to Visually Structure the Timeline / 161

Step 8: Add Interactivity / 163

Using a Web Component / 167

Step 1: Preview the Standard Component / 168

Step 2: Include the Required Components / 170

Step 3: Prepare the Data / 170

Step 4: Create a Default Timeline / 172

Step 5: Adjust the Timeline Styles / 174

Summing Up / 177

Chapter 6: Visualizing Geographic Data / 179

Using Map Fonts / 180

Step 1: Include the Fonts in the Page / 180

Step 2: Display One Country / 181

Step 3: Combine Multiple Countries into a Single Map / 182

Step 4: Vary the Countries Based on the Data / 183

Step 5: Add a Legend / 185

Working with Scalable Vector Graphics / 186

Step 1: Create the SVG Map / 188

Step 2: Embed the Map in the Page / 189

Step 3: Collect the Data / 190

Step 4: Define the Color Scheme / 191

Step 5: Color the Map / 192

Step 6: Add a Legend / 193

Step 7: Add Interactions / 194

Including Maps for Context / 197

Step 1: Set Up the Web Page / 198

Step 2: Prepare the Data / 198

Step 3: Choose a Map Style / 199

Step 4: Draw the Map / 199

Step 5: Add the Sightings / 200

Integrating a Full-Featured Mapping Library / 201

Step 1: Prepare the Data / 201

Step 2: Set Up the Web Page and Libraries / 202

Step 3: Draw the Base Map / 203

Step 4: Add the Routes to the Map / 205

Step 5: Add an Animation Control / 207

Step 6: Prepare the Animation / 210

Step 7: Animate the Routes / 211

Step 8: Create Labels for the Stops / 214

Step 9: Build the Label Animation / 216

Step 10: Incorporate Label Animation in the Animation Step / 218

Step 11: Add a Title / 221

Summing Up / 222

Chapter 7: Custom Visualizations with D3.js / 223

Adapting a Traditional Chart Type / 224

Step 1: Prepare the Data / 225

Step 2: Set Up the Web Page / 225

Step 3: Create a Stage for the Visualization / 226

Step 4: Control the Chart’s Dimensions / 227

Step 5: Draw the Chart Framework / 228

Step 6: Add the Data to the Chart / 231

Step 7: Answer Users’ Questions / 232

Creating a Force-Directed Network Graph / 232

Step 1: Prepare the Data / 233

Step 2: Set Up the Page / 234

Step 3: Create a Stage for the Visualization / 235

Step 4: Draw the Graph’s Nodes / 235

Step 5: Draw the Graph’s Edges / 238

Step 6: Position the Elements / 238

Step 7: Add Force Direction to the Graph / 240

Step 8: Add Interactivity / 242

Step 9: Experiment with Other Enhancements / 245

Creating a Scalable Map / 245

Step 1: Prepare the Data / 245

Step 2: Set Up the Page / 246

Step 3: Create a Map Projection / 246

Step 4: Initialize the SVG Container / 247

Step 5: Retrieve the Map Data / 247

Step 6: Draw the Map / 248

Step 7: Retrieve the Weather Data / 249

Step 8: Plot the Data / 249

Step 9: Add Interactivity / 250

Creating a Unique Visualization / 252

Step 1: Prepare the Data / 253

Step 2: Set Up the Page / 253

Step 3: Create a Stage for the Visualization / 254

Step 4: Create Scales / 254

Step 5: Retrieve the Data / 256

Step 6: Draw the Visualization / 258

Step 7: Color the Areas / 259

Step 8: Make the Visualization Interactive / 262

Summing Up / 267

Chapter 8: Managing Data in the Browser / 269

Using Functional Programming / 270

Step 1: Start with an Imperative Version / 271

Step 2: Debug the Imperative Code / 271

Step 3: Understand the Problems Imperative Programming May Introduce / 272

Step 4: Rewrite Using Functional Programming Style / 273

Step 5: Evaluate Performance / 273

Step 6: Fix the Performance Problem / 274

Working with Arrays / 275

Extracting Elements by Position / 275

Combining Arrays / 278

Removing Invalid Data Values / 280

Finding Elements in an Array / 281

Generating Arrays / 282

Enhancing Objects / 283

Working with Keys and Values / 283

Cleaning Up Object Subsets / 285

Updating Attributes / 286

Manipulating Collections / 288

Working with Iteration Utilities / 289

Finding Elements in a Collection / 290

Testing a Collection / 292

Rearranging Collections / 292

Summing Up / 294

Chapter 9: Building Data-Driven Web Applications: Part 1 / 295

Frameworks and Libraries / 297

Step 1: Select an Application Library / 297

Step 2: Install Development Tools / 298

Step 3: Define a New Project / 298

Step 4: Add Our Unique Dependencies / 301

Models and Views/ 302

Step 1: Define the Application’s Models / 303

Step 2: Implement the Model / 304

Step 3: Define the Application’s Collections / 306

Step 4: Define the Application’s Main View / 307

Step 5: Define the Main View Templates / 11

Step 6: Refine the Main View / 314

Views for Visualizations / 316

Step 1: Define the Additional Views / 317

Step 2: Implement the Details View / 317

Step 3: Implement the Properties View / 18

Step 4: Implement the Map View / 322

Step 5: Implement the Charts View / 325

Summing Up / 326

Chapter 10: Building Data-Driven Web Applications: Part 2 / 327

Connecting with the Nike+ Service / 328

Step 1: Authorize Users / 328

Step 2: Accept the Nike+ Response / 330

Step 3: Page the Collection / 330

Step 4: Dynamically Update the View / 334

Step 5: Filter the Collection / 335

Step 6: Parse the Response / 336

Step 7: Retrieve Details / 336

Putting It All Together / 340

Step 1: Create a Backbone.js Router / 340

Step 2: Support Run Models Outside of Any Collection / 342

Step 3: Let Users Change Views / 345

Step 4: Fine-Tune the Application / 349

Summing Up / 351

Index / 353

Kreatywne pozdrowienia,

Informacje o artykule