You are previewing HTML5 Graphing and Data Visualization Cookbook.
O'Reilly logo
HTML5 Graphing and Data Visualization Cookbook

Book Description

Get a complete grounding in the exciting visual world of Canvas and HTML5 using this recipe-packed cookbook. Learn to create charts and graphs, draw complex shapes, add interactivity, work with Google maps, and much more.

  • 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

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

    Table of Contents

    1. HTML5 Graphing and Data Visualization Cookbook
      1. Table of Contents
      2. HTML5 Graphing and Data Visualization Cookbook
      3. Credits
      4. About the Author
      5. About the Reviewer
      6. www.PacktPub.com
        1. Support files, eBooks, discount offers and more
          1. Why Subscribe?
          2. Free Access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      8. 1. Drawing Shapes in Canvas
        1. Introduction
        2. Graphics with 2D canvas
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        3. Starting from basic shapes
          1. Getting ready
          2. How to do it...
          3. How it works...
        4. Layering rectangles to create the flag of Greece
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. BeginPath method and closePath method
        5. Creating shapes using paths
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        6. Creating complex shapes
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        7. Adding more vertices
          1. Getting ready
          2. How to do it...
          3. How it works...
        8. Overlapping shapes to create other shapes
          1. Getting ready
          2. How to do it...
          3. How it works...
      9. 2. Advanced Drawing in Canvas
        1. Introduction
        2. Drawing arcs
          1. Getting ready
          2. How to do it...
          3. How to do it...
        3. Drawing curves with a control point
          1. Getting ready
          2. How to do it...
          3. How it works...
        4. Creating a Bezier curve
          1. Getting ready
          2. How to do it...
          3. How it works...
        5. Integrating images into our art
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Scaling images
            2. Adding even more control
            3. Using images as a fill
        6. Drawing with text
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Using gradients in your text
            2. Adding shadows and glows
        7. Understanding pixel manipulation
          1. Getting ready
          2. How to do it...
          3. How it works...
            1. Making an image grayscale
            2. Pixel reversing
      10. 3. Creating Cartesian-based Graphs
        1. Introduction
        2. Building a bar chart from scratch
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Revisiting the code
            2. Using the fillChart function
            3. Using the createBars function
        3. Spreading data in a scatter chart
          1. Getting ready
          2. How to do it...
          3. How it works...
        4. Building line charts
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Enabling switching mode between dots and lines
            2. Creating fill shapes
        5. Creating the flying brick chart (waterfall chart)
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Cleaning the format of numbers
            2. Other tasks I've left open
        6. Building a candlestick chart (stock chart)
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Adding other render options to our stock chart
      11. 4. Let's Curve Things Up
        1. Introduction
        2. Building a bubble chart
          1. Getting ready
          2. How to do it...
          3. How it works...
        3. Creating a pie chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Revisiting Math.cos() and Math.sin()
            2. Improving our bubbles' text format
        4. Using a doughnut chart to show relationships
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Adding an outline
            2. Creating a legend
          5. See also
        5. Leveraging a radar
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Adding a rotated legend
        6. Structuring a tree chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
      12. 5. Getting Out of the Box
        1. Introduction
        2. Going through a funnel (a pyramid chart)
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Making findLine smarter
            2. Changing the logic in init to create shapes
            3. Adding text into our graph
        3. Revisiting lines: making the line chart interactive
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Breaking down the logic of onChangedRadio
          5. See also
        4. Tree mapping and recursiveness
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Updating the init function – recalculating the total
            2. Turning drawTreeMap into a recursive function
            3. Turning the data and total to recursive data
          5. See also
        5. Adding user interaction into tree mapping
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Going back to the main treemap
        6. Making an interactive click meter
          1. How to do it...
          2. How it works...
      13. 6. Bringing Static Things to Life
        1. Introduction
        2. Stacking graphical layers
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Optimizing the drawChart function
            2. Further streamlining our code
            3. Creating the radio buttons dynamically
        3. Moving to an OOP perspective
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Moving our base canvas element into our constructor
            2. Creating all the HTML components dynamically
            3. Removing the lose ends
            4. Testing our work by creating two charts
        4. Animating independent layers
          1. Getting ready
          2. How to do it...
          3. How it works...
        5. Adding an interactive legend
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        6. Creating a context-aware legend
          1. Getting ready
          2. How to do it...
          3. How it works...
      14. 7. Depending on the Open Source Sphere
        1. Introduction
        2. Animating a gauge meter (jqPlot)
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Creating the updateMeter function
        3. Creating an animated 3D chart (canvas3DGraph)
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. The logic behind plotBar
            2. The logic behind styleFormatter
        4. Charting over time (flotJS)
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. The GetData function
            2. The UpdateChart function
        5. Building a clock with RaphaelJS
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Animating paths
        6. Making a sunburst chart with InfoVis
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Where is the copy?
      15. 8. Playing with Google Charts
        1. Introduction
        2. Getting started with a pie chart
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Changing the chart type
        3. Creating charts using the ChartWrapper
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Changing a chart in one line
        4. Changing data source to Google Spreadsheet
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        5. Customizing the chart properties with an options object
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        6. Adding a dashboard to charts
          1. Getting ready
          2. How to do it...
          3. How it works...
      16. 9. Using Google Maps
        1. Introduction
        2. Creating a geographic chart with Google Visualization API
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Making smaller areas more visible
        3. Obtaining a Google API key
          1. Getting ready
          2. How to do it...
          3. How it works...
        4. Building a Google map
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Working with latitude and longitude
            2. Map types
        5. Adding markers and events
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        6. Customizing controls and overlapping maps
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        7. Redesigning maps using styles
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
      17. 10. Maps in Action
        1. Introduction
        2. Connecting a Twitter feed to a Google map
          1. Getting ready
          2. How to do it...
          3. How it works...
        3. Building an advanced interactive marker
          1. Getting ready
          2. How to do it...
          3. How it works...
        4. Adding multiple tweets into an InfoWindow bubble
          1. Getting ready
          2. How to do it...
          3. How it works...
        5. Customizing the look and feel of markers
          1. Getting ready
          2. How to do it...
          3. How it works...
        6. Final project: building a live itinerary
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Understanding the Traveler marker
            2. Updating the Animator object
      18. Index