How to build a JavaScript-based network graph visualization?
13/03/2024
•
5
min
To build a JavaScript-based network graph visualization, we can use a library such as D3.js, which provides powerful data visualization components.
For this example, let's create a basic force-directed graph, a type of visualization that simulates physical forces, such as gravity and charge, to organize networked data. Each node in the graph can be modeled as a body with mass and each edge as a spring that keeps nodes in place.
Step 1: Start by setting up your HTML markup. Include the necessary scripts and placeholder for your visualization:
<!DOCTYPE html>
<html>
<head>
<title>Network Graph Visualization</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<svg id="network-graph"></svg>
</body>
</html>
Ask your specific question in Mate AI
In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks
Step 2: Next, define the data for your network graph. You need two arrays: one for the nodes and one for the links. Each node and link is an object, where 'id' refers to the node id and 'source' and 'target' for links refer to the 'id' of the connected nodes.
const nodes = [
{ id: 'node1' },
{ id: 'node2' },
{ id: 'node3' },
];
const links = [
{ source: 'node1', target: 'node2' },
{ source: 'node1', target: 'node3' },
];
Step 3: Create a new D3 force simulation. The force simulation will calculate the positions of the nodes over time. Set the nodes of the simulation using the previously defined 'nodes' array.
const simulation = d3.forceSimulation(nodes)
.force('link', d3.forceLink(links).id((d) => d.id))
.force('charge', d3.forceManyBody().strength(-200))
.force('center', d3.forceCenter(400 / 2, 400 / 2));
Step 4: Define the SVG element where the nodes and links will be drawn. Create 'g' elements for nodes and links and use the .data() method to bind the nodes and links data to them.
const svg = d3.select('#network-graph')
.attr('width', 400)
.attr('height', 400);
const link = svg.append('g')
.selectAll('line')
.data(links)
.join('line');
const node = svg.append('g')
.selectAll('circle')
.data(nodes)
.join('circle')
.attr('r', 20);
Step 5: Define a 'tick' function which updates the position of the nodes and links at every step of the simulation.
simulation.on('tick', () => {
link
.attr('x1', (d) => d.source.x)
.attr('y1', (d) => d.source.y)
.attr('x2', (d) => d.target.x)
.attr('y2', (d) => d.target.y);
node
.attr('cx', (d) => d.x)
.attr('cy', (d) => d.y);
});
Here, 'cx' and 'cy' set the position of the circle center, and 'x1', 'y1', 'x2', 'y2' are coordinates for the ends of the links.
This is a simple example to get you started. There's a lot more you can do with D3, including adding colors, labels, tooltips, draggable nodes, and different types of forces and constraints. Depending on the requirements of your project, you might also want to look at other libraries for graph visualization, such as cytoscape.js or sigma.js.
Please note to include all the JavaScript code in a script tag in the body of the HTML:
<script>
// Add your JavaScript code here
</script>
Remember to run this on a web server, as loading the JSON file may not work due to some browsers' same-origin policy if loaded from a local file system.
AI agent for developers
Boost your productivity with Mate:
easily connect your project, generate code, and debug smarter - all powered by AI.
Do you want to solve problems like this faster? Download now for free.