HTML5 Graphing and Data Visualization Cookbook


HTML5 Graphing and Data Visualization Cookbook
eBook: $29.99
Formats: PDF, PacktLib, ePub and Mobi formats
$25.49
save 15%!
Print + free eBook + free PacktLib access to the book: $79.98    Print cover: $49.99
$49.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Support
Sample Chapters
  • Build interactive visualizations of data from scratch with integrated animations and events
  • Draw with canvas and other html5 elements that improve your ability to draw directly in the browser
  • Work and improve existing 3rd party charting solutions such as Google Maps

Book Details

Language : English
Paperback : 344 pages [ 235mm x 191mm ]
Release Date : November 2012
ISBN : 1849693706
ISBN 13 : 9781849693707
Author(s) : Ben Fhala
Topics and Technologies : All Books, Data, Web Development

Table of Contents

Preface
Chapter 1: Drawing Shapes in Canvas
Chapter 2: Advanced Drawing in Canvas
Chapter 3: Creating Cartesian-based Graphs
Chapter 4: Let's Curve Things Up
Chapter 5: Getting Out of the Box
Chapter 6: Bringing Static Things to Life
Chapter 7: Depending on the Open Source Sphere
Chapter 8: Playing with Google Charts
Chapter 9: Using Google Maps
Chapter 10: Maps in Action
Index
  • Chapter 1: Drawing Shapes in Canvas
    • Introduction
    • Graphics with 2D canvas
    • Starting from basic shapes
    • Layering rectangles to create the flag of Greece
    • Creating shapes using paths
    • Creating complex shapes
    • Adding more vertices
    • Overlapping shapes to create other shapes
    • Chapter 2: Advanced Drawing in Canvas
      • Introduction
      • Drawing arcs
      • Drawing curves with a control point
      • Creating a Bezier curve
      • Integrating images into our art
      • Drawing with text
      • Understanding pixel manipulation
      • Chapter 3: Creating Cartesian-based Graphs
        • Introduction
        • Building a bar chart from scratch
        • Spreading data in a scatter chart
        • Building line charts
        • Creating the flying brick chart (waterfall chart)
        • Building a candlestick chart (stock chart)
        • Chapter 4: Let's Curve Things Up
          • Introduction
          • Building a bubble chart
          • Creating a pie chart
          • Using a doughnut chart to show relationships
          • Leveraging a radar
          • Structuring a tree chart
          • Chapter 5: Getting Out of the Box
            • Introduction
            • Going through a funnel (a pyramid chart)
            • Revisiting lines: making the line chart interactive
            • Tree mapping and recursiveness
            • Adding user interaction into tree mapping
            • Making an interactive click meter
              • Chapter 7: Depending on the Open Source Sphere
                • Introduction
                • Animating a gauge meter (jqPlot)
                • Creating an animated 3D chart (canvas3DGraph)
                • Charting over time (flotJS)
                • Building a clock with RaphaelJS
                • Making a sunburst chart with InfoVis
                • Chapter 8: Playing with Google Charts
                  • Introduction
                  • Getting started with a pie chart
                  • Creating charts using the ChartWrapper
                  • Changing data source to Google Spreadsheet
                  • Customizing the chart properties with an options object
                  • Adding a dashboard to charts
                  • Chapter 9: Using Google Maps
                    • Introduction
                    • Creating a geographic chart with Google Visualization API
                    • Obtaining a Google API key
                    • Building a Google map
                    • Adding markers and events
                    • Customizing controls and overlapping maps
                    • Redesigning maps using styles
                    • Chapter 10: Maps in Action
                      • Introduction
                      • Connecting a Twitter feed to a Google map
                      • Building an advanced interactive marker
                      • Adding multiple tweets into an InfoWindow bubble
                      • Customizing the look and feel of markers
                      • Final project: building a live itinerary

                      Ben Fhala

                      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 members of the US Congress, 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 part of teams that have won three Agency of the Year awards. Among Ben's publications are Packt’s HTML5 Graphing and Data Visualization Cookbook.

                      Sorry, we don't have any reviews for this title yet.

                      Code Downloads

                      Download the code and support files for this book.


                      Submit Errata

                      Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                      Errata

                      - 1 submitted: last submission 20 Jun 2014

                      Errata type: Code | Page number: 26

                      The method name: "createTrinagleshould be: "createTriangle"

                       

                      Errata type: Code | Page number: 30

                      startingPositionY + Math.cin(wantedDegree) * Radius

                      should be:

                      startingPositionY + Math.cos(wantedDegree) * Radius

                       

                      Errata type: Code | Page number: 32

                      In step number 4 and 5 of the process of creating the Somalia flag, the method name should be "createStar()" instead of "createStart()"

                       

                      Errata type: Code | Page number: 36

                      In step number 5 of the process of creating the Turkish flag, the method name should be "createStar()" instead of "createStart()"

                      Sample chapters

                      You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                      Frequently bought together

                      HTML5 Graphing and Data Visualization Cookbook +    Mastering Clojure Data Analysis =
                      50% Off
                      the second eBook
                      Price for both: $45.60

                      Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                      What you will learn from this book

                      • Creating graphics in Canvas 2D and draw complex shapes
                      • Building most of the common charts through step-by-step recipes
                      • Adding interactivity to canvas elements and create your own JavaScript animation engine
                      • Discovering many fantastic charting solutions and learn how to deal with their capabilities and how to change them as well
                      • Learning how to work with Google maps , Google Charts, and Google Docs API
                      • Integrating your data into live data, xml driven data, objects, and strings

                      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.

                      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 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.

                      Code Download and Errata
                      Packt Anytime, Anywhere
                      Register Books
                      Print Upgrades
                      eBook Downloads
                      Video Support
                      Contact Us
                      Awards Voting Nominations Previous Winners
                      Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                      Resources
                      Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software