HTML5 Graphics & Data Visualization Cookbook电子书

HTML5 Graphing and Data Visualization Cookbook

Table of Contents

HTML5 Graphing and Data Visualization Cookbook

Credits

About the Author

About the Reviewer

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Drawing Shapes in Canvas

Introduction

Graphics with 2D canvas

How to do it...

How it works...

There's more...

See also

Starting from basic shapes

Getting ready

How to do it...

How it works...

Layering rectangles to create the flag of Greece

Getting ready

How to do it...

How it works...

There's more...

BeginPath method and closePath method

Creating shapes using paths

Getting ready

How to do it...

How it works...

There's more...

Creating complex shapes

Getting ready

How to do it...

How it works...

There's more...

Adding more vertices

Getting ready

How to do it...

How it works...

Overlapping shapes to create other shapes

Getting ready

How to do it...

How it works...

2. Advanced Drawing in Canvas

Introduction

Drawing arcs

Getting ready

How to do it...

How to do it...

Drawing curves with a control point

Getting ready

How to do it...

How it works...

Creating a Bezier curve

Getting ready

How to do it...

How it works...

Integrating images into our art

Getting ready

How to do it...

How it works...

There's more...

Scaling images

Adding even more control

Using images as a fill

Drawing with text

Getting ready

How to do it...

How it works...

There's more...

Using gradients in your text

Adding shadows and glows

Understanding pixel manipulation

Getting ready

How to do it...

How it works...

Making an image grayscale

Pixel reversing

3. Creating Cartesian-based Graphs

Introduction

Building a bar chart from scratch

Getting ready

How to do it...

How it works...

There's more...

Revisiting the code

Using the fillChart function

Using the createBars function

Spreading data in a scatter chart

Getting ready

How to do it...

How it works...

Building line charts

Getting ready

How to do it...

How it works...

There's more...

Enabling switching mode between dots and lines

Creating fill shapes

Creating the flying brick chart (waterfall chart)

Getting ready

How to do it...

How it works...

There's more...

Cleaning the format of numbers

Other tasks I've left open

Building a candlestick chart (stock chart)

Getting ready

How to do it...

How it works...

There's more...

Adding other render options to our stock chart

4. Let's Curve Things Up

Introduction

Building a bubble chart

Getting ready

How to do it...

How it works...

Creating a pie chart

Getting ready

How to do it...

How it works...

There's more...

Revisiting Math.cos() and Math.sin()

Improving our bubbles' text format

Using a doughnut chart to show relationships

Getting ready

How to do it...

How it works...

There's more...

Adding an outline

Creating a legend

See also

Leveraging a radar

Getting ready

How to do it...

How it works...

There's more...

Adding a rotated legend

Structuring a tree chart

Getting ready

How to do it...

How it works...

There's more...

5. Getting Out of the Box

Introduction

Going through a funnel (a pyramid chart)

Getting ready

How to do it...

How it works...

There's more...

Making findLine smarter

Changing the logic in init to create shapes

Adding text into our graph

Revisiting lines: making the line chart interactive

Getting ready

How to do it...

How it works...

There's more...

Breaking down the logic of onChangedRadio

See also

Tree mapping and recursiveness

Getting ready

How to do it...

How it works...

There's more...

Updating the init function – recalculating the total

Turning drawTreeMap into a recursive function

Turning the data and total to recursive data

See also

Adding user interaction into tree mapping

Getting ready

How to do it...

How it works...

There's more...

Going back to the main treemap

Making an interactive click meter

How to do it...

How it works...

6. Bringing Static Things to Life

Introduction

Stacking graphical layers

Getting ready

How to do it...

How it works...

There's more...

Optimizing the drawChart function

Further streamlining our code

Creating the radio buttons dynamically

Moving to an OOP perspective

Getting ready

How to do it...

How it works...

There's more...

Moving our base canvas element into our constructor

Creating all the HTML components dynamically

Removing the lose ends

Testing our work by creating two charts

Animating independent layers

Getting ready

How to do it...

How it works...

Adding an interactive legend

Getting ready

How to do it...

How it works...

There's more...

Creating a context-aware legend

Getting ready

How to do it...

How it works...

7. Depending on the Open Source Sphere

Introduction

Animating a gauge meter (jqPlot)

Getting ready

How to do it...

How it works...

There's more...

Creating the updateMeter function

Creating an animated 3D chart (canvas3DGraph)

Getting ready

How to do it...

How it works...

There's more...

The logic behind plotBar

The logic behind styleFormatter

Charting over time (flotJS)

Getting ready

How to do it...

How it works...

There's more...

The GetData function

The UpdateChart function

Building a clock with RaphaelJS

Getting ready

How to do it...

How it works...

There's more...

Animating paths

Making a sunburst chart with InfoVis

Getting ready

How to do it...

How it works...

There's more...

Where is the copy?

8. Playing with Google Charts

Introduction

Getting started with a pie chart

Getting ready

How to do it...

How it works...

There's more...

Changing the chart type

Creating charts using the ChartWrapper

Getting ready

How to do it...

How it works...

There's more...

Changing a chart in one line

Changing data source to Google Spreadsheet

Getting ready

How to do it...

How it works...

There's more...

Customizing the chart properties with an options object

Getting ready

How to do it...

How it works...

There's more...

Adding a dashboard to charts

Getting ready

How to do it...

How it works...

9. Using Google Maps

Introduction

Creating a geographic chart with Google Visualization API

Getting ready

How to do it...

How it works...

There's more...

Making smaller areas more visible

Obtaining a Google API key

Getting ready

How to do it...

How it works...

Building a Google map

Getting ready

How to do it...

How it works...

There's more...

Working with latitude and longitude

Map types

Adding markers and events

Getting ready

How to do it...

How it works...

There's more...

Customizing controls and overlapping maps

Getting ready

How to do it...

How it works...

There's more...

Redesigning maps using styles

Getting ready

How to do it...

How it works...

There's more...

10. Maps in Action

Introduction

Connecting a Twitter feed to a Google map

Getting ready

How to do it...

How it works...

Building an advanced interactive marker

Getting ready

How to do it...

How it works...

Adding multiple tweets into an InfoWindow bubble

Getting ready

How to do it...

How it works...

Customizing the look and feel of markers

Getting ready

How to do it...

How it works...

Final project: building a live itinerary

Getting ready

How to do it...

How it works...

There's more...

Understanding the Traveler marker

Updating the Animator object

Index