Data Visualization with JavaScript

Book description

You've got data to communicate. But what kind of visualization do you choose, how do you build it, and how do you ensure that it's up to the demands of the Web?

In Data Visualization with JavaScript, you'll learn how to use JavaScript, HTML, and CSS to build the most practical visualizations for your data. Step-by-step examples walk you through creating, integrating, and debugging different types of visualizations and will have you building basic visualizations, like bar, line, and scatter graphs, in no time.

Then you'll move on to more advanced topics, including how to:

  • Create tree maps, heat maps, network graphs, word clouds, and timelines
  • Map geographic data, and build sparklines and composite charts
  • Add interactivity and retrieve data with AJAX
  • Manage data in the browser and build data-driven web applications
  • Harness the power of the Flotr2, Flot, Chronoline.js, D3.js, Underscore.js, and Backbone.js libraries

If you already know your way around building a web page but aren't quite sure how to build a good visualization, Data Visualization with JavaScript will help you get your feet wet without throwing you into the deep end. Before you know it, you'll be well on your way to creating simple, powerful data visualizations.

Publisher resources

View/Submit Errata

Table of contents

  1. Copyright
  2. About the Author
  3. About the Technical Reviewer
  4. Acknowledgments
  5. Introduction
    1. The Book’s Philosophy
    2. The Book’s Contents
    3. Source Code for Examples
  6. 1. Graphing Data
    1. Creating a Basic Bar Chart
      1. Step 1: Include the Required JavaScript
      2. Step 2: Set Aside a <div> Element to Hold the Chart
      3. Step 3: Define the Data
      4. Step 4: Draw the Chart
      5. Step 5: Fix the Vertical Axis
      6. Step 6: Fix the Horizontal Axis
      7. Step 7: Adjust the Styling
      8. Step 8: Vary the Bar Color
      9. Step 9: Work Around Flotr2 “Bugs”
    2. Plotting Continuous Data with a Line Chart
      1. Step 1: Define the Data
      2. Step 2: Graph the CO2 Data
      3. Step 3: Add the Temperature Data
      4. Step 4: Improve the Chart’s Readability
      5. Step 5: Clarify the Temperature Measurements
      6. Step 6: Label the Chart
      7. Step 7: Work Around Flotr2 “Bugs”
    3. Emphasizing Fractions Using a Pie Chart
      1. Step 1: Define the Data
      2. Step 2: Draw the Chart
      3. Step 3: Label the Values
      4. Step 4: Work Around Flotr2 “Bugs”
    4. Plotting X/Y Data with a Scatter Chart
      1. Step 1: Define the Data
      2. Step 2: Format the Data
      3. Step 3: Plot the Data
      4. Step 4: Adjust the Chart’s Axes
      5. Step 5: Label the Data
      6. Step 6: Clarify the X-Axis
      7. Step 7: Answer Users’ Questions
      8. Step 8: Work Around Flotr2 “Bugs”
    5. Adding Magnitudes to X/Y Data with a Bubble Chart
      1. Step 1: Define the Data
      2. Step 2: Create a Background for the Chart
      3. Step 3: Plot the Data
      4. Step 4: Add the Background
      5. Step 5: Color the Bubbles
      6. Step 6: Adjust the Legend Styles
      7. Step 7: Work Around Flotr2 “Bugs”
    6. Displaying Multidimensional Data with a Radar Chart
      1. Step 1: Define the Data
      2. Step 2: Create the Chart
      3. Step 3: Work Around Flotr2 “Bugs”
    7. Summing Up
  7. 2. Making Charts Interactive
    1. Selecting Chart Content
      1. Step 1: Include the Required JavaScript Libraries
      2. Step 2: Set Aside a <div> Element to Hold the Chart
      3. Step 3: Prepare the Data
      4. Step 4: Draw the Chart
      5. Step 5: Add the Controls
      6. Step 6: Define the Data Structure for the Interaction
      7. Step 7: Determine Chart Data Based on the Interaction State
      8. Step 8: Add the Controls Using JavaScript
      9. Step 9: Respond to the Interaction Controls
    2. Zooming In on Charts
      1. Step 1: Prepare the Page
      2. Step 2: Draw the Chart
      3. Step 3: Prepare the Data to Support Interaction
      4. Step 4: Prepare to Accept Interaction Events
      5. Step 5: Enable the Interaction
    3. Tracking Data Values
      1. Step 1: Set Aside a <div> Element to Hold the Charts
      2. Step 2: Prepare the Data
      3. Step 3: Draw the Charts
      4. Step 4: Implement the Interaction
    4. Retrieving Data Using AJAX
      1. Step 1: Understand the Source Data
      2. Step 2: Get the First Level of Data via AJAX
      3. Step 3: Process the First Level of Data
      4. Step 4: Get the Real Data
      5. Step 5: Process the Data
      6. Step 6: Create the Chart
    5. Summing Up
  8. 3. Integrating Charts on a Page
    1. Creating a Classic Sparkline
      1. Step 1: Include the Required JavaScript Libraries
      2. Step 2: Create the HTML Markup for the Sparkline
      3. Step 3: Draw the Sparkline
      4. Step 4: Adjust the Chart Style
    2. Charting Many Variables
      1. Step 1: Prepare the HTML Markup
      2. Step 2: Draw the Charts
      3. Step 3: Establish a Default Style for the Charts
      4. Step 4: Modify the Default Style for Special Classes
      5. Step 5: Create a Unique Style for a Specific Chart
    3. Annotating Sparklines
      1. Step 1: Prepare the Data
      2. Step 2: Prepare the HTML Markup
      3. Step 3: Add the Chart
      4. Step 4: Add the Primary Annotation
      5. Step 5: Provide Additional Information
    4. Drawing Composite Charts
      1. Step 1: Draw the Trading Volume Chart
      2. Step 2: Add the Closing Price Chart
      3. Step 3: Add the Annotations
      4. Step 4: Show Details as a Chart
    5. Responding to Click Events
      1. Step 1: Add the Chart
      2. Step 2: Handle Click Events
      3. Step 3: Improve the Transitions
      4. Step 4: Animate
    6. Updating Charts in Real Time
      1. Step 1: Retrieve the Data
      2. Step 2: Update the Visualization
    7. Summing Up
  9. 4. Creating Specialized Graphs
    1. Visualizing Hierarchies with Tree Maps
      1. Step 1: Include the Required Libraries
      2. Step 2: Prepare the Data
      3. Step 3: Draw the Tree Map
      4. Step 4: Vary the Shading to Show Additional Data
    2. Highlighting Regions with a Heat Map
      1. Step 1: Include the Required JavaScript
      2. Step 2: Define the Visualization Data
      3. Step 3: Create the Background Image
      4. Step 4: Set Aside an HTML Element to Contain the Visualization
      5. Step 5: Format the Data
      6. Step 6: Draw the Map
      7. Step 7: Adjust the Heat Map z-index
    3. Showing Relationships with Network Graphs
      1. Step 1: Include the Required Libraries
      2. Step 2: Prepare the Data
      3. Step 3: Define the Graph’s Nodes
      4. Step 4: Connect the Nodes with Edges
      5. Step 5: Automate the Layout
      6. Step 6: Add Interactivity
    4. Revealing Language Patterns with Word Clouds
      1. Step 1: Include the Required Libraries
      2. Step 2: Prepare the Data
      3. Step 3: Add the Required Markup
      4. Step 4: Create a Simple Cloud
      5. Step 5: Add Interactivity
    5. Summing Up
  10. 5. Displaying Timelines
    1. Building Timelines with a Library
      1. Step 1: Include the Required Libraries
      2. Step 2: Prepare the Data
      3. Step 3: Draw the Timeline
      4. Step 4: Set Chronoline.js Options for the Data
    2. Building Timelines with JavaScript
      1. Step 1: Prepare the HTML Skeleton
      2. Step 2: Start JavaScript Execution
      3. Step 3: Create the Timeline in Semantic HTML
      4. Step 4: Include the Supporting Content
      5. Step 5: Optionally Take Advantage of jQuery
      6. Step 6: Fix Timeline Problems with CSS
      7. Step 7: Add Styles to Visually Structure the Timeline
      8. Step 8: Add Interactivity
    3. Using a Web Component
      1. Step 1: Preview the Standard Component
      2. Step 2: Include the Required Components
      3. Step 3: Prepare the Data
      4. Step 4: Create a Default Timeline
      5. Step 5: Adjust the Timeline Styles
    4. Summing Up
  11. 6. Visualizing Geographic Data
    1. Using Map Fonts
      1. Step 1: Include the Fonts in the Page
      2. Step 2: Display One Country
      3. Step 3: Combine Multiple Countries into a Single Map
      4. Step 4: Vary the Countries Based on the Data
      5. Step 5: Add a Legend
    2. Working with Scalable Vector Graphics
      1. Step 1: Create the SVG Map
      2. Step 2: Embed the Map in the Page
      3. Step 3: Collect the Data
      4. Step 4: Define the Color Scheme
      5. Step 5: Color the Map
      6. Step 6: Add a Legend
      7. Step 7: Add Interactions
    3. Including Maps for Context
      1. Step 1: Set Up the Web Page
      2. Step 2: Prepare the Data
      3. Step 3: Choose a Map Style
      4. Step 4: Draw the Map
      5. Step 5: Add the Sightings
    4. Integrating a Full-Featured Mapping Library
      1. Step 1: Prepare the Data
      2. Step 2: Set Up the Web Page and Libraries
      3. Step 3: Draw the Base Map
      4. Step 4: Add the Routes to the Map
      5. Step 5: Add an Animation Control
      6. Step 6: Prepare the Animation
      7. Step 7: Animate the Routes
      8. Step 8: Create Labels for the Stops
      9. Step 9: Build the Label Animation
      10. Step 10: Incorporate Label Animation in the Animation Step
      11. Step 11: Add a Title
    5. Summing Up
  12. 7. Custom Visualizations with D3.js
    1. Adapting a Traditional Chart Type
      1. Step 1: Prepare the Data
      2. Step 2: Set Up the Web Page
      3. Step 3: Create a Stage for the Visualization
      4. Step 4: Control the Chart’s Dimensions
      5. Step 5: Draw the Chart Framework
      6. Step 6: Add the Data to the Chart
      7. Step 7: Answer Users’ Questions
    2. Creating a Force-Directed Network Graph
      1. Step 1: Prepare the Data
      2. Step 2: Set Up the Page
      3. Step 3: Create a Stage for the Visualization
      4. Step 4: Draw the Graph’s Nodes
      5. Step 5: Draw the Graph’s Edges
      6. Step 6: Position the Elements
      7. Step 7: Add Force Direction to the Graph
      8. Step 8: Add Interactivity
      9. Step 9: Experiment with Other Enhancements
    3. Creating a Scalable Map
      1. Step 1: Prepare the Data
      2. Step 2: Set Up the Page
      3. Step 3: Create a Map Projection
      4. Step 4: Initialize the SVG Container
      5. Step 5: Retrieve the Map Data
      6. Step 6: Draw the Map
      7. Step 7: Retrieve the Weather Data
      8. Step 8: Plot the Data
      9. Step 9: Add Interactivity
    4. Creating a Unique Visualization
      1. Step 1: Prepare the Data
      2. Step 2: Set Up the Page
      3. Step 3: Create a Stage for the Visualization
      4. Step 4: Create Scales
      5. Step 5: Retrieve the Data
      6. Step 6: Draw the Visualization
      7. Step 7: Color the Areas
      8. Step 8: Make the Visualization Interactive
    5. Summing Up
  13. 8. Managing Data in the Browser
    1. Using Functional Programming
      1. Step 1: Start with an Imperative Version
      2. Step 2: Debug the Imperative Code
      3. Step 3: Understand the Problems Imperative Programming May Introduce
      4. Step 4: Rewrite Using Functional Programming Style
      5. Step 5: Evaluate Performance
      6. Step 6: Fix the Performance Problem
    2. Working with Arrays
      1. Extracting Elements by Position
      2. Combining Arrays
      3. Removing Invalid Data Values
      4. Finding Elements in an Array
      5. Generating Arrays
    3. Enhancing Objects
      1. Working with Keys and Values
      2. Cleaning Up Object Subsets
      3. Updating Attributes
    4. Manipulating Collections
      1. Working with Iteration Utilities
      2. Finding Elements in a Collection
      3. Testing a Collection
      4. Rearranging Collections
    5. Summing Up
  14. 9. Building Data-Driven Web Applications: Part 1
    1. Frameworks and Libraries
      1. Step 1: Select an Application Library
      2. Step 2: Install Development Tools
      3. Step 3: Define a New Project
      4. Step 4: Add Our Unique Dependencies
    2. Models and Views
      1. Step 1: Define the Application’s Models
      2. Step 2: Implement the Model
      3. Step 3: Define the Application’s Collections
      4. Step 4: Define the Application’s Main View
      5. Step 5: Define the Main View Templates
      6. Step 6: Refine the Main View
    3. Views for Visualizations
      1. Step 1: Define the Additional Views
      2. Step 2: Implement the Details View
      3. Step 3: Implement the Properties View
      4. Step 4: Implement the Map View
      5. Step 5: Implement the Charts View
    4. Summing Up
  15. 10. Building Data-Driven Web Applications: Part 2
    1. Connecting with the Nike+ Service
      1. Step 1: Authorize Users
      2. Step 2: Accept the Nike+ Response
      3. Step 3: Page the Collection
      4. Step 4: Dynamically Update the View
      5. Step 5: Filter the Collection
      6. Step 6: Parse the Response
      7. Step 7: Retrieve Details
    2. Putting It All Together
      1. Step 1: Create a Backbone.js Router
      2. Step 2: Support Run Models Outside of Any Collection
      3. Step 3: Let Users Change Views
      4. Step 4: Fine-Tuning the Application
    3. Summing Up
  16. Index

Product information

  • Title: Data Visualization with JavaScript
  • Author(s): Stephen A. Thomas
  • Release date: March 2015
  • Publisher(s): No Starch Press
  • ISBN: 9781593276058