Data visualization (ii) layout using the D3 component

Learn about graphical calculations for the components used to draw various permutations

The 1th part of this two-part series outlines the combined use of SVG and D3, providing some basic examples of creating browsing data visualization representations of social media. Part 2nd will describe the steps for arranging or laying out different graphic components in SVG graphics. You will learn how to use D3 powerful graphics to compute the placement of components on an SVG canvas, and how to combine your own graphical operations with the D3 layout. I'll also explore how to use JavaScript Object Notation (JSON) as a data format that can be used for visualization. Finally, this article shows you how to use layout combinations to arrange various graphical components on a single SVG canvas.

The concepts and examples in this article are based on the concepts and examples in part 1th, so be sure to read or review part 1th before you continue with this article. Reading part 2nd, you may find it useful to have two articles open in a browser, so you can refer to the image in part 1th. See download for sample code for part 2nd.

A brief introduction to the graphic layout of D3

I started building on the basis of the D3 features I learned in the 1th part.

Recall that figure 1 and Figure 2 in part 1th only differ in the circle arrangement, and the transform attribute values in the JavaScript code of these graphs (as shown in Listing 2 and listing 4 in part 1th) calculate the relative position of each circle center.

In D3 terminology, a graphical computation that determines the relative position of each component is called a layout. D3 provides a variety of powerful and reusable layouts. The arrangement of the arc chords in the 1th part is one of them. It is convenient to know how to use the D3 layout alone and to combine with your own graphical calculations.

The D3 package layout (Pack layout) (shown in Figure 1) is a circle packet within a larger circle. (as in part 1th, these circles depict page view data for week 1th.) In this article, I'll demonstrate how to combine the use of package layouts with some of my own calculations.

Figure 1. Display the package layout of a circle in a larger circle

The circle in Figure 1 is the same as the circle generated in part 1th, but it is arranged in a different way. The difference caused by the graph calculation is done by the D3 package layout.

There is no outer circle, and the layout in Figure 1 is similar to Figure 2:

Figure 2. Package layout with no outer circle