{"id":17218,"date":"2024-05-23T17:59:44","date_gmt":"2024-05-23T17:59:44","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=17218"},"modified":"2024-05-23T18:05:05","modified_gmt":"2024-05-23T18:05:05","slug":"network-graph-guide","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2024\/05\/23\/network-graph-guide\/","title":{"rendered":"How to Build Network Graph with JavaScript"},"content":{"rendered":"

\"Network<\/a>Network graphs<\/strong> are a practical and effective tool in data visualization, particularly useful for illustrating the relationships and connections within complex systems. These\u00a0charts are\u00a0useful for understanding structures in various contexts, from social networks to corporate\u00a0hierarchies. In this tutorial, we’ll delve into\u00a0a quick path to creating\u00a0a compelling, interactive network graph using JavaScript.<\/p>\n

We’ll use the Volkswagen Group<\/strong> as our example, mapping out its subsidiaries and product lines to showcase how network graphs can make complex organizational structures understandable and accessible. By the end of this step-by-step guide, you’ll have a clear understanding of how\u00a0to quickly construct and customize\u00a0a JS-based network graph. Buckle up, as it’s time to hit the road!<\/p>\n

<\/p>\n

Understanding Network Graphs<\/h2>\n

Network graphs consist of nodes and edges<\/a> \u2014 nodes<\/strong> represent entities such as individuals or organizations, while edges<\/strong> depict the relationships between them. These visuals are invaluable for dissecting and displaying the architecture of complex networks, revealing both overt and subtle connections.<\/p>\n

In practical terms, network graphs can help illustrate the hierarchy within a corporation, the interaction between different departments, or the flow of communication or resources. Visually, these graphs use various elements like node size, color, and edge thickness to convey information about the importance, type, and strength of relationships.<\/p>\n

Below is a preview of what we will create by the end of this tutorial \u2014 a fully interactive network graph that not only serves as a visual map of the Volkswagen Group but also utilizes the dynamic features of JavaScript for a deeper exploration of data.<\/p>\n

\"Network<\/p>\n

Step-by-Step Guide to Building a Network Graph<\/h2>\n

Creating a network graph involves several key steps, each contributing to the final outcome. Here\u2019s a brief overview of what we’ll cover in this tutorial:<\/p>\n

    \n
  1. Creating an HTML\u00a0page:<\/strong> This is where we set up the structure for our visualization, providing a canvas on which our\u00a0network graph will be displayed.<\/li>\n
  2. Including the necessary JavaScript\u00a0files:<\/strong> Essential for graph functionality, we’ll incorporate\u00a0scripts needed to build and manage our network graph.<\/li>\n
  3. Preparing the\u00a0data:<\/strong> Here, we’ll organize the data into a format that can\u00a0be smoothly visualized\u00a0in a network graph, distinguishing between different types of nodes and their connections.<\/li>\n
  4. Writing the JavaScript\u00a0code for\u00a0visualization:<\/strong> The final step involves scripting the logic that brings our graph to life, enabling interactivity\u00a0to better understand the\u00a0underlying data.<\/li>\n<\/ol>\n

    Each of these steps will be detailed in the following sections, ensuring you have a clear roadmap to follow as you create your own network graph\u00a0using JavaScript. Let\u2019s dive in and start visualizing!<\/p>\n

    Step 1: Setting Up Your HTML<\/h3>\n

    Start by creating the basic structure for your web page\u00a0if you are building from scratch. This includes setting up an HTML document that will host your network graph. Here is how you can write your HTML:<\/p>\n

    <!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <title>Network Graph in JavaScript<\/title>\r\n  <style type=\"text\/css\">\r\n    html, body, #container {\r\n      width: 100%; height: 100%; margin: 0; padding: 0;\r\n    }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n  <div id=\"container\"><\/div>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n
    This simple HTML structure is foundational. The <div><\/code> tag identified by id=\"container\"<\/code> is where our network graph will be rendered. The accompanying CSS ensures the graph uses the entire screen, optimizing visual space and ensuring that the graph is both prominent and clear.<\/p>\n
    Step 2: Summoning JavaScript\u00a0Files<\/h3>\n
    To integrate our network graph into the web environment without much hassle, let\u2019s incorporate a JavaScript charting library directly within the HTML framework. There are multiple libraries out there, although not all of them support network graphs. You can check out this comprehensive comparison of JavaScript charting libraries<\/a>, which details some features of various libraries, including support for network graphs. Of those listed, libraries such as amCharts, AnyChart, D3.js, and HighCharts are popular options that support network graphs.<\/p>\n
    For this tutorial, we\u2019ll utilize AnyChart<\/a> as an example. It’s one of the libraries I’ve used extensively over the years, and I thought it would work well to illustrate the common logic of the process and be easy enough to get started for those of you who are new to JS charting.<\/p>\n
    Here’s how the\u00a0necessary JS scripts are woven into the HTML, positioned\u00a0within the <head><\/code> section. Additionally, we prepare the <body><\/code> section to include our forthcoming JavaScript code\u00a0using those scripts, which will dynamically render the network graph:<\/p>\n
    <html>\r\n  <head>\r\n    <title>Network Graph in JavaScript<\/title>\r\n    <style type=\"text\/css\">\r\n      html, body, #container {\r\n        width: 100%; height: 100%; margin: 0; padding: 0;\r\n      }\r\n    <\/style>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.12.1\/js\/anychart-core.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.12.1\/js\/anychart-graph.min.js\"><\/script>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\"><\/div>\r\n    <script>\r\n      \/\/ JS code for the network graph will be here\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    Step 3: Sculpting\u00a0Data<\/h3>\n
    With our HTML ready and\u00a0JS files at hand, it’s time to define our nodes and edges \u2014 the fundamental components of our network graph. This involves structuring the Volkswagen Group’s data, from the parent company to each product line.<\/p>\n
    var data = {\r\n  \"nodes\": [\r\n    {\"id\": \"Volkswagen Group\", \"group\": \"CoreCompany\"},\r\n    {\"id\": \"Audi\", \"group\": \"ChildCompany\"},\r\n    {\"id\": \"Audi Cars\", \"group\": \"Product\"},\r\n    \/\/ More nodes here...\r\n  ],\r\n  \"edges\": [\r\n    {\"from\": \"Volkswagen Group\", \"to\": \"Audi\"},\r\n    {\"from\": \"Audi\", \"to\": \"Audi Cars\"},\r\n    \/\/ More edges here...\r\n  ]\r\n};<\/code><\/pre>\n
    Step 4: Choreographing JavaScript to Visualize Network<\/h3>\n
    This crucial step transforms the structured data into a vibrant, interactive network graph\u00a0within the provided HTML canvas. To ensure clarity and ease of understanding, I\u2019ve divided this process into three intuitive sub-steps, each demonstrated with its own code snippet.<\/p>\n
    Initializing<\/h4>\n
    First, we ensure that our JavaScript visualization code executes only once the HTML document is fully loaded. This is critical as it prevents any DOM manipulation attempts before the HTML is fully prepared.<\/p>\n
    anychart.onDocumentReady(function () {\r\n \/\/ Initialization of the network graph will happen here\r\n});<\/code><\/pre>\n
    Creating\u00a0Graph Instance<\/h4>\n
    Inside the\u00a0function, we initialize our network graph. Here, we create a graph object, a chart, using our predefined data. This instance will serve as the basis for our visualization.<\/p>\n
    var chart = anychart.graph(data);<\/code><\/pre>\n
    Setting\u00a0Container\u00a0for Graph<\/h4>\n
    The next step is to specify where on the webpage our network graph should be visually rendered. This is linked to the HTML container we defined earlier.<\/p>\n
    chart.container(\"container\");<\/code><\/pre>\n
    <\/h4>\n
    Rendering Graph<\/h4>\n
    The final step is to instruct the graph to draw itself within the designated container. This action brings our data to life, displaying the complex relationships within the Volkswagen Group.<\/p>\n
    chart.draw();<\/code><\/pre>\n
    These sub-steps collectively ensure that our network graph is not only initialized with the correct data and configurations but also properly placed and rendered on the web page, providing a dynamic and informative visual exploration of corporate relationships.<\/p>\n
    Network Graph Visualization Unfolded<\/h3>\n
    Now that our network graph is complete, you can see the resulting\u00a0picture below, which showcases the complex structure of the Volkswagen Group. This interactive\u00a0chart is not only informative but also a testament to the power of JavaScript\u00a0when it comes to cross-platform interactive data visualization.<\/p>\n