| D3.js By Example |
Page 2 of 2
Author: Michael Heydt Chapter 8 Adding User Interactivity Interacting with data allows the user to move data, hide data, drill down, and reorder data – allowing more insight into the data. The chapter opens with a look at mouse events, allowing the user to interact with D3 visualizations. Sample code is provided to track the mouse position via the mousemove event, entering and leaving an object can be discerned via the mouseenter and mouseout events, and finally the mouseclick event is illustrated. The examples link events to code. The chapter next looks at using behaviours to drag, pan, and zoom. The earlier bar charts are extended to introduce some interactivity (e.g. color change). The chapter ends with a look at highlighting selected items using brushes, this can identify a subset of data that the user might want to drill down into. Online examples of brushes are given, together with the use of ‘focus + context’ to illustrate a subset of data in a wider context. Overall it provides a useful account of how to introduce interactivity into D3 visualization. Chapter 9 Complex Shapes Using Paths D3 provides various objects (path generators) to create complex paths, used for complex shapes. The chapter opens with a look at the common design pattern used for path generator usage. This is followed by examples, including: creation of lines, areas, arc, pie chart, symbols, and curved lines. The chapter ends with a look at the creation of line graphs using various built-in generators. D3 uses interpolation to join your data value points, various types of complex lines are possible. Chapter 10 Using Layouts to Visualize Series and Hierarchical Data Layouts are often viewed as the most powerful feature of D3, allowing the creation of complex graphs. The graphs/layouts discussed (with code), are:
This chapter provides a useful overview of some of the more advanced functionality of D3. Chapter 11 Visualizing Information Networks This chapter takes a detailed look at the network diagram graph and provides an interesting look at the use of D3 for network diagrams. This builds upon the flow and hierarchy concepts given in the previous chapter, allowing the visualization of complex network (e.g. relationships). The chapter opens with a look at the force-directed graph, commonly used to render network information. Various terms are defined (e.g. charge, gravity), before creating a simple example force-directed graph, showing the relationships between a small group of people. The example continues, showing how link-distance can be used to spread out the nodes, and how adding repulsion can prevent crossed links.
Chapter 12 Creating Maps with GeoJSON and TopoJSON D3 has various functions for creating maps, or to overlay on existing maps. GeoJSON is a form of JSON that encodes geographical data, and TopoJSON is a more compressed form of GeoJSON. The chapter opens with a quick overview of TopoJSON and GeoJSON, explaining how maps are represented and rendered. Next, a map of the USA is created, and enhanced with state boundaries. The chapter continues by creating a flat map of the world, this is then enhanced to show a spherical map, then color is added to identify each country. Interactivity is added to the map using: panning and zooming, highlighting country borders with mouseover, and rotating the globe with the mouse. The chapter ends with a look at annotating the map, traditionally this involves complex math, but using the D3 library makes it much easier. The examples discussed cover: labelling states, placing symbols on the map, and creating a choropleth (i.e. a gradient color map) using the rgb() function. This chapter provides a very interesting look at how D3 functionality can be used with maps. Chapter 13 Combining D3.js and AngularJS AngularJS is a JavaScript framework that can be used with D3 to create dynamic and modular web applications. An introductory knowledge is AngularJS is needed to understand the examples fully. The first example uses an AngularJS controller to create the data, which is rendered as a D3 bar chart. This example is extended to create another directive (view), using the same data is visualized as a donut. Finally, a degree of interactivity is added. This chapter shows how D3 can be integrated into AngularJS and its modular framework. Conclusion This book aims to explain the popular data visualization framework D3 using examples, and certainly succeeds. The book is well written, and easy to read. There are helpful diagrams, step-by-step code walkthroughs, inter-chapter links, and links to further information. The book introduces D3 with simple initial examples, and adds new functionality as the book progresses, providing steadily increasing knowledge. To get the most out of the book, you need some basic understanding of programming, but not too much. For me, the highlight was the use of bl.ocks.org to run the example code, making it much easier to follow along. Some of the grouping of the topics within the chapters seems odd (e.g. including loading data with scales). Sometimes, terms are used before being explained (e.g. DOM, SVG). It might have been useful to have a section on where to go to get further information (newsletters, blogs, websites etc). If you want to learn data visualization using the D3 framework, I can heartily recommend this instructive example-led book. 
|
||||||
| Last Updated ( Tuesday, 20 February 2018 ) |