Book Image

HTML5 Graphing and Data Visualization Cookbook

By : Ben Fhala
Book Image

HTML5 Graphing and Data Visualization Cookbook

By: Ben Fhala

Overview of this book

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 (17 chapters)
HTML5 Graphing and Data Visualization Cookbook
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Index

A

  • aColorsLength variable / How it works...
  • addColorStop method / How it works...
  • addColumn method / How it works...
  • addDots function / How it works...
  • addDots method / How to do it...
  • addLine function / How it works...
  • addRows method / How it works...
  • addStock function / How it works...
  • advanced interactive marker
    • building / Building an advanced interactive marker, How to do it..., How it works...
    • working / How it works...
  • animated 3D chart (canvas3DGraph)
    • creating / Creating an animated 3D chart (canvas3DGraph), Getting ready, How to do it...
    • working / How it works...
  • animateSeconds recursive function / How to do it...
  • animateStrokeWidth function / How to do it...
  • Animator object
    • updating / Updating the Animator object
  • animQue array / How it works...
    • about / How it works...
  • appendRadioButton function / Creating the radio buttons dynamically
  • application
    • OOP perspective, moving to / Moving to an OOP perspective, Getting ready
  • arcs
    • drawing / Drawing arcs, How to do it..., How to do it...
  • arguments array / How it works...
  • aTotal array
    • about / There's more...

B

  • bar chart
    • building, from scratch / Building a bar chart from scratch, Getting ready, How to do it...
    • about / Building a bar chart from scratch
    • data set, defining / How to do it...
    • graph outlines, defining / How to do it...
    • chart outlines, defining / How to do it...
    • data bars, creating / How to do it...
    • working / How it works...
    • code, revisiting / Revisiting the code
    • fillChart function, using / Using the fillChart function
    • createBars function, using / Using the createBars function
  • barStyle property / How it works...
  • baseCanvas object / Moving our base canvas element into our constructor
  • basic shapes
    • starting / Starting from basic shapes, Getting ready, How it works...
  • beginPath method / How it works...
    • about / BeginPath method and closePath method
  • bezier curve
    • creating / Creating a Bezier curve, Getting ready, How to do it..., How it works...
  • bubble chart
    • building / Building a bubble chart, Getting ready, How to do it...
    • working / How it works...
    • bubbles text format, improving / Improving our bubbles' text format
  • buildTwitterHTML method / How it works..., How to do it...

C

  • candlestick chart (stock chart)
    • creating / Building a candlestick chart (stock chart), Getting ready, How to do it...
    • working / How it works...
  • canvas
    • shapes, drawing / Introduction
    • about / Graphics with 2D canvas
    • curves, creating / Drawing arcs
    • arcs, drawing / Getting ready, How to do it..., How to do it...
    • curves, drawing with control point / Drawing curves with a control point, How to do it..., How it works...
    • bezier curve, creating / Creating a Bezier curve, Getting ready, How to do it..., How it works...
    • images, integrating into art / Integrating images into our art, How to do it..., There's more...
    • text, drawing with / Drawing with text, How to do it..., How it works...
    • pixel manipulation / Understanding pixel manipulation, How to do it..., How it works...
  • canvas3DGraph
    • about / Creating an animated 3D chart (canvas3DGraph)
    • creating / Creating an animated 3D chart (canvas3DGraph), Getting ready, How to do it...
  • changeLineView function / How to do it...
  • chartInfo parameter / How it works...
  • chartInfo variable / How it works...
  • chart properties
    • customizing, with options object / Customizing the chart properties with an options object, How to do it..., There's more...
  • ChartWrapper
    • used, for creating Google charts / Creating charts using the ChartWrapper, How to do it..., How it works...
  • clearRect method / There's more...
  • clock
    • building, with RaphaelJS / Building a clock with RaphaelJS, Getting ready, How to do it...
  • closePath method / How it works...
    • about / BeginPath method and closePath method
  • closeYOffset variable / How it works...
  • complex shapes
    • creating / Creating complex shapes, Getting ready, How to do it..., How it works..., There's more...
    • flag strips, drawing / How to do it...
    • createTriangle function, creating / How to do it...
  • context-aware legend
    • creating / Creating a context-aware legend, How to do it...
    • createLegend method, updating / How to do it...
    • updateLegend method, updating / How to do it...
    • event listener onMouseMoveArea, changing / How to do it...
    • fillChart method / How to do it...
    • working / How it works...
  • context parameter / How it works...
  • context variable / How to do it...
  • controls, Google maps
    • customizing / Customizing controls and overlapping maps, Getting ready, How to do it...
  • createBars function
    • using / Using the createBars function
  • createDots function
    • about / How it works...
  • createLinearGradient method / How it works...
  • createNode function / How it works...
  • createOutline function / How it works...
  • createSpider function / How to do it...
  • createWaterfall function
    • about / There's more...
  • currentRadian / How it works...
  • currentXIndex variable / How it works...
  • curves
    • drawing, with control point / Drawing curves with a control point, How to do it..., How it works...

D

  • dashboard
    • adding, to Google charts / Adding a dashboard to charts, How to do it..., How it works...
  • data source
    • changing, to Google Spreadsheet / Changing data source to Google Spreadsheet, How to do it..., How it works..., There's more...
  • doughnut chart
    • about / Using a doughnut chart to show relationships
    • used, for showing relationships / Using a doughnut chart to show relationships, How to do it..., How it works...
    • working / How it works...
    • outline, adding / Adding an outline
    • legend, creating / Creating a legend
  • drawChart function / How to do it...
    • optimizing / Optimizing the drawChart function
  • drawChart update code / How to do it...
  • drawDataWeb method / How it works...
  • drawImage function / Scaling images
  • drawImage method / How it works...
  • drawRect method / How it works...
  • drawTree function
    • about / How to do it...
  • drawTreeMap function
    • creating / How to do it...
    • turning, into recursive function / Turning drawTreeMap into a recursive function

E

  • ECMAScript for XML (E4X)
    • about / Getting ready
    • working / How it works...
    • online resources / How it works...
  • elementStatus / How to do it...
  • elementValue*stepSize element
    • about / How it works...
  • elementValue variable
    • about / How it works...

F

  • fadeOutImage / How to do it...
  • featureType property / How it works...
  • fillChart function
    • about / Using the fillChart function
    • using / Using the fillChart function
  • fillChart method / Moving our base canvas element into our constructor
  • fillRect method / How it works...
  • fill shapes
    • creating, in line chart / Creating fill shapes
  • fillStyle method / How it works...
  • fillText / How to do it...
  • fillTriangle() function / How it works...
  • flotJS
    • about / Charting over time (flotJS)
    • URL / Getting ready
    • working / How it works...
  • flying brick chart (waterfall chart)
    • creating / Creating the flying brick chart (waterfall chart), Getting ready, How to do it...
    • working / How it works...
  • formatData function / How it works...
  • formatter function
    • about / There's more...

G

  • $.getJSON function / How it works...
  • gauge meter (jqPlot)
    • animating / Animating a gauge meter (jqPlot), How to do it...
    • working / How it works...
  • gData array / How it works...
  • geographic chart
    • creating, with Google visualization API / Creating a geographic chart with Google Visualization API, Getting ready, How to do it...
    • smaller areas, making visible / Making smaller areas more visible
  • getData function
    • about / The GetData function
  • getImageData function / How it works...
  • getPanes method / How it works...
  • getPosition method / How to do it...
  • google.maps.LatLng object / How to do it...
  • google.maps.MapTypeId.HYBRID
    • about / Map types
  • google.maps.MapTypeId.ROADMAP
    • about / Map types
  • google.maps.MapTypeId.SATELLITE
    • about / Map types
  • google.maps.MapTypeId.TERRAIN
    • about / Map types
  • google.maps.OverlayView object / How it works...
  • Google API key
    • obtaning / Obtaining a Google API key, How to do it...
    • working / How it works...
  • Google Charts
    • pie chart, creating / Getting started with a pie chart, How to do it..., How it works...
    • chart type, changing / Changing the chart type
    • creating, ChartWrapper used / Creating charts using the ChartWrapper, How to do it...
    • chart, changing in one line / Changing a chart in one line
    • data source, changing to Google Spreadsheet / Changing data source to Google Spreadsheet, How to do it..., How it works...
    • chart properties, customizing with options object / Customizing the chart properties with an options object, How to do it..., How it works...
    • dashboard, adding / Adding a dashboard to charts, How to do it..., How it works...
  • Google map
    • building / Building a Google map, How to do it..., How it works...
    • latitude and longitude, working with / Working with latitude and longitude
    • map types / Map types
    • markers and events, adding / Adding markers and events, How to do it..., How it works...
    • maps, overlapping / Customizing controls and overlapping maps, How to do it..., How it works...
    • controls, customizing / Customizing controls and overlapping maps, How to do it..., How it works...
    • maps, redesigning using styles / Redesigning maps using styles, Getting ready, How to do it..., How it works...
    • Twitter, connecting to / Connecting a Twitter feed to a Google map, Getting ready, How to do it..., How it works...
  • Google maps
    • features / Introduction
    • overlapping / Customizing controls and overlapping maps, Getting ready, How to do it...
    • redesigning, styles used / Redesigning maps using styles, Getting ready, How to do it..., How it works...
  • Google maps, creating
    • geographic chart, creating with Google visualization API / Creating a geographic chart with Google Visualization API, How to do it..., How it works...
    • Google API key, obtaining / Obtaining a Google API key, How to do it...
  • GoogleMapTraveler.prototype.nextPathPoint method / There's more...
  • GoogleMapTraveler object / How to do it..., How it works...
  • gradients
    • using, in text / Using gradients in your text
  • graphical layers
    • stacking / Stacking graphical layers, Getting ready, How to do it...
    • working / How it works...
    • drawChart function, optimizing / Optimizing the drawChart function
    • code, streamlining / Further streamlining our code
    • radio buttons, creating / Creating the radio buttons dynamically
  • graphics, with 2D canvas
    • about / Graphics with 2D canvas
    • HTML5 document, creating / How to do it...
    • canvas element, creating / How to do it...
    • JavaScript file, importing into HTML document / How to do it...
    • onLoad listener, adding / How to do it...
    • updateCanvas function, creating / How to do it...
    • rectangle, creating / How to do it...
    • helper variables, creating / How to do it...
    • nested loop, creating / How to do it...
    • working / How it works..., There's more...
  • grayStyle styling object / How to do it...

H

  • helper global variables / How to do it...
  • helveticaForClock / How to do it...
  • hideOverlayCopy method / How to do it...
  • href buttons / How it works...

I

  • imageData.data array / How it works...
  • image grayscale
    • making / Making an image grayscale
  • images
    • integrating, into art / Integrating images into our art, How to do it..., There's more...
    • scaling / Scaling images
    • control, adding / Adding even more control
    • using, as fill / Using images as a fill
  • independent layers
    • animating / Animating independent layers, How to do it..., How it works...
    • Animator constructor, creating / How to do it...
    • add method, creating / How to do it...
    • _animate method, creating / How to do it...
  • InfoVis
    • about / Making a sunburst chart with InfoVis
    • used, for making sunburst chart / Making a sunburst chart with InfoVis, Getting ready, How to do it...
    • working / How it works..., There's more...
  • InfoWindow
    • about / Building an advanced interactive marker, Getting ready
    • multiple tweets, adding / Adding multiple tweets into an InfoWindow bubble, Getting ready, How to do it..., How it works...
  • infoWindow object / How it works...
  • init function / How to do it...
  • innerRadius / How it works...
  • interactive click meter
    • creating / Making an interactive click meter, How to do it...
    • working / How it works...
  • interactive Google map
    • building / Final project: building a live itinerary, Getting ready, How to do it...
  • interactive legend
    • creating / Adding an interactive legend, How to do it...
    • createLegend method, creating / How to do it...
    • updateLegend method, creating / How to do it...
    • working / How it works..., There's more...
  • intervalColors function / How it works...
  • intervalOuterRadius / How it works...
  • intervals function / How it works...
  • isStarting variable / How it works...

J

  • JavaScript Object Notation (JSON) / How it works...
  • jqPlot
    • using / Getting ready
  • JQuery
    • using / Getting ready

L

  • label parameter / How it works...
  • latitude and longitude
    • working with / Working with latitude and longitude
  • latLng property
    • about / How it works...
  • levelDistance property / There's more...
  • line charts
    • about / Building line charts
    • building / Building line charts, Getting ready, How to do it...
    • formatData function, creating / How to do it...
    • working / How it works...
    • switch mode, enabling between dots and lines / Enabling switching mode between dots and lines
    • fill shapes, creating / Creating fill shapes
    • making interactive / Revisiting lines: making the line chart interactive, Getting ready, How to do it..., How it works...
    • logic of onChangedRadio, breaking / Breaking down the logic of onChangedRadio
  • lineHeight variable / There's more...
  • listener function / How to do it...
  • live flag sample
    • in action / How it works...
  • live itinerary project
    • building / Final project: building a live itinerary, Getting ready, How to do it...
    • working / How it works..., There's more...
  • look and feel, markers
    • customizing / Customizing the look and feel of markers, How to do it..., How it works...

M

  • map types
    • about / Map types
  • MarkerCounter constructor / How to do it...
  • markers
    • look and feel, customizing / Customizing the look and feel of markers, Getting ready, How to do it..., How it works...
  • markers and events
    • adding, to Google map / Adding markers and events, How to do it..., How it works...
  • Math.cos()
    • using / Revisiting Math.cos() and Math.sin()
  • Math.min method
    • about / There's more...
  • Math.sin()
    • using / Revisiting Math.cos() and Math.sin()
  • meterGaugeRenderer library / How it works...
  • midRadian variable / Revisiting Math.cos() and Math.sin()
  • moveTo function / How it works...
  • multiple tweets
    • adding, into InfoWindow / Adding multiple tweets into an InfoWindow bubble, Getting ready, How to do it...
  • MyFirstObject function / How it works...

N

  • nextPathPoint method / How to do it...

O

  • onAdd method / How it works...
  • onChangedRadio callback function / How to do it...
  • onChangedRadio function / How to do it...
    • breaking / Breaking down the logic of onChangedRadio
  • onLoad event / Getting ready
  • onload event / How to do it...
  • onreadystatechange callback property / How it works...
  • onTimeReset function / How to do it...
  • onTripDataReady listener / How to do it...
  • OOP perspective
    • code, converting / How to do it...
    • functions, updating / How to do it...
    • helper function, creating / How to do it...
    • init function, rewriting / How to do it...
    • working / How it works...
    • base canvas element, moving into constructor / Moving our base canvas element into our constructor
    • HTML components, creating / Creating all the HTML components dynamically
    • lose ends, removing / Removing the lose ends
    • charts, creating for testing / Testing our work by creating two charts
  • over time (flotJS)
    • charting / Charting over time (flotJS), Getting ready, How to do it...
    • ready event, creating / How to do it...
    • updateChart, creating / How to do it...
    • getData, creating / How to do it...

P

  • paths
    • animating / Animating paths
  • pie chart
    • creating / Creating a pie chart, Getting ready, How to do it..., Getting started with a pie chart, How to do it...
    • working / How it works..., How it works...
    • Math.cos() and Math.sin(), using / Revisiting Math.cos() and Math.sin()
  • pixel manipulation
    • about / Getting ready, How to do it...
    • working / How it works...
    • image grayscale, making / Making an image grayscale
    • pixel reversing / Pixel reversing
  • Pixel reversing
    • about / Pixel reversing
  • plotBar function
    • about / The logic behind plotBar
  • plugin coding
    • about / There's more...
  • projection.fromLatLngToDivPixel method / How it works...
  • pyramid chart
    • about / Going through a funnel (a pyramid chart)
    • creating / Going through a funnel (a pyramid chart), How to do it...
    • working / How it works...
    • findLine function / Making findLine smarter
    • logic in init function, changing / Changing the logic in init to create shapes
    • text, adding to graph / Adding text into our graph

Q

  • quadratic curve
    • about / Drawing curves with a control point
    • drawing / How to do it...

R

  • radar
    • about / Leveraging a radar
  • radar chart
    • about / Leveraging a radar
    • creating / How to do it...
    • working / How it works...
    • rotated legend, adding / Adding a rotated legend
  • radio buttons
    • creating / Creating the radio buttons dynamically
  • RaphaelJS
    • used, for building clock / Building a clock with RaphaelJS, Getting ready, How to do it...
    • working / How it works...
  • readyState variable / How it works...
  • rectangles
    • layering, for creating flag of Greece / Layering rectangles to create the flag of Greece, Getting ready, How it works...
    • creating / There's more...
  • rect method / How it works...
  • refreshChart function / How to do it...
  • refreshRate property / How it works...
  • renderLine method / How to do it...
  • renderList object / How it works...
  • render options
    • adding, to stock chart / Adding other render options to our stock chart
  • renderOptions object / How it works...
  • ren parameter / How it works...
  • restore method / How it works...
  • rotate method / How it works...

S

  • save method / How it works...
  • scatter chart
    • about / Spreading data in a scatter chart
    • data, spreading / Spreading data in a scatter chart, Getting ready, How to do it..., How it works...
    • working / How it works...
  • setInterval / There's more...
  • setOptions function / There's more...
  • setPosition method / How to do it..., There's more...
  • shadows and glows
    • adding, in text / Adding shadows and glows
  • shapes
    • creating, paths used / Creating shapes using paths, Getting ready, How it works...
    • vertices, adding / Adding more vertices, Getting ready, How to do it..., How it works...
    • overlapping / Overlapping shapes to create other shapes, Getting ready, How to do it...
  • showTweet function / How it works...
  • spider chart / Leveraging a radar
  • startIndex parameter / How it works...
  • startingSpeed variable / How it works...
  • stock chart
    • about / Building a candlestick chart (stock chart)
    • creating / Building a candlestick chart (stock chart), Getting ready, How to do it...
    • working / How it works...
    • render options, adding / Adding other render options to our stock chart
  • stroke() method / There's more...
  • strokeStyle values / How to do it...
  • styleFormatter function
    • about / The logic behind styleFormatter
  • style properties, Google maps
    • visibility / How it works...
    • gamma / How it works...
    • hue / How it works...
    • lightness / How it works...
    • saturation / How it works...
  • sunburst chart
    • creating, with InfoVis / Making a sunburst chart with InfoVis, Getting ready, How to do it...

T

  • text
    • drawing with / Drawing with text, How to do it..., How it works...
    • gradients, using / Using gradients in your text
    • shadows and glows, adding / Adding shadows and glows
  • this.barData property / How it works...
  • tickFormater method / Charting over time (flotJS)
  • ticks function / How it works...
  • trailCount variable / How it works...
  • translateCSV formatting function / How it works...
  • translateCSV function / How to do it...
  • translate method / How it works...
  • Traveler marker
    • about / Understanding the Traveler marker
  • tree chart
    • structuring / Structuring a tree chart, How to do it...
    • working / How it works..., There's more...
  • tree data
    • turning, into recursive data / Turning the data and total to recursive data
  • tree mapping
    • about / Tree mapping and recursiveness, How to do it...
    • working / How it works...
    • init function, updating / Updating the init function – recalculating the total
    • drawTreeMap, turning into recursive function / Turning drawTreeMap into a recursive function
    • tree data, turning into recursive data / Turning the data and total to recursive data
    • user interaction, adding / Adding user interaction into tree mapping, Getting ready, How to do it..., How it works...
  • trialingArray array / How it works...
  • Twitter feed
    • connecting, to Google map / Connecting a Twitter feed to a Google map, Getting ready, How to do it..., How it works...
  • TwitterMarker class / How it works...
  • TwitterMarker constructor / How to do it...

U

  • updateCanvas function / How it works...
  • UpdateChart function
    • about / The UpdateChart function
  • updateCumulativeChartInfo function
    • about / There's more...
  • updateMeter function / How to do it...
    • creating / Creating the updateMeter function
  • user interaction
    • adding, to tree mapping / Adding user interaction into tree mapping, Getting ready, How to do it..., How it works...

V

  • vector drawing tool
    • about / Understanding pixel manipulation
  • vertices
    • adding, to shapes / Adding more vertices, Getting ready, How to do it..., How it works...

W

  • waterfall chart
    • creating / Creating the flying brick chart (waterfall chart)
    • about / Creating the flying brick chart (waterfall chart)
    • format of numbers, clearing / Cleaning the format of numbers
  • weeklyCapture function
    • about / There's more...
  • window.onload callback function / How to do it...

X

  • XMLHttpRequest object / How it works...