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