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

Source: Internet
Author: User

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):

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]

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

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.