{"id":17167,"date":"2024-04-18T09:29:51","date_gmt":"2024-04-18T09:29:51","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=17167"},"modified":"2024-04-19T02:38:14","modified_gmt":"2024-04-19T02:38:14","slug":"creating-network-graph","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2024\/04\/18\/creating-network-graph\/","title":{"rendered":"Creating Interactive Network Graph Using JavaScript with Ease"},"content":{"rendered":"

\"Network<\/a>Creating a vibrant network graph in JavaScript might seem like crafting a digital cosmos: intricate, fascinating, yet entirely within reach. Whether you’re aiming to illustrate the complex interconnections within a galaxy, a social network, or the internal hierarchy of a multinational corporation, network graphs serve as a powerful tool to bring data to life, revealing hidden patterns and insights through visual representation.<\/p>\n

Let’s embark on a journey to demystify the process, guiding you step-by-step on how to construct your very own network graph, with the\u00a0Solar\u00a0System as our illustrative example.<\/p>\n

<\/p>\n

Unraveling\u00a0Network Graph Cosmos<\/h2>\n

Network graphs are not just charts; I like thinking about them as stories told in dots and lines<\/a>, each node a character, and each edge a relationship.<\/p>\n

Imagine plotting the vast expanse of the solar system, where planets orbit the life-giving Sun and moons dance around their planets, forming a complex yet orderly network of celestial bodies. This is what network graphs excel at: turning abstract connections into\u00a0a sort of map you can visually explore.<\/p>\n

Before we dive into the steps, here’s a sneak peek at the network graph that will be constructed by the end of this tutorial.<\/p>\n

\"JS<\/p>\n

Charting\u00a0Course: Four-Step Odyssey<\/h2>\n

Creating a network graph\u00a0this way involves weaving together HTML, JavaScript, and data into a cohesive visual narrative. Here’s our roadmap:<\/p>\n

    \n
  1. HTML\u00a0scaffold:<\/strong> Crafting the digital canvas.<\/li>\n
  2. Instrumental\u00a0magic:<\/strong> Invoking the sorcery of libraries.<\/li>\n
  3. Data\u00a0alchemy:<\/strong> Transforming raw data into network graph data.<\/li>\n
  4. JavaScript\u00a0choreography:<\/strong> Directing the dance of elements.<\/li>\n<\/ol>\n

    Step 1: Laying\u00a0Foundation with HTML<\/h3>\n

    First, we set the stage for our cosmic ballet. We start with a blank HTML page, establishing\u00a0an HTML block-level element that will host\u00a0the entire universe of our\u00a0Solar\u00a0System network graph. Here\u2019s how we lay the groundwork:<\/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  <\/head>\r\n  <body>\r\n    <div id=\"container\"><\/div>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    As you see, we’re introducing a <div><\/code> element as a container for our future network graph. By setting its width and height to 100%, we ensure the visualization expansively fills the browser window, inviting viewers to immerse themselves in the data.<\/p>\n
    Step 2: Including JavaScript Libraries<\/h3>\n
    Before we can summon our graph into existence, we need the right spells \u2014 or, in our case, JavaScript libraries. For example, here\u2019s how you can weave\u00a0AnyChart JS Charts<\/a> into our HTML tapestry, positioning the scripts within the <head><\/code> section:<\/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  <\/body>\r\n<\/html><\/code><\/pre>\n
    This setup not only loads the essential scripts but also prepares the <body><\/code> section for our upcoming dynamic JavaScript code, which will vividly render the network graph.<\/p>\n
    Step 3: Data Preparation<\/h3>\n
    With the stage set and the scripts in place, it’s time to define the actors in our celestial drama: the nodes (planets, moons) and edges (their\u00a0relationships). We embed\u00a0the\u00a0Solar\u00a0System data<\/a> directly within the JavaScript, ensuring each body is represented as a node and each relationship as an edge. For simplicity, this example omits some moons, but it lays the groundwork for you to expand and explore further on your own.<\/p>\n
    var data = {\r\n  \"nodes\": [\r\n    { \"id\": \"Sun\", \"value\": 1392700 },\r\n    { \"id\": \"Mercury\", \"value\": 4879 },\r\n    ...\r\n  ],\r\n  \"edges\": [\r\n    { \"from\": \"Sun\", \"to\": \"Mercury\", \"distance\": 50.9 },\r\n    { \"from\": \"Sun\", \"to\": \"Venus\", \"distance\": 108.2 },\r\n    ...\r\n  ]\r\n};<\/code><\/pre>\n
    Each node and edge carries with it the essence of our solar system, mapping the vast distances and relationships that define it.<\/p>\n
    Step 4: Code Network Graph Visualization in JavaScript<\/h3>\n
    Finally, the magic happens. We breathe life into our data, transforming it into a vibrant, interactive network graph.<\/p>\n
    The first act in our celestial choreography begins with ensuring that the script only executes once the HTML document has fully loaded. This safeguard prevents any premature interactions with the DOM, ensuring our script performs flawlessly in the browser’s universe.<\/p>\n
    anychart.onDocumentReady(function () {\r\n  \/\/ Our JS network graph's creation will be configured here.\r\n});<\/code><\/pre>\n
    Within the sanctum of our initialization function, we illuminate the celestial bodies of our solar system. This line of JavaScript takes the structured data of planets and their moons and begins the process of turning these into visual elements on our graph.<\/p>\n
    var chart = anychart.graph(data);<\/code><\/pre>\n
    Next, with our celestial data vividly characterized and styled, we command the graph to materialize in the designated container on our web page.<\/p>\n
    chart.container(\"container\");<\/code><\/pre>\n
    Finally, our\u00a0last command enlivens our network graph, offering a visual exploration of the solar system that invites curiosity and discovery, much like a map of the stars guiding a traveler through the night sky.<\/p>\n
    chart.draw();<\/code><\/pre>\n
    This spellbinding incantation channels our data through\u00a0the JavaScript charting library, materializing it as a network graph that invites exploration and discovery.<\/p>\n
    Result: Celestial Dance Visualized<\/h3>\n
    With these steps complete, our network graph is now a digital cosmos, ready to be explored<\/a>. While we’ve laid the foundation, the universe of customization and exploration is as boundless as space itself, and we’ll dive into that in the next section of the tutorial. The full HTML\/CSS\/JavaScript code\u00a0of this basic chart, provided\u00a0below, serves as both your map and your spacecraft, ready to take you to the next frontier of data visualization.<\/p>\n