HTML5 Graphing and Data Visualization Cookbook: Get a complete grounding in the exciting visual world of Canvas and HTML5 using this recipe-packed cookbook. Learn to create charts and graphs, draw complex shapes, add interactivity, work with Google maps, and much more.

Ben Fhala

€18.99 per month

4.6 (10 Ratings)

Paperback Nov 2012 344 pages 1st Edition

Ben Fhala

€18.99 per month

4.6 (10 Ratings)

Paperback Nov 2012 344 pages 1st Edition

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!

Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!

50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

Thousands of reference materials covering every tech concept you need to stay up to date.

Subscribe now

View plans & pricing

View table of contents

Preview Book

Key benefits

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

Description

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.

Who is this book for?

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.

What you will learn

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

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!

Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!

50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

Thousands of reference materials covering every tech concept you need to stay up to date.

Subscribe now

View plans & pricing

Frequently bought together

Responsive Web Design with HTML5 and CSS3

€32.99

€41.99

Data Visualization: a successful design process

€24.99

Total € 99.97

Bill Ferster Sep 08, 2013

Ben Fhala's HTML Graphing and Data Visualization Cookbook is a nice tutorial on how to create simple data visualizations using the HTML5 cocktail of JavaScript, the new HTML5 Canvas drawing options, and even using some external resources, such as Google's Visualization toolkit, Google Maps, and InfoVis.I was given a printed copy of the book and access to the online version by the publisher, PACKT Publishing, presumably because they had seen my book Interactive Visualization: Insight through Inquiry (2013, MIT Press) and I find this book to be a good practical complement to my own. Fhala's style is casual, clear and informative, and he relies on progressively introducing new concepts using code snippets that are fully explained in the text that follows.The first section of the book introduces drawing vector graphics using the HTML5 Canvas element. He does this by guiding the reader through the creation of a number of small programs that create the national flags of a number of counties, starting off with the simple rising sun of Japan to Canada's more complex maple leaf.There are sections on more advanced drawing topics, such a drawing Bezier curves, shadows and glows, and a good section on manipulating the screen on the pixel level for very basic image processing techniques.I like how he introduces simple charting, by building a series of popular Cartesian graphs directly using the Canvas without using any outside resources at first. He begins by defining the data structures required to represent the data to be graphed and progressively moves from bar charts, through scatter graphs to pie charts. The simple trigonometry needed is well explained, even the recursive algorithms needed to draw sophisticated tree maps are clearly described.The last section introduces the idea of using external web-based resources, such as, such as Google's Visualization toolkit, Google Maps, and InfoVis instead of drawing all the elements by hand and includes a section on implementing Google Maps as well.All in all, Ben Fhala's HTML Graphing and Data Visualization Cookbook does a good job of introducing the uninitiated into the word of interactive visualization. It's a shame he didn't extend his readers into the world of D3-based visualizations, but this is great first entry for those new to the field.Bill FersterUniversity of Virginia

Amazon Verified review

William Springer Sep 01, 2013

Although I've been using HTML5 for a few years now, I haven't yet done much with the Canvas, the new drawing element. Having started, it reminds me of nothing so much as moving the turtle around in the old Logo programming language.In HTML5 Graphing and Data Visualization Cookbook, we start out by learning to create basic shapes in Canvas, with the gimmick of creating various national flags. This takes up only the first two chapters of the book, as it is presumed that the reader is already comfortable with HTML and JavaScript; the remaining eight chapters involve creating and using maps, graphs, and charts, both simple and animated. Towards the end of the book, we actually get into using the Google Maps API to overlay our data onto a world map.In each chapter, we start by typing in some new code and run it; after that, the book discusses what the code is doing. I liked the format because you see results right away - each code segment is relatively short - and then after seeing what happens, you see how it works. I also liked the little mathematical explanations and programming asides that pop up here and there. The chapter organization also makes it easy to jump to the section of the book you're interested in, so I think this will make a good reference.There were two things that irritated me about this book. The first was that the spacing in code is a little odd, with extra spaces where I wouldn't expect to see them and no space where I do expect one. This doesn't affect how the code works, but it's a little distracting. The book is also written in a fairly informal manner, complete with smileys; at times I felt like I was reading blog posts rather than a professional programming book. That said, neither of those really takes away from the usability of the book, and are more a matter of personal preference than anything else. For the topic this book covers, I haven't seen anything better.Disclosure: I received a free review copy of this book for Vulcan Ears Book Reviews (vulcanears.com), where this review originally appeared.

Amazon Verified review

Pavel Gerega Aug 14, 2013

This is the go to source for HTML5 graphing and data visualization. The author explains what is about to happen in the tutorial, creates the code, and then takes you step by step through the code explaining it all which is really important in understanding what exactly is going on. The wording is perfect; not too technical and dry but not too watered down either.The visuals help a lot and the different sections in the book make it easy to see what's where. I've never played around with the canvas element before picking up this book and I had no trouble jumping right in and following along with the tutorials and code in this book but I did have HTML and CSS knowledge previous to reading the book with was helpful.I was amazed at all the different things that was possible to do with the canvas element. If you know HTML but want to explore the canvas element in depth, I highly recommend this book. Interesting read and definitely worth it!

Amazon Verified review

Matt West Apr 01, 2013

This is easily the best book I have seen for coverage of the Canvas API.The book uses a lot of exercises which I found really useful as it made it easier for me to understand some of the more advanced drawing techniques. I really liked the way that the exercises are structured too. Your first start with a short explanation of what you need to do and then there are a number of easy to follow steps that take you through how to accomplish the task. Each exercise finishes with an in-depth explanation of what you just did and the techniques you used.I've used JavaScript libraries like Flot a lot in the past for data visualization so it's really interesting to learn how to create charts from scratch.Later in the book you learn about a number of JavaScript libraries that you can use for data visualisation as well as looking at some Google APIs. I particularly enjoyed the section on using Google Spreadsheets as a data source.The book does assume some prior programming experience so I wouldn't recommend it for beginners, but anyone with a modest JavaScript background should be able to work through the examples just fine.If you are a front-end developer looking to learn more about data visualization and the Canvas API I cannot recommend this book highly enough.

Amazon Verified review

Rob Delaporte Jun 22, 2013

If you have a need to know how to better utilize the canvas then this is the book for you. Although not a book for beginners it is very easy to read and follow along. Well written and a valuable addition to any html5 developers library.

Amazon Verified review

HTML5 Graphing and Data Visualization Cookbook: Get a complete grounding in the exciting visual world of Canvas and HTML5 using this recipe-packed cookbook. Learn to create charts and graphs, draw complex shapes, add interactivity, work with Google maps, and much more.

What do you get with a Packt Subscription?