39,59 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
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.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 371
Veröffentlichungsjahr: 2012
Ähnliche
Table of Contents
HTML5 Graphing and Data Visualization Cookbook
HTML5 Graphing and Data Visualization Cookbook
Copyright © 2012 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: November 2012
Production Reference: 1161112
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-84969-370-7
www.packtpub.com
Cover Image by Ben Fhala (<[email protected]>)
Credits
Author
Ben Fhala
Reviewer
Chris Valleskey
Acquisition Editor
Joanna Finchen
Lead Technical Editor
Kedar Bhat
Technical Editors
Prasad Dalvi
Joyslita D'souza
Ankita Meshram
Copy Editors
Brandt D'Mello
Insiya Morbiwala
Aditya Nair
Alfida Paiva
Laxmi Subramanian
Project Coordinator
Michelle Quadros
Proofreader
Chris Smith
Indexer
Hemangini Bari
Graphics
Valentina Dsilva
Production Coordinator
Nilesh R. Mohite
Cover Work
Nilesh R. Mohite
About the Author
Ben Fhala discovered his passion for data visualization six years ago while he was working at Parsons in New York, in their data visualization department PIIM. He is the owner of the online video training school, 02geek.com, and an Adobe ACP. He enjoys spending most of his time learning and teaching, and has a love for visual programming and visualization in general.
Ben has had the honor of developing applications for US Congress members, Prime Ministers, and Presidents around the world. He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been a part of teams that have won three Agency of the Year awards.
I want to thank my cats for supporting me mentally while I was closed down and avoiding the world as I was trying to come up with good ideas for the book. I can't thank my editors Joanna Finchen and Kedar Bhat enough for the insight and help I got from them. For their kindness, support, and mainly their patience with me when I was struggling to fit my ideas into the recipe format.
A very big thanks to my technical reviewer, Chris Valleskey, for the detailed insights and suggestions that made this book better and shaped this book to be a really great one.
Thanks to Oren Ofer, which helped inspire the last recipe. To my students, co-workers, and friends at 02geek.com. Mom, for helping me through the creation of my first book. Nature and Earth for giving me a great place to be in, and the ocean for the great view throughout the writing of this book. Thanks to God for always opening up new doors to me in the most unexpected ways.
And last but definitely not the least, thanks for buying / renting / lending / reading this book.
About the Reviewer
Chris Valleskey is a young and creative thinker who currently lives in Chicago, Illinois. He started freelancing at the age of 17 and continued this role throughout college until graduating in 2011 with a Bachelor of Arts in Graphic Design and Philosophy. Although he has a normal job in the city, he enjoys spending time with his close friends as a part owner in their co-owned company. In his free time he enjoys playing Halo, drinking Mountain Dew, and hanging out with his awesome wife.
I would like to thank my wife Krista for putting up with me, and my friends and family for supporting and encouraging me in everything I do.
www.PacktPub.com
Support files, eBooks, discount offers and more
You might want to visit www.PacktPub.com for support files and downloads related to your book.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books.
Why Subscribe?
Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.
Preface
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.
What this book covers
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
What you need for this book
You will need to have some basic background knowledge of HTML and JavaScript or a comparable programming language.
Who this book is for
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.
Reader feedback
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.
Customer support
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.
Downloading the example code
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.
Errata
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
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.
Questions
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.
Chapter 1. Drawing Shapes in Canvas
In this chapter we will cover:
Introduction
This chapter's main focus is to make a breakthrough into working in canvas. We will spend the majority of our time working with canvas when creating our charts.
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!
