book

Data Visualization with JavaScript

Name: Data Visualization with JavaScript
Author: Stephen A. Thomas
ISBN: 9781593276058

by Stephen A. Thomas

March 2015

Beginner to intermediate

384 pages

9h 40m

English

No Starch Press

Read now

Unlock full access

Copyright
About the Author
About the Technical Reviewer
Acknowledgments
Introduction
The Book’s PhilosophyThe Book’s ContentsSource Code for Examples
1. Graphing Data
Creating a Basic Bar ChartStep 1: Include the Required JavaScriptStep 2: Set Aside a <div> Element to Hold the ChartStep 3: Define the DataStep 4: Draw the ChartStep 5: Fix the Vertical AxisStep 6: Fix the Horizontal AxisStep 7: Adjust the StylingStep 8: Vary the Bar ColorStep 9: Work Around Flotr2 “Bugs”Plotting Continuous Data with a Line ChartStep 1: Define the DataStep 2: Graph the CO2 DataStep 3: Add the Temperature DataStep 4: Improve the Chart’s ReadabilityStep 5: Clarify the Temperature MeasurementsStep 6: Label the ChartStep 7: Work Around Flotr2 “Bugs”Emphasizing Fractions Using a Pie ChartStep 1: Define the DataStep 2: Draw the ChartStep 3: Label the ValuesStep 4: Work Around Flotr2 “Bugs”Plotting X/Y Data with a Scatter ChartStep 1: Define the DataStep 2: Format the DataStep 3: Plot the DataStep 4: Adjust the Chart’s AxesStep 5: Label the DataStep 6: Clarify the X-AxisStep 7: Answer Users’ QuestionsStep 8: Work Around Flotr2 “Bugs”Adding Magnitudes to X/Y Data with a Bubble ChartStep 1: Define the DataStep 2: Create a Background for the ChartStep 3: Plot the DataStep 4: Add the BackgroundStep 5: Color the BubblesStep 6: Adjust the Legend StylesStep 7: Work Around Flotr2 “Bugs”Displaying Multidimensional Data with a Radar ChartStep 1: Define the DataStep 2: Create the ChartStep 3: Work Around Flotr2 “Bugs”Summing Up
2. Making Charts Interactive
Selecting Chart ContentStep 1: Include the Required JavaScript LibrariesStep 2: Set Aside a <div> Element to Hold the ChartStep 3: Prepare the DataStep 4: Draw the ChartStep 5: Add the ControlsStep 6: Define the Data Structure for the InteractionStep 7: Determine Chart Data Based on the Interaction StateStep 8: Add the Controls Using JavaScriptStep 9: Respond to the Interaction ControlsZooming In on ChartsStep 1: Prepare the PageStep 2: Draw the ChartStep 3: Prepare the Data to Support InteractionStep 4: Prepare to Accept Interaction EventsStep 5: Enable the InteractionTracking Data ValuesStep 1: Set Aside a <div> Element to Hold the ChartsStep 2: Prepare the DataStep 3: Draw the ChartsStep 4: Implement the InteractionRetrieving Data Using AJAXStep 1: Understand the Source DataStep 2: Get the First Level of Data via AJAXStep 3: Process the First Level of DataStep 4: Get the Real DataStep 5: Process the DataStep 6: Create the ChartSumming Up
3. Integrating Charts on a Page
Creating a Classic SparklineStep 1: Include the Required JavaScript LibrariesStep 2: Create the HTML Markup for the SparklineStep 3: Draw the SparklineStep 4: Adjust the Chart StyleCharting Many VariablesStep 1: Prepare the HTML MarkupStep 2: Draw the ChartsStep 3: Establish a Default Style for the ChartsStep 4: Modify the Default Style for Special ClassesStep 5: Create a Unique Style for a Specific ChartAnnotating SparklinesStep 1: Prepare the DataStep 2: Prepare the HTML MarkupStep 3: Add the ChartStep 4: Add the Primary AnnotationStep 5: Provide Additional InformationDrawing Composite ChartsStep 1: Draw the Trading Volume ChartStep 2: Add the Closing Price ChartStep 3: Add the AnnotationsStep 4: Show Details as a ChartResponding to Click EventsStep 1: Add the ChartStep 2: Handle Click EventsStep 3: Improve the TransitionsStep 4: AnimateUpdating Charts in Real TimeStep 1: Retrieve the DataStep 2: Update the VisualizationSumming Up
4. Creating Specialized Graphs
Visualizing Hierarchies with Tree MapsStep 1: Include the Required LibrariesStep 2: Prepare the DataStep 3: Draw the Tree MapStep 4: Vary the Shading to Show Additional DataHighlighting Regions with a Heat MapStep 1: Include the Required JavaScriptStep 2: Define the Visualization DataStep 3: Create the Background ImageStep 4: Set Aside an HTML Element to Contain the VisualizationStep 5: Format the DataStep 6: Draw the MapStep 7: Adjust the Heat Map z-indexShowing Relationships with Network GraphsStep 1: Include the Required LibrariesStep 2: Prepare the DataStep 3: Define the Graph’s NodesStep 4: Connect the Nodes with EdgesStep 5: Automate the LayoutStep 6: Add InteractivityRevealing Language Patterns with Word CloudsStep 1: Include the Required LibrariesStep 2: Prepare the DataStep 3: Add the Required MarkupStep 4: Create a Simple CloudStep 5: Add InteractivitySumming Up
5. Displaying Timelines
Building Timelines with a LibraryStep 1: Include the Required LibrariesStep 2: Prepare the DataStep 3: Draw the TimelineStep 4: Set Chronoline.js Options for the DataBuilding Timelines with JavaScriptStep 1: Prepare the HTML SkeletonStep 2: Start JavaScript ExecutionStep 3: Create the Timeline in Semantic HTMLStep 4: Include the Supporting ContentStep 5: Optionally Take Advantage of jQueryStep 6: Fix Timeline Problems with CSSStep 7: Add Styles to Visually Structure the TimelineStep 8: Add InteractivityUsing a Web ComponentStep 1: Preview the Standard ComponentStep 2: Include the Required ComponentsStep 3: Prepare the DataStep 4: Create a Default TimelineStep 5: Adjust the Timeline StylesSumming Up

6. Visualizing Geographic Data
Using Map FontsStep 1: Include the Fonts in the PageStep 2: Display One CountryStep 3: Combine Multiple Countries into a Single MapStep 4: Vary the Countries Based on the DataStep 5: Add a LegendWorking with Scalable Vector GraphicsStep 1: Create the SVG MapStep 2: Embed the Map in the PageStep 3: Collect the DataStep 4: Define the Color SchemeStep 5: Color the MapStep 6: Add a LegendStep 7: Add InteractionsIncluding Maps for ContextStep 1: Set Up the Web PageStep 2: Prepare the DataStep 3: Choose a Map StyleStep 4: Draw the MapStep 5: Add the SightingsIntegrating a Full-Featured Mapping LibraryStep 1: Prepare the DataStep 2: Set Up the Web Page and LibrariesStep 3: Draw the Base MapStep 4: Add the Routes to the MapStep 5: Add an Animation ControlStep 6: Prepare the AnimationStep 7: Animate the RoutesStep 8: Create Labels for the StopsStep 9: Build the Label AnimationStep 10: Incorporate Label Animation in the Animation StepStep 11: Add a TitleSumming Up
7. Custom Visualizations with D3.js
Adapting a Traditional Chart TypeStep 1: Prepare the DataStep 2: Set Up the Web PageStep 3: Create a Stage for the VisualizationStep 4: Control the Chart’s DimensionsStep 5: Draw the Chart FrameworkStep 6: Add the Data to the ChartStep 7: Answer Users’ QuestionsCreating a Force-Directed Network GraphStep 1: Prepare the DataStep 2: Set Up the PageStep 3: Create a Stage for the VisualizationStep 4: Draw the Graph’s NodesStep 5: Draw the Graph’s EdgesStep 6: Position the ElementsStep 7: Add Force Direction to the GraphStep 8: Add InteractivityStep 9: Experiment with Other EnhancementsCreating a Scalable MapStep 1: Prepare the DataStep 2: Set Up the PageStep 3: Create a Map ProjectionStep 4: Initialize the SVG ContainerStep 5: Retrieve the Map DataStep 6: Draw the MapStep 7: Retrieve the Weather DataStep 8: Plot the DataStep 9: Add InteractivityCreating a Unique VisualizationStep 1: Prepare the DataStep 2: Set Up the PageStep 3: Create a Stage for the VisualizationStep 4: Create ScalesStep 5: Retrieve the DataStep 6: Draw the VisualizationStep 7: Color the AreasStep 8: Make the Visualization InteractiveSumming Up
8. Managing Data in the Browser
Using Functional ProgrammingStep 1: Start with an Imperative VersionStep 2: Debug the Imperative CodeStep 3: Understand the Problems Imperative Programming May IntroduceStep 4: Rewrite Using Functional Programming StyleStep 5: Evaluate PerformanceStep 6: Fix the Performance ProblemWorking with ArraysExtracting Elements by PositionCombining ArraysRemoving Invalid Data ValuesFinding Elements in an ArrayGenerating ArraysEnhancing ObjectsWorking with Keys and ValuesCleaning Up Object SubsetsUpdating AttributesManipulating CollectionsWorking with Iteration UtilitiesFinding Elements in a CollectionTesting a CollectionRearranging CollectionsSumming Up
9. Building Data-Driven Web Applications: Part 1
Frameworks and LibrariesStep 1: Select an Application LibraryStep 2: Install Development ToolsStep 3: Define a New ProjectStep 4: Add Our Unique DependenciesModels and ViewsStep 1: Define the Application’s ModelsStep 2: Implement the ModelStep 3: Define the Application’s CollectionsStep 4: Define the Application’s Main ViewStep 5: Define the Main View TemplatesStep 6: Refine the Main ViewViews for VisualizationsStep 1: Define the Additional ViewsStep 2: Implement the Details ViewStep 3: Implement the Properties ViewStep 4: Implement the Map ViewStep 5: Implement the Charts ViewSumming Up
10. Building Data-Driven Web Applications: Part 2
Connecting with the Nike+ ServiceStep 1: Authorize UsersStep 2: Accept the Nike+ ResponseStep 3: Page the CollectionStep 4: Dynamically Update the ViewStep 5: Filter the CollectionStep 6: Parse the ResponseStep 7: Retrieve DetailsPutting It All TogetherStep 1: Create a Backbone.js RouterStep 2: Support Run Models Outside of Any CollectionStep 3: Let Users Change ViewsStep 4: Fine-Tuning the ApplicationSumming Up
Index

Overview

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.

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Data Visualization with Python and JavaScript, 2nd Edition

Publisher Resources

ISBN: 9781457189869Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills