Data Visualization with JavaScript

Data Visualization with JavaScript

by Stephen A. Thomas
Released March 2015
Publisher(s): No Starch Press
ISBN: 9781593276058

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on ebooks.com
Start your free trial

Book description

Data Visualization with JavaScript shows developers how to create impressive data visualizations for the web, including animated charts and interactive maps.

Publisher resources

View/Submit Errata

Table of contents

  1. About the Author
  2. About the Technical Reviewer
  3. Acknowledgments
  4. Introduction
    1. The Book’s Philosophy
    2. The Book’s Contents
    3. Source Code for Examples
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. A. Updates
  16. Index
  17. Copyright

Product information

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