| D3.js By Example |
Page 1 of 2 Author: Michael Heydt This book aims to introduce the popular D3 data visualization framework by means of examples, how does it fare?
Increasingly data visualization is requested as part of the web skill set. This book covers the D3 data visualization framework, from basics to advanced features, using example code throughout. The book is aimed at those new to D3 data visualization or coming from another framework and “...assumes some knowledge of coding and, in particular, experience in coding with JavaScript”. Below is a chapter-by-chapter exploration of the topics covered. Chapter 1 Getting Started with D3.js The book opens by explaining that D3 (Data Driven Documents) is an open source JavaScript library that manipulates HTML documents (via the Document Object Model [DOM]). It’s primarily used in modern browsers, which can manipulate Scalable Vector Graphics (SVG), for data visualization (what the user sees on the web page). D3’s manipulation of the DOM, is similar to the more familiar jQuery framework. However, compared with other visualization frameworks D3 provides a degree of abstraction, allowing it to take advantage of SVG for render specifics. The chapter next looks at some high-level D3 concepts, namely: selection (getting a subset of DOM elements), data binding (linking data to DOM elements), interaction (responding to data changes or events), and modules (these contain built-in functionality). Next, tools are discussed. Helpfully, the website jsbin.com, can be used for the creation, sharing, and running of simple JavaScript applications – all without installing any tools. Additionally, bl.ocks.org is used as a code base for many D3 examples, including those in this book. The book’s examples use Google Chrome and its built-in development tools. The chapter ends by creating and discussing a simple D3 ‘Hello World’ example. This code is then examined in the Chrome developer tools environment. This chapter provides a useful overview of what D3 is, outlines how it achieves data visualization via DOM manipulation, and introduces some useful developer tools. Although the author assumes some experience of JavaScript, it might have been useful to quickly recap what DOM and SVG are, rather than assume everyone knows. The chapter is well written, and easy to read. There are helpful step-by-step code walkthroughs, diagrams, inter-chapter links, and links to further information. Each chapter ends with a helpful summary. These traits apply to the whole book.
Chapter 2 Selections and Data Binding Selections are used to find or create specific elements within the DOM. Some selector examples are discussed, namely: the d3.select() function is used to identify a DOM element, and the d3.selectAll() function is used to identify multiple items. The selector method .style() is used to change an element’s CSS style property, .attr() is used to change an element’s attributes, and .text() to change an element’s text. The advantage of chaining function together is noted. Next, the chapter looks at data binding, the process of associating data with a DOM element. The section explains the relevant data binding functions: .data (data to be bound), .enter (returns selector of new elements to display), and .exit (returns selector of items removed from display). Next, simple examples of binding data are given, including: binding to existing elements, adding and binding new elements, and removing elements. The developer tools environment is used to examine the internals. The chapter ends with a very useful list of tips for performing data binding with D3. This chapter provides a useful introduction to selecting elements and data binding in D3, as always, plenty of code examples are provided, and explained in a step-by-step manner. Chapter 3 Creating Visuals with SVG SVG is a web standard for creating vector-based graphics inside a browser, SVG shows the power of D3. The chapter opens with a look at how SVG provides a degree of abstraction, making it much easier to use and scale than other frameworks. Next, code is provided for drawing various example shapes, namely: circle, ellipse, rectangle, lines, path, and text. The chapter next looks at SVG transformations. Examples are provided for: Rotate (rotates an object a specified number of degrees), Translate (repositions an object within its container), and Scale (changes object’s size by given percentage). Next, groups are discussed, here SVG elements that are grouped together can have a transformation applied at the group level. SVG supports transparent objects, by using the opacity attribute or using the rgba value for a color. The chapter ends with a look at layers, where the SVG objects overlay each other, in a specified order. Overall it provides a useful overview of the power of SVG, together with some example visuals. Chapter 4 Creating a Bar Graph We now look at building various bar charts with SVG. The first example uses an array of data to build the bars using SVG rectangles. This example is extended to add labels of the bar size to the output. The chapter continues with a look at margins and axes, which improve visual presentation. Margins allow spaces between the bars, and also allow space for the axes. The axes allow a scale to be shown. Axes orientation and inversion of labels is also examined. This chapter provides a useful introduction to margins and axes, with helpful example code. There’s a useful tip about putting the axes in a group, so subsequent changes apply to all the elements. Chapter 5 Using Data and Scales This chapter looks at loading data in D3. Examples are provided of loading data in different formats, namely: JSON (JavaScript Object Notation), TSV (Tab Separated Values), and CSV (Comma Separated Values). Since the data may have rows/columns we’re not interested in, and is interpreted as string data, the .map() function is used to select the required data and perform any data conversion. Next attention turns to scales. The purpose of a scale is to map the input domain (range of values) to the output scale (what the user sees), this is achieved via the .scale() function – making it much easier than coding loops and complex math. Examples are provided for the common linear and ordinal scales. The .rangeBands() function is used to size and position bars in a given area. The chapter ends with a complete example, which discusses everything that’s been learned so far. This chapter provides a useful overview about how D3 can load data in various formats. However, the chapter seems an odd mix of topics, does loading data really relate to scales?! Chapter 6 Creating Scatter and Bubble Plots Bar charts show only 1 variable, whereas scatter and bubble plots show multivariate data. Scatter plots show 2 variables, while bubble plots show 3 or 4 variables. The chapter opens with a basic scatter plot showing the correlation between Apple and Microsoft stock prices for 2014. Code is provided to scale the scatter plot. This code is extended, in a step-by-step manner to: use outline circles instead of solid fill circles, add axes, add margins, and add gridlines. The second half of this chapter concerns using bubble plots to visualize 3 or 4 dimensions of data. The dimensions are: X and Y co-ordinates, then usage of different size and/or colour represent the third and fourth dimension. An example bubble plot is described to visualize life expectancy at birth relative to the fertility rate, for all countries in 2013. This is an interesting example, but it might have been better to have a subset of the data, together with the named countries involved (there are no labels on the original - only regions).
Chapter 7 Creating Animated Visuals Animation can be used to show users how data changes over time. In essence, the properties of the objects are updated periodically, and this is reflected in the DOM. Several methods of animation are shown, including: transitions, easing, and timers – each of the code examples is explained, and clicking on the relevant bl.ock.org link shows the example in motion. Animation is applied to the earlier bubble plot, to create a fifth dimension, showing how the data changes between 1960 and 2013 – producing a very pleasing visualization effect. The transitioning bubble plot shows a general increase in longevity and a decrease in fertility over time. This chapter provides useful sample code for different methods of creating animations with D3. 
|
|||
| Last Updated ( Tuesday, 20 February 2018 ) |