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

Content preview from Data Visualization with JavaScript

Chapter 2. Making Charts Interactive

In Chapter 1 we saw how to create a wide variety of simple, static charts. In many cases such charts are the ideal visualization, but they don’t take advantage of an important characteristic of the Web—interactivity. Sometimes you want to do more than just present data to your users; you want to give them a chance to explore the data, to focus on the elements they find particularly interesting, or to consider alternative scenarios. In those cases we can take advantage of the Web as a medium by adding interactivity to our visualizations.

Because they’re designed for the Web, virtually all of the libraries and toolkits we examine in this book include support for interactivity. That’s certainly true of the Flotr2 ...

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

Data Visualization with JavaScript

by Stephen A. Thomas

Chapter 2. Making Charts Interactive

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.