"D3js" combines pack and chord charts for multidimensional data presentation

D3js's chord diagram provides a good way to show the links between elements, but not enough dimensions are common search cases (http://bl.ocks.org/mbostock/4062006): 650) this.width=650; "Src=" Http://static.oschina.net/uploads/space/2015/0514/102258_c789_2003497.png "alt=" here Enter the picture description "title=" "style=" padding : 5px;margin:10px 0px;border:1px solid RGB (221,221,221); Background:rgb (244,247,249); "/>

The data behind this is actually a matrix:

var matrix = [[11975, 5871, 8916, 2868], [1951, 10048, 2060, 6171], [8010, 16145, 8090, 8045], [1013, 990, 940, 6907] ];

The value corresponds to the corresponding connection width

However, such a data structure can actually be used in a limited number of scenarios, because all the data of this matrix is on the display of the ring, so, in fact, this can only represent a dimension of data.

How can we get him to show more of the dimension data? This can be done by introducing a second layer display and customizing the connection of the chord diagram.

This is the traffic information we provide to a customer graph, by introducing the pack graph as a second layer for the display of traffic sources, we have the ability to display the group characteristics of the data source through the pack graph, the pack map is placed inside the entire image, and the external chord diagram to connect to indicate the traffic information, Shows a four-dimensional information structure:

[Source location, source group, destination location, traffic information]

650) this.width=650; "src=" Http://static.oschina.net/uploads/space/2015/0514/103352_LwHN_2003497.png "alt=" Enter the picture description "title=" "style=" padding:5px;margin:10px 0px;border:1px solid RGB (221,221,221); Background:rgb (244,247,249) ; "/>

The following ideas are implemented:

1) Change the matrix of chord to the diagonal matrix (remove the correspondence between the elements)

2) Draw chord and pack graphs using two layers respectively

3) Connect the pack chart element and the chord diagram element as the starting and ending points

——————————————————————————————————————————

Minktech Working Group is committed to big data management and visual platform construction, Golang related technology research and development, open source project promotion, welcome to communicate with everyone

This article is from the "Ming Ke Chong Blog" blog, please be sure to keep this source http://minktech.blog.51cto.com/9313802/1651207

"D3js" combines pack and chord charts for multidimensional data presentation