"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 this HTML5 Data visualization 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.

Chapter Breakdown:

Chapter 1 Drawing Shapes in Canvas

This chapter's main focus is to break you into the world of canvas . We will spend the majority of our time in this chapter understanding how canvas works and how to create lines and shapes in canvas. This learning will help us in future chapters to create advance charts using canvas.

In this chapter, we will master the basic shapes and styles of drawing with the canvas API. This chapter will be the graphic's backbone to the rest of the book, so if at any stage you feel you need a refresher you could come back to this chapter. Drawing lines can be ... well not very thrilling. What better way to make it more dramatic, than to integrate a theme into this chapter as a subtopic: creating flags!

Chapter 2 Advanced Drawing in Canvas

This chapter is the last Chapter that we dig deep into canvas as the remaining chapters will be focused on building charts and interactive charts.

In this chapter we will continue mastering our skills with canvas by adding to our tool belt working with curves, images , text and even pixel manipulation.

Chapter 3 Creating Cartesian Based Graphs

Our first graph/chart under the microscope is the most popular and most simple one to create. We can put them all roughly under the Cartesian-based graphs. Altogether this graph style is relatively simple; it opens the door to creating amazingly creative ways of exploring data. In this chapter we will lay down the foundations to building charts in general and hopefully motivate you to come up with your own ideas on how to create engaging data visualizations.

Chapter 4 Let's Curve Things Up

In the last chapter we built a component for linear graphs ranging from dots, lines and bars. Most of the data we worked with was 2 dimensional while we ended our lesson with a 4 dimensional chart; it was still represented using linear art. In this chapter we will leverage the capability of creating non-linear data to represent data.

Chapter 5 Getting out of the Box

We covered our bases with the majority of the standard common charts. At this stage, it's time for us to become more creative with our charts. From this chapter and on we will progress into more out of the box, less commonly used charts and revisit some of our old charts to incorporate into them dynamic data or change their layout.

Chapter 6 Bringing Static Things to Life

Until now the importance of keeping things organized and clean wasn't as important as getting our projects done as we had relatively small projects. This chapter will break us into a few new habits by first making everything dynamic followed by creating a more Object Oriented Program program so it's easier for us to separate between tasks and reduce our code footprint. After all this hard work we will revisit our application and start adding extra logic geared at making our application animated layer by layer.

This chapter is a great recourse for refactoring practice. In the first half of this chapter we will be focused on improving our code structure to make it possible for us to have the level of control we will need in the second half of the chapter.

Chapter 7 Depending on the Open Source Sphere

The open-source HTML5 data visualization community is extremely rich and detailed with so many options and some really amazing libraries. Each library has its strong points and its disadvantages some are stand alone codes while other depend on other platforms such as Jquery. Some are really big, some are really small - there isn't one option that is perfect for all opportunities but with such a rich amount of options the most important thing is to figure out what library is the right one for you.

There is always a give way when working with open source libraries mainly when it comes to file sizes and having just too much features that drag down the speed of your application, load time and such but with the richness and creativeness of the community its hard to avoid really fantastic charts that can be created in minutes instead of hours.

In this chapter we will explore working with some of these options. Instead of using the libraries according to the documentation of the projects our goal will be to try to find ways to override the built in libraries to enable us better control over our applications in case we can't find a suitable solution in the documentation of an application. The goal in this chapter then will be double: To find ways to do things that aren't naturally set to work. To find ways to bypass problems.

One more important thing to note all of these open source libraries have copy rights. It is advised that you check the legal documentation of the project before you go ahead with it.

Chapter 8 Playing with Google Charts

In this chapter we will explore the Google visualization API task by task. We will look at the steps involved to create a chart and integrate with with the charting API.

Chapter 9 Using Google Maps

This chapter will be dedicated to explore some of the features available on Google maps to get us ready to work with mapping in general. Mapping on its own isn't data visualization but after we establish our base understanding how to work with maps we will have a very stable background that would enable us to create many cutting edge cool projects integrating data and data visualization.

In this chapter we will explore the main ways to create maps in the Google sphere.

Chapter 10 Maps in Action

In this chapter on mapping, we will tie in more deeply to our topic of data visualization. One of the most popular ways to visualize data these days is by using maps. In this chapter, we will explore a few ideas on how to integrate data into maps using the Google Maps platform.

Apendix: Picking your Graphics Technology

Until recently Flash was the only viable solution to create dynamic and interactive graphics, but with the new surge of supported technologies in HTML5 I thought it would be a good place to start by giving an overview of animation/drawing styles in HTML5. These days HTML5 offers a large array of options that are becoming an alternative to Flash.

Although this book will mainly be focused on creating graphics using Canvas and open source tools, we wanted to explore in this chapter alternative options. This chapter is not an exhaustive consideration of these alternatives but instead can be used as a guide to other options in creating content in HTML5.

Book Source
Files