JavaScript and jQuery for Data Analysis and Visualization

Chapter 12Incorporating Symbols

What's in This Chapter

• Learning how symbols can benefit charting
• Leveraging D3 to render symbols using SVG
• Making symbols react to the proximity of the mouse
• Animating changes to symbols.
• Using the Ignite UI igDataChart to automagically plot symbols
• Displaying metrics on a symbol with bubble charts

CODE DOWNLOAD The wrox.com code downloads for this chapter are found at www.wrox.com/go/javascriptandjqueryanalysis on the Download Code tab. The code is in the chapter 12 download and individually named according to the names throughout the chapter.

Chapters 9 through 11 cover some of the mechanics of various chart types using D3, Raphaël, and the Google Charts API. A large focus of these chapters was on charting types where each discrete data value was represented by a separate visual element. This chapter explores charting types, such as line and area, that provide an interpolated shape that connects all the data points. When dealing with such an interpolated shape, it can be useful to use a symbol, or marker, to indicate exactly where the underlying data values occur in the x-y space of the plot area.

You can use symbols for more than delineating the exact location of data values in an interpolated shape. In fact, some chart types consist only of symbols, such as a scatter chart or a bubble chart. Or, you might want to use a custom symbol to indicate the location of an event on a time series chart, for example.

So, this chapter explains ...