{"id":24889,"date":"2024-04-30T22:01:26","date_gmt":"2024-04-30T22:01:26","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=24889"},"modified":"2026-01-13T11:56:16","modified_gmt":"2026-01-13T11:56:16","slug":"drawing-with-data-part-3","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/drawing-with-data-part-3\/","title":{"rendered":"Drawing with Data: Part 3"},"content":{"rendered":"

In Drawing with Data: Part 2<\/a> of our drawing with data tutorial series, we used styledMode<\/code> to transform our area spline range series into underwater trees and created some ethereal sunbeams using numerous line series and an SVG gradient we defined in our chart configuration\u2019s defs<\/code> object. Now it\u2019s time to add our network graph series, aka the jellypus.<\/p>\n

Network Graph Refresher<\/b><\/h2>\n

Network graphs visualize relationships between elements in a network, like devices on a LAN, connections in a transportation system or even more abstract things like ideas in a mind map.<\/p>\n

The network graph series consists of nodes and links, or lines, where the nodes represent the elements (devices, train stations, ideas) and the links show the connections between the individual nodes. Individual nodes can also have different sizes and weights (i.e. mass) that help visualize their importance in the network.<\/p>\n

The network graph\u2019s layout algorithm then simulates a physical system that uses the forces of attraction, repulsion and gravity to arrange the nodes in a way that best illustrates the nature of the network and the hierarchy of its nodes.<\/p>\n

But how does the layout algorithm determine where the nodes should go and how they should behave in relation to each other? A big part of the magic is a concept called the barycenter and its associated forces.<\/p>\n

The Barycenter<\/b><\/h2>\n

Barycenter (from the Greek bar\u00fas <\/i>for \u201cheavy\u201d and k\u00e9ntron for \u201ccenter\u201d) is the common center of mass between two or more bodies in a system and the point at which all bodies in the system are balanced or stable in relation to one another.<\/p>\n

In a network graph, the Highcharts layout algorithm finds the barycenter based on the weight or mass of each node and its connection to other nodes and then simulates barycenter forces that pull the nodes toward or push them away from the barycenter. This simulation runs until the nodes reach an equilibrium and settles into their final positions.<\/p>\n

You can affect the strength of the barycenter forces by adjusting the layout algorithm\u2019s gravitational constant. The higher the gravitational constant, the faster the nodes will rush toward the barycenter and pile on top of each other. A lower gravitation constant will slow the nodes\u2019 journey to the barycenter, but they eventually get there and glom together in a kind of network graph singularity.<\/p>\n

To further control barycenter forces, you can adjust the layout algorithm\u2019s repulsive and attractive forces.<\/p>\n

Forces at play<\/b><\/h2>\n

The layout algorithm\u2019s repulsive force setting determines how much individual nodes repel each other. The higher the setting, the farther the nodes will scurry from each other.<\/p>\n