What do you think?
Rate this book
HTML5 Graphing & 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. Overview In Detail 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. What you will learn from this book Approach 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. Who this book is written 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.
344 pages, Paperback
First published January 1, 2012
28 people want to read
Ratings & Reviews
Friends & Following
Create a free account to discover what your friends think of this book!
Community Reviews
Displaying 1 - 3 of 3 reviews
February 3, 2014
These days I've been focusing on data visualization a lot. Especially after realising that data available on internet can be esially present in for of visulizations.
HTML5 Graphing & Data Visualization Cookbook is my second read which speaks a lot about how about data graphing and visuaization, which not only helped me understand presentation of data, but also, helped me in a POC i was working on.
The content of this book, is well arranged to help you understand the concept of graphing in step by step manner. Illustrations are excellent and actually re-usable.
Author has explained a lot about graphing techniques, and also presented a demonstration in last chapter using google charts. If you are planning to read this title, I would suggest to have a prior understanding about JavaScript and obviously, basic HTML.
Excellent read as a referenc during execution phase of a similar project. One can keep it handy and refer to when in trouble.
HTML5 Graphing & Data Visualization Cookbook is my second read which speaks a lot about how about data graphing and visuaization, which not only helped me understand presentation of data, but also, helped me in a POC i was working on.
The content of this book, is well arranged to help you understand the concept of graphing in step by step manner. Illustrations are excellent and actually re-usable.
Author has explained a lot about graphing techniques, and also presented a demonstration in last chapter using google charts. If you are planning to read this title, I would suggest to have a prior understanding about JavaScript and obviously, basic HTML.
Excellent read as a referenc during execution phase of a similar project. One can keep it handy and refer to when in trouble.
February 19, 2013
One of the HTML5 most relevant new features which is causing more interest to the developers community is the canvas element, and it's no wonder as it allows to generate dynamic graphics using JavaScript, both static graphics and animations.
It's true that since 2001 we have SVG to perform similar tasks, but the SVG and canvas goal is different: SVG creates vector elements, while canvas generates bitmap images.
This book entitled HTML5 Graphing and Data Visualization Cookbook teaches you how to use the canvas element to create several graphics, but that is not all, also to create animations and interactivities. The goal is ambitious, so let's review the book chapter by chapter to see if it's successful:
Chapter 1 - Drawing Shapes in Canvas: To know the canvas element nothing better than start by creating graphics. In this chapter you will learn how to draw several real flags that include details like rectangles, triangles, crosses, stars, etc.
Chapter 2 - Advanced Drawing in Canvas: At first you will continue creating flags but this time with a greater difficulty: you will use arcs, curves and will integrate existent images in a canvas. Also you'll begin to work with text and you'll see how to manipulate your graphics pixels to create interesting effects.
Chapter 3 - Creating Cartesian-based Graphs: Here the fun begins. Draw flags is fine but, what if you create something more useful? Here you'll begin to create charts to visualize data. You'll see bar, scatter, line charts and some more.
Chapter 4 - Let's Curve Things Up: You'll continue creating charts but this time leaving the straight lines: you'll see bubble, pie, radar and tree charts. I've loved chapters 3 and 4, are the backbone of this book.
Chapter 5 - Getting Out of the Box: You'll create new charts like the pyramid chart, but also you'll add interactivity to some chart created earlier. For example, you'll see how to create a bar chart that shows how many times you pressed the mouse button in a second.
Chapter 6 - Bringing Static Things to Life: It's important know how to create charts, but also structure well your scripts to use different data source and create animations. This is what you'll learn in this chapter, one of the most important.
Chapter 7 - Depending on the Open Source Sphere: The open source community dedicated to data Visualization is very rich, and here you'll see how to use some of existing libraries like jqPlot, flotJS, RaphaelJS, etc.
Chapter 8 - Playing with Google Charts: I think the title is quite descriptive. In this chapter you'll use the Google visualization API and Google Spreadsheet to display and customize various charts.
Chapter 9 - Using Google Maps: A chapter on Google Maps couldn't be missing on a book on data visualization. You'll learn how to create a map and display data in various ways. Furthermore you'll add markers and events to the map.
Chapter 10 - Maps in Action: You'll check the enormous possibilities when using maps to visualize data, since you'll create a map that, when clicking on some place, will show the latest tweets about a particular subject that have been published in this area.
In conclusion I would like to note that it seemed to me a very good book for those developers interested in data visualization, JavaScript and HTML5. The mathematical formulas used in chart generation can be used both for the canvas element and for SVG, and with them you'll get any chart you can imagine.
The explanations are clear and extensive. It's not a newbies book, although you'll begin creating easy graphics, things get complicated quickly. If you don't have a good JavaScript level, it will be difficult for you to follow the code.
In short, if you're an experienced developer and enjoy creating complex animated and interactive charts and experiment with different ways of data visualization, I wouldn't pass up this book.
It's true that since 2001 we have SVG to perform similar tasks, but the SVG and canvas goal is different: SVG creates vector elements, while canvas generates bitmap images.
This book entitled HTML5 Graphing and Data Visualization Cookbook teaches you how to use the canvas element to create several graphics, but that is not all, also to create animations and interactivities. The goal is ambitious, so let's review the book chapter by chapter to see if it's successful:
Chapter 1 - Drawing Shapes in Canvas: To know the canvas element nothing better than start by creating graphics. In this chapter you will learn how to draw several real flags that include details like rectangles, triangles, crosses, stars, etc.
Chapter 2 - Advanced Drawing in Canvas: At first you will continue creating flags but this time with a greater difficulty: you will use arcs, curves and will integrate existent images in a canvas. Also you'll begin to work with text and you'll see how to manipulate your graphics pixels to create interesting effects.
Chapter 3 - Creating Cartesian-based Graphs: Here the fun begins. Draw flags is fine but, what if you create something more useful? Here you'll begin to create charts to visualize data. You'll see bar, scatter, line charts and some more.
Chapter 4 - Let's Curve Things Up: You'll continue creating charts but this time leaving the straight lines: you'll see bubble, pie, radar and tree charts. I've loved chapters 3 and 4, are the backbone of this book.
Chapter 5 - Getting Out of the Box: You'll create new charts like the pyramid chart, but also you'll add interactivity to some chart created earlier. For example, you'll see how to create a bar chart that shows how many times you pressed the mouse button in a second.
Chapter 6 - Bringing Static Things to Life: It's important know how to create charts, but also structure well your scripts to use different data source and create animations. This is what you'll learn in this chapter, one of the most important.
Chapter 7 - Depending on the Open Source Sphere: The open source community dedicated to data Visualization is very rich, and here you'll see how to use some of existing libraries like jqPlot, flotJS, RaphaelJS, etc.
Chapter 8 - Playing with Google Charts: I think the title is quite descriptive. In this chapter you'll use the Google visualization API and Google Spreadsheet to display and customize various charts.
Chapter 9 - Using Google Maps: A chapter on Google Maps couldn't be missing on a book on data visualization. You'll learn how to create a map and display data in various ways. Furthermore you'll add markers and events to the map.
Chapter 10 - Maps in Action: You'll check the enormous possibilities when using maps to visualize data, since you'll create a map that, when clicking on some place, will show the latest tweets about a particular subject that have been published in this area.
In conclusion I would like to note that it seemed to me a very good book for those developers interested in data visualization, JavaScript and HTML5. The mathematical formulas used in chart generation can be used both for the canvas element and for SVG, and with them you'll get any chart you can imagine.
The explanations are clear and extensive. It's not a newbies book, although you'll begin creating easy graphics, things get complicated quickly. If you don't have a good JavaScript level, it will be difficult for you to follow the code.
In short, if you're an experienced developer and enjoy creating complex animated and interactive charts and experiment with different ways of data visualization, I wouldn't pass up this book.
November 2, 2014
I was asked to review this book. I feel the book is really good for beginners. The examples provided by the author are simple, easy to understand and to implement, not to mention serve as a good reference to build upon.
The first 6 chapters are all about the HTML5 Canvas and how to make the best use of it. The later ones give a peek into 3rd party libraries, Google charts and maps. It was impressive to see the amount of work some people have done using Canvas and it's "relatives"!
By going through the examples of the book, you end up doing a bit of Mathematics yourself. This helped me brush up some of my Math skills, especially Trigonometry. (Perks?)
The example in the book has some bugs (eg: Chapter 3, Building a bar chart from scratch: The chartYData.value are in decimals but the range.max is 10; the chartYData should be whole numbers), but the code samples make up for it.
My biggest gripe about the book is that, there is not one line in the book that told me what getContext actually does. The book could have also included some of the advanced/other concepts like toDataURL().
All in all, this is a good book to start off with to learn about HTML5 Canvas.
The first 6 chapters are all about the HTML5 Canvas and how to make the best use of it. The later ones give a peek into 3rd party libraries, Google charts and maps. It was impressive to see the amount of work some people have done using Canvas and it's "relatives"!
By going through the examples of the book, you end up doing a bit of Mathematics yourself. This helped me brush up some of my Math skills, especially Trigonometry. (Perks?)
The example in the book has some bugs (eg: Chapter 3, Building a bar chart from scratch: The chartYData.value are in decimals but the range.max is 10; the chartYData should be whole numbers), but the code samples make up for it.
My biggest gripe about the book is that, there is not one line in the book that told me what getContext actually does. The book could have also included some of the advanced/other concepts like toDataURL().
All in all, this is a good book to start off with to learn about HTML5 Canvas.
Displaying 1 - 3 of 3 reviews