Today, the Web and the world are increasingly being defined by data. With the data revolution of the Internet in the early nineties and until today, more and more data has been exposed and aggregated, from government agencies, public sector information, financial information, digital media and news, and social media to private sector information, user information, and so on. With the overload of data on the Web it's easy to overlook information, as it's much harder to read and analyze in data format. That's where we come in. Our goal in this book is to open up the door to you to data visualization. With step-by-step guides that will take you from the basic creation of visual charts all the way through to complex geographical location information driven by Google Maps and Google Docs (Drive).
HTML5 and JavaScript are leading the new paths for data visualization and are moving us away from traditional client-side graph creation in Adobe Flash or server-side generated images. With the maturing of browsers, they are becoming more capable and solid than ever before. This is a perfect time to start transitioning the creation of graphs to HTML/JavaScript. But where do you start, and what is the best way to create the specific graph/map your project needs?
With that said, our goal in this book is to run through, showcase, and teach all the critical skills needed in the HTML5/JavaScript age of data visualization. Our goal is to help you make the right choice when you need to build a custom graphic or graph/chart and to help you choose the right way between creating it on your own or using third-party, small/large tools to create the graphic your task needs.
Although this is a cookbook, I've painstakingly organized it topic by topic in a very linear way, making it a great read from start to end. As such, I personally recommend that you sit back and actually read it from start to finish, and if you do so, you will learn in the process everything you ever needed to know about the two-dimensional Canvas API, how to create shapes, interaction, and various graphs/charts, and how to create them from scratch in HTML5 Canvas. You will learn how to work with and modify third-party tools, working with the Google Visualization API, Google Maps, and Google Docs. Woven throughout the book are various data formats from basic strings, external files, XML, and Google Docs to Twitter search results. As such, you will get an extra practice in loading, modifying, and working with data in JavaScript.
By the end of this book, you will have a strong working foundation in data visualization, graphing, data strategy, and HTML5 Canvas.
Chapter 1, Drawing Shapes in Canvas, introduces you to working with canvas. We will spend the majority of our time working with canvas when creating our charts. In this chapter, we will focus on getting to know how canvas works and how to create custom shapes with the two-dimensional canvas API.
Chapter 2, Advanced Drawing in Canvas, continues where we left off in Chapter 1 as we master our skills in canvas by adding to our tool belt various functions. We will be working with curves, images, text, and even pixel manipulation.
Chapter 3, Creating Cartesian-based Graphs, presents our first cluster of charts under the microscope, Cartesian-based graphs. Altogether this graph style is relatively simple; it opens the door to amazingly creative ways of exploring data. In this chapter, we will lay down the foundations to building charts, and with them, will continue and expand our overall canvas knowledge.
Chapter 4, Let's Curve Things Up, leverages the capability of creating non-linear charts to represent multidimensional data. In this chapter we will create Bubble, Pie, Doughnut, Radar, and Tree charts.
Chapter 5, Getting Out of the Box, progresses into more out-of-the-box, less commonly used charts and revisits some of our old charts to incorporate into them dynamic data or change their layout. In this chapter, we will create a funnel chart, add interactivity to our charts, create a recursive tree chart, add user interaction, and finish up with creating an interactive click meter.
Chapter 6, Bringing Static Things to Life, introduces JavaScript object-oriented programming, creating from scratch an animation library, adding multiple layers of canvas, and finishing up with creating a legend that is aware of its surrounding. This chapter will break us into a few new habits by first making everything dynamic followed by creating a more object-oriented program so it's easier for us to differentiate between tasks and reduce our code footprint.
Chapter 7, Depending on the Open Source Sphere, introduces you to the various libraries. The open source 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 standalone code, while others depend on other platforms. Our goal in this chapter is both to showcase what we think are the best, most creative options online, and with it, to also learn the new skill of customizing third-party tools and expanding their features beyond their available documentation.
Chapter 8, Playing with Google Charts, explores the Google visualization API, task by task. We will look at the steps involved to create a chart and integrate it with the charting API. In the process, we will create new graphs and explore the core capabilities of this library.
Chapter 9, Using Google Maps, explores 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 of how to work with maps, we will have a very stable background that will enable us to create many cutting-edge, cool projects integrating data and data visualization.
Chapter 10, Maps in Action, ties in more deeply to our topic of data visualization and mapping. 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.
Appendix, Picking Your Graphics Technology, will explore other alternative options not covered in this book. The goal of this appendix is to set the environment up and enable you to have a better understanding of other graphing options. The appendix is not present in the book but is available as a free download at the following link:
http://www.packtpub.com/sites/default/files/downloads/3707OT_Appendix_Final.pdf
You will need to have some basic background knowledge of HTML and JavaScript or a comparable programming language.
This is not a beginner's book but is intended for JavaScript developers who want to expand their skills into graphing, canvas, object-oriented programming in practice, third-party modification, and overall data strategy and data visualization.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "Set up our grayStyle Styling Object to be our default style:"
A block of code is set as follows:
var aGray = [
{
stylers: [{saturation: -100}]
}
];When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
map.mapTypes.set('grayStyle', grayStyle);
map.setMapTypeId('grayStyle');New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Select the Services option from the left-hand side menu:"
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title through the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
The code files are also available at http://02geek.com/books/html5-graphics-and-data-visualization-cookbook.html.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website, or added to any list of existing errata, under the Errata section of that title.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.