"D3.js Advanced Series-4.0" Matrix Tree graph

Matrix Tree (Treemap), which is also an extension of the hierarchical layout, divides the region into a collection of rectangles based on the data. The size and color of the rectangle are the reflection of the data.

Many portals can see a situation similar to Figure 1, where the photos are arranged in rectangles of different sizes, which is the application of the matrix tree graph.

Figure 1 http://www.texastribune.org/2010/10/07/treemap-reveals-campaign-ad-trends/

Now in Zhejiang, Guangxi, Jiangsu Three provinces 2013 years of GDP as a data, the size of the GDP as a node weight to make it into a matrix tree map.

1. Data

Create a new Citygdp.json file with the following contents:

{"Name": "China", "children": [{"Name": "Zhejiang", "Children": [{"Name": "Hangzhou", "GDP": 8343},{"name": "Ningbo", "GDP": 7128},{"name": " Wenzhou "," GDP ": 4003},{" name ":" Shaoxing "," GDP ": 3620},{" name ":" Huzhou "," GDP ": 1803},{" name ":" Jiaxing "," GDP ": 3147},{" name ":" Jinhua "," GDP " : 2958},{"name": "Quzhou", "GDP": 1056},{"name": "Zhoushan", "GDP": 1021},{"name": "Taizhou", "GDP": 3153},{"name": "Lishui", "GDP": 983}]}, * *    omit partial data ***************]}

Each leaf node contains name and gdp,name are node names, and GDP is the node size. The omitted part of the data also contains the cities of Guangxi and Jiangsu provinces.

2. Layout (data conversion)

Create a matrix tree layout with dimensions set to [width, height], which is the size of the SVG canvas, the value accessor is set to GDP, and the code is as follows:

var treemap = D3.layout.treemap (). Size ([width, height]). Value (function (d) {return D.GDP;});

When the value accessor is set, each node will have the variable value, and its value is the value of GDP. If the node is a child node, its GDP value is the and of the child node value. For example, the GDP of the node "Zhejiang" is the GDP of each city in the province. Then use D3.json to request the file, and then convert the data.

D3.json ("Citygdp.json", function (error, root) {var nodes = treemap.nodes (root); var links = treemap.links (nodes); Console.log (nodes); Console.log (links);}

After the data is transformed, the output of the node array is 2. Where the properties of the node object include:

• Parent: Father Node
• Children: Child Nodes
• Depth: The depth of the node
• Value: Value of the node, determined by the value accessor
• x: x-coordinate of the node
• Y: the y-coordinate of the node
• Width of the dx:x direction
• Width of the dy:y direction

Figure 2

The output of the wired array is 3, and each line object contains the source and target, which are both ends of the connection.

Figure 3

3. Draw

This example does not draw lines and uses only the node array. The drawing of the nodes is simple, add enough grouping elements by the number of nodes <g>,<g> add <rect> and <text>.

var groups = Svg.selectall ("G"). Data (Nodes.filter (function (d) {return!d.children;})). Enter (). Append ("G"), var rects = groups.append ("rect"). attr ("Class", "Noderect"). attr ("X", function (d) {return d.x;}). attr ("Y", function (d) {return d.y;}). attr ("width", function (d) {return D.DX;}). attr ("Height", function (d) {return d.dy;}). Style ("Fill", function (d,i) {return color (d.parent.name);}); var texts = groups.append ("text"). attr ("Class", "NodeName"). attr ("X", function (d) {return d.x;}). attr ("Y", function (d) {return d.y;}). attr ("DX", "0.5em"). attr ("dy", "1.5em"). Text (function (d) {return d.name + "" + D.GDP;});

As shown in result 4.

Figure 4

Complete code, click the link below, and then right-view the source code:

Http://www.ourd3js.com/demo/G-4.0/treemap.html

4. Concluding remarks

So far, all the layouts in D3 have been explained. "Introductory Series" explains 6 layouts, "Advanced series" 2, "Superior Series" 3, a total of 11 layouts.

D3 offers a total of 12 layouts: Pie (PIE), Force-directed, chord (Chord), tree, cluster (Cluster), bundle (bundle), pack-up (Pack), histogram (histogram), A partition map (Partition), a stack diagram (stacks), a matrix tree (Treemap), a hierarchy chart (Hierarchy).

In 12 layouts, the hierarchy Chart (Hierarchy) cannot be used directly, and cluster, package, partition, tree, and matrix trees are expanded by the hierarchy, so that the layout that can be used is 11.

Because the word "layout" may be reminiscent of a beginner to "draw", the layout is simply to calculate which element is displayed. Intuitively, the function of the layout is to transform some data into another data, and the transformed data is beneficial to the visualization. Therefore, the tutorial on this site is called the layout "Data transformation."

Of course, you can also follow the original word "layout" to understand, but also can be understood as "calculation", as long as you know the meaning.

Thank you for reading.

Document Information

• Copyright Notice: Attribution (by)-Non-commercial (NC)-No deduction (ND)
• Published: April 4, 2015
• More content: our D3. JS-Data Visualization special station and CSDN personal blog
• Remark: This article is published in our D3. JS, reproduced please indicate the source, thank you

"D3.js Advanced Series-4.0" Matrix Tree graph