HTML5 Graphing and Data Visualization Cookbook
Formats:
save 15%!
save 37%!
Free Shipping!
| Also available on: |
|
- Build interactive visualizations of data from scratch with integrated animations and events
- Draw with canvas and other html5 elements that improve your ability to draw directly in the browser
- Work and improve existing 3rd party charting solutions such as Google Maps
Book Details
Language : EnglishPaperback : 344 pages [ 235mm x 191mm ]
Release Date : November 2012
ISBN : 1849693706
ISBN 13 : 9781849693707
Author(s) : Ben Fhala
Topics and Technologies : All Books, Data
Table of Contents
PrefaceChapter 1: Drawing Shapes in Canvas
Chapter 2: Advanced Drawing in Canvas
Chapter 3: Creating Cartesian-based Graphs
Chapter 4: Let's Curve Things Up
Chapter 5: Getting Out of the Box
Chapter 6: Bringing Static Things to Life
Chapter 7: Depending on the Open Source Sphere
Chapter 8: Playing with Google Charts
Chapter 9: Using Google Maps
Chapter 10: Maps in Action
Index
- Chapter 1: Drawing Shapes in Canvas
- Introduction
- Graphics with 2D canvas
- Starting from basic shapes
- Layering rectangles to create the flag of Greece
- Creating shapes using paths
- Creating complex shapes
- Adding more vertices
- Overlapping shapes to create other shapes
- Chapter 2: Advanced Drawing in Canvas
- Introduction
- Drawing arcs
- Drawing curves with a control point
- Creating a Bezier curve
- Integrating images into our art
- Drawing with text
- Understanding pixel manipulation
- Chapter 3: Creating Cartesian-based Graphs
- Introduction
- Building a bar chart from scratch
- Spreading data in a scatter chart
- Building line charts
- Creating the flying brick chart (waterfall chart)
- Building a candlestick chart (stock chart)
- Chapter 4: Let's Curve Things Up
- Introduction
- Building a bubble chart
- Creating a pie chart
- Using a doughnut chart to show relationships
- Leveraging a radar
- Structuring a tree chart
- Chapter 5: Getting Out of the Box
- Introduction
- Going through a funnel (a pyramid chart)
- Revisiting lines: making the line chart interactive
- Tree mapping and recursiveness
- Adding user interaction into tree mapping
- Making an interactive click meter
- Chapter 6: Bringing Static Things to Life
- Introduction
- Stacking graphical layers
- Moving to an OOP perspective
- Animating independent layers
- Adding an interactive legend
- Creating a context-aware legend
- Chapter 7: Depending on the Open Source Sphere
- Introduction
- Animating a gauge meter (jqPlot)
- Creating an animated 3D chart (canvas3DGraph)
- Charting over time (flotJS)
- Building a clock with RaphaelJS
- Making a sunburst chart with InfoVis
- Chapter 8: Playing with Google Charts
- Introduction
- Getting started with a pie chart
- Creating charts using the ChartWrapper
- Changing data source to Google Spreadsheet
- Customizing the chart properties with an options object
- Adding a dashboard to charts
- Chapter 9: Using Google Maps
- Introduction
- Creating a geographic chart with Google Visualization API
- Obtaining a Google API key
- Building a Google map
- Adding markers and events
- Customizing controls and overlapping maps
- Redesigning maps using styles
- Chapter 10: Maps in Action
- Introduction
- Connecting a Twitter feed to a Google map
- Building an advanced interactive marker
- Adding multiple tweets into an InfoWindow bubble
- Customizing the look and feel of markers
- Final project: building a live itinerary
Ben Fhala
Code Downloads
Download the code and support files for this book.
Submit Errata
Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.
Sample chapters
You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.
- Creating graphics in Canvas 2D and draw complex shapes
- Building most of the common charts through step-by-step recipes
- Adding interactivity to canvas elements and create your own JavaScript animation engine
- Discovering many fantastic charting solutions and learn how to deal with their capabilities and how to change them as well
- Learning how to work with Google maps , Google Charts, and Google Docs API
- Integrating your data into live data, xml driven data, objects, and strings
The HTML5 canvas tag makes creating any plot shape easy, all you have to do then is fill it with exciting visualizations written in JavaScript or using other visualization tools.
"HTML5 Graphing and Data Visualization Cookbook" is the perfect break into the world of Canvas, charts, and graphs in HTML5 and JavaScript. In this book we will go through a journey of getting to know the technology by creating and planning data-driven visualizations. This cookbook is organized in a linear, progressive way so it can be read from start to finish, as well as be used as a resource for specific tasks.
This book travels through the steps involved in creating a fully interactive and animated visualization in HTML5 and JavaScript. You will start from very simple “hello world” samples and quickly dive deeper into the world of graphs and charts in HTML5. Followed by learning how canvas works and carrying out a group of tasks geared at taking what we learned and implementing it in a variety of chart types. With each chapter the content becomes more complex and our creations become more engaging and interactive.
Our goal is that by the end of this book you will have a strong foundation; knowing when to create a chart on your own from scratch and when it would be a good idea to depend on other APIs.
We finish our book in our last two chapters exploring Google maps and integrating everything we learnt into a full project.
This cookbook is organized in a linear, progressive way allowing it to be read from start to finish, as well as to be used as a useful resource for specific tasks.
The HTML5 examples and recipes will have you making dynamic, interactive, and animated charts and graphs in no time.
You don't need to have a background in HTML5 or Canvas but you do need to have a basic understanding of how HTML works and know how to code in any language (preferably in JavaScript). In this book we will not explain how to learn to code but how to create projects and how to plan and execute them in the process.

