{"id":10900,"date":"2020-07-22T10:12:16","date_gmt":"2020-07-22T10:12:16","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=10900"},"modified":"2022-08-13T11:00:30","modified_gmt":"2022-08-13T11:00:30","slug":"network-graph-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/","title":{"rendered":"How to Create JavaScript Network Graph"},"content":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2020\/07\/network-graph-js-html5.png\" alt=\"How to create a Network Graph using JavaScript HTML5 for the web\" width=\"100%\" class=\"alignnone size-full wp-image-10992\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2020\/07\/network-graph-js-html5.png 1366w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2020\/07\/network-graph-js-html5-300x169.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2020\/07\/network-graph-js-html5-768x432.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2020\/07\/network-graph-js-html5-1024x576.png 1024w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" \/><strong><a href=\"https:\/\/www.anychart.com\/chartopedia\/chart-type\/network-graph\/\">Network graphs<\/a><\/strong> are a special, very interesting form of data visualization. Unlike more traditional chart types like <a href=\"https:\/\/www.anychart.com\/chartopedia\/chart-type\/bar-chart\/\">bar graphs<\/a>\u00a0or\u00a0<a href=\"https:\/\/www.anychart.com\/chartopedia\/chart-type\/pie-chart\/\">pie charts<\/a>, a network graph does a bit more than visualize numerical data. With these charts, you represent each object as a point, referred to as a node, and the connections between the objects\u00a0as a line, referred to as either a link or an edge. Here, we do not focus on representing objects with the same precision we are typically used to. Instead, we are trying to discover relationships in\u00a0a network or sections of\u00a0a network and are less worried about individual nodes.<\/p>\n<p>Right now, I will guide you through\u00a0<strong>how to develop\u00a0an interactive network graph for the web using JavaScript<\/strong> (HTML5). Inspired by\u00a0<a href=\"https:\/\/bensullins.com\/every-game-thrones-battle-visualized\/\" target=\"_blank\" rel=\"nofollow\">one fun visualization<\/a>\u00a0created by Ben Sullins, I decided to\u00a0take data\u00a0about the last decade\u2019s biggest\u00a0TV series, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Game_of_Thrones\" target=\"_blank\" rel=\"nofollow\">Game of Thrones<\/a>.\u00a0It\u00a0is an epic fantasy tale revolving around the quabbles of various faction-like houses.\u00a0So in this tutorial,\u00a0I will be <strong>visualizing the relationships\u00a0in the world of Game of Thrones by showing who attacked whom<\/strong>. Follow me, it&#8217;s going to be\u00a0a cool adventure!<\/p>\n<p><!--more Read the JS charting tutorial \u00bb--><\/p>\n<h2>Network Graph To Be Made<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2020\/07\/network-graph.gif\" alt=\"\" width=\"80%\" class=\"alignnone size-full wp-image-10990\" \/><\/p>\n<h2>Building JS Network Graph From Scratch<\/h2>\n<p>Basically, to build\u00a0a JS-based\u00a0network graph, we need to\u00a0follow the\u00a0same four steps as with literally any JavaScript chart:<\/p>\n<ul>\n<li>Create an HTML page.<\/li>\n<li>Add the necessary scripts.<\/li>\n<li>Load the data that will be visualized.<\/li>\n<li>Draw the chart.<\/li>\n<\/ul>\n<h3>1. Create an HTML page<\/h3>\n<p>The first step towards building\u00a0our\u00a0network graph is to setup\u00a0an HTML page. This involves creating\u00a0a basic HTML template for\u00a0the chart as well as adding\u00a0the necessary\u00a0CSS rules.<\/p>\n<p>Here we also add a title for our HTML page\u00a0and create a div\u00a0to contain the chart.<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;JavaScript Network Graph&lt;\/title&gt;\r\n    &lt;style&gt;\r\n      html, body, #container {\r\n        width: 100%;\r\n        height: 100%;\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n    &lt;script&gt;\r\n      \/\/ The chart code goes here.\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<p>I&#8217;ve\u00a0set the CSS to make\u00a0the container div fill the entire page. You may want to change this depending on your use case, of course.<\/p>\n<h3>2. Add the necessary scripts<\/h3>\n<p>The second step is to add all the necessary scripts. We will be using <a href=\"https:\/\/www.anychart.com\">AnyChart JS Charts<\/a>\u00a0which is a very easy to use and powerful JavaScript charting library. I personally love AnyChart because it is great for both beginners and pros alike. It lets you quickly prototype data visualizations\u00a0and really helps speed up the entire development process.<\/p>\n<p>To make good use of\u00a0the AnyChart library, we need to add\u00a0its dedicated <a href=\"https:\/\/docs.anychart.com\/Quick_Start\/Modules\" target=\"_blank\" rel=\"nofollow\">modules<\/a>. In this tutorial, we will be using three of them. The Core and Graph modules are required to draw our network graph, and the Data Adapter module will\u00a0help us import the Game of Thrones JSON data (more on that shortly).<\/p>\n<pre><code class=\"html\">&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.8.0\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.8.0\/js\/anychart-graph.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.8.0\/js\/anychart-data-adapter.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>We add these scripts to the head of our code.<\/p>\n<h3>3. Load the data we are going to be visualizing<\/h3>\n<p>As explained earlier, the data we will be using is based on Game of Thrones. I\u2019ve found a great dataset, <a href=\"https:\/\/github.com\/chrisalbon\/war_of_the_five_kings_dataset\" target=\"_blank\" rel=\"nofollow\">The War Of The Five Kings<\/a>. The data was originally sourced from <a href=\"http:\/\/awoiaf.westeros.org\/index.php\/War_of_the_Five_Kings\" target=\"_blank\" rel=\"nofollow\">A Wiki of Fire and Ice<\/a>, a wiki dedicated to Game of Thrones. It was then scraped and cleaned up by data scientist Chris Albon, the Director of Machine Learning at the Wikimedia Foundation. I processed it further by myself for the purpose of this JS network graph tutorial; you can find the result\u00a0<a href=\"https:\/\/static.anychart.com\/git-storage\/word-press\/data\/network-graph-tutorial\/data.json\" target=\"_blank\" rel=\"nofollow\">here<\/a>,\u00a0in JSON.<\/p>\n<p>The thing is, AnyChart wants your network graph data in a particular format. It wants a JSON object with an array of nodes and an array of edges. Each node requires an \u2018id\u2019. The edges need a \u2018from\u2019 and \u2018to\u2019, which is the source and target of each connection respectively.<\/p>\n<p>Like this:<\/p>\n<pre><code class=\"json\">nodes: [{ \"id\": \"Lannister\" }]\r\nedges: [{ \"from\": \"Lannister\", \"to\": \"Tully\" }]<\/code><\/pre>\n<p>Then we\u00a0need to import our data.\u00a0Loading data for JavaScript data visualizations can sometimes be quite a pain.\u00a0But with AnyChart,\u00a0<a href=\"https:\/\/docs.anychart.com\/Working_with_Data\/Overview\" target=\"_blank\" rel=\"nofollow\">working with data<\/a>\u00a0really is super straightforward.\u00a0Leveraging the right function, you can easily import CSV, JSON, XML, and even a Google spreadsheet!<\/p>\n<p>Here, our\u00a0data is in\u00a0the JSON format, so we need the following function:<\/p>\n<pre><code class=\"javascript\">anychart.data.loadJsonFile('https:\/\/static.anychart.com\/git-storage\/word-press\/data\/network-graph-tutorial\/data.json', function (data) {\r\n  \/\/ The chart code goes here.\r\n})<\/code><\/pre>\n<p>Because we want our chart to be drawn only after the data is successfully loaded, we will place our code to draw the chart within this function.<\/p>\n<h3>4. Draw the chart<\/h3>\n<p>The fourth and final step is to draw the chart. Here we\u00a0command to create a chart from our data, set the chart title, and then\u00a0visualize\u00a0our graphic using these very straightforward functions:<\/p>\n<pre><code class=\"javascript\">\/\/ create a chart from the loaded data\r\nvar chart = anychart.graph(data);\r\n\r\n\/\/ set the title\r\nchart.title(\"Network Graph showing the battles in Game of Thrones\");\r\n\r\n\/\/ draw the chart\r\nchart.container(\"container\").draw();<\/code><\/pre>\n<p>And this is the result:<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-GyGRrCsT\" src=\"https:\/\/playground.anychart.com\/GyGRrCsT\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-GyGRrCsT{width:100%;height:500px;}\");\n})();<\/script><\/p>\n<p>See this network graph example with the full HTML\/CSS\/JS code on <a href=\"https:\/\/playground.anychart.com\/GyGRrCsT\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a> or <a href=\"https:\/\/codepen.io\/waydeherman\/pen\/vYLJygE\" target=\"_blank\" rel=\"nofollow\">CodePen<\/a>.<\/p>\n<p>Maybe not as aesthetically impressive as our D3.js-based inspiration but we will get to that later. Take some time to hover over the nodes, maybe drag them around a bit. How amazing? With these four simple steps and a few lines of the JavaScript code, we have created this fairly powerful and interactive network graph.<\/p>\n<p>The full code is as follows, check it out:<\/p>\n<pre><code class=\"html\">&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.8.0\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.8.0\/js\/anychart-graph.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.8.0\/js\/anychart-data-adapter.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;style type=\"text\/css\"&gt;\r\n      html, body, #container {\r\n        width: 100%;\r\n        height: 100%;\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n    &lt;script&gt;\r\n      anychart.onDocumentReady(function () {\r\n        anychart.data.loadJsonFile(\"https:\/\/static.anychart.com\/git-storage\/word-press\/data\/network-graph-tutorial\/data.json\", function (data) {\r\n        \/\/ create a chart from the loaded data\r\n        var chart = anychart.graph(data);\r\n        \/\/ set the title\r\n        chart.title(\"Network Graph showing the battles in Game of Thrones\");\r\n        \/\/ draw the chart\r\n        chart.container(\"container\").draw();\r\n        });\r\n      });\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<h2>Customizing Network Graph Appearance<\/h2>\n<p>As impressive as our visualization currently is we can make it better. A lot better. All decent JS charting libraries allow you to customize the charts you build using their API. Making use of these customizations to better tell your data story is a critical skill to have as a data visualization developer. Some of these customizations are aesthetic, like changing the size or color of an element, and some functional like changing the tooltips.<\/p>\n<p>Below, I will be demonstrating a few of the customization techniques available to network graphs.<\/p>\n<h3>Changing the iteration steps<\/h3>\n<p>Network graphs are drawn using an algorithm which iteratively attempts to improve its layout. With each iteration, the algorithm optimizes a step further according to an error metric. This would suggest that the more iterations, the better. However, sometimes the algorithm\u2019s idea of an optimized layout and your (and your user\u2019s) idea of an optimized layout may be considerably different. By changing the number of iterations, we can get different layouts which may suit our needs.<\/p>\n<p>Add\u00a0the code below and you&#8217;ll see what would happen if you used only 10 iterations, the default being 500.<\/p>\n<pre><code class=\"javascript\">\/\/ set the iteration step\r\nchart.layout().iterationCount(10);<\/code><\/pre>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-GyGRrCsT\" src=\"https:\/\/playground.anychart.com\/BIY68G2O\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-GyGRrCsT{width:100%;height:500px;}\");\n})();<\/script><\/p>\n<p>Well, it was just a quick demonstration. Let&#8217;s\u00a0skip this change and see\u00a0how to do something else interesting about our JS network graph visualization.<\/p>\n<h3>Customizing the nodes (basic):<\/h3>\n<p>We can customize the size, fill, and stroke of each node, as well as set different rules for each state. By state I mean the default node, a hovered node, or a selected node. Colors in a JavaScript network graph can be set the same way you would set a CSS color, and here we&#8217;ll use hex code.<\/p>\n<ul>\n<li>Display\u00a0hover\/selected\/normal changes:<\/li>\n<\/ul>\n<pre><code class=\"javascript\">\/\/ set the size of nodes\r\nnodes.normal().height(30);\r\nnodes.hovered().height(45);\r\nnodes.selected().height(45);\r\n\r\n\/\/ set the fill of nodes\r\nnodes.normal().fill(\"#ffa000\");\r\nnodes.hovered().fill(\"white\");\r\nnodes.selected().fill(\"#ffa000\");\r\n \r\n\/\/ set the stroke of nodes\r\nnodes.normal().stroke(null);\r\nnodes.hovered().stroke(\"#333333\", 3);\r\nnodes.selected().stroke(\"#333333\", 3);<\/code><\/pre>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-GyGRrCsT\" src=\"https:\/\/playground.anychart.com\/YySiLKVy\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-GyGRrCsT{width:100%;height:500px;}\");\n})();<\/script><\/p>\n<p>See this network graph example with the full HTML\/CSS\/JS code on <a href=\"https:\/\/playground.anychart.com\/YySiLKVy\/\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a> or <a href=\"https:\/\/codepen.io\/waydeherman\/pen\/qBbVOVE\" target=\"_blank\" rel=\"nofollow\">CodePen<\/a>.<\/p>\n<h3>Customizing the nodes (advanced):<\/h3>\n<p>Personally my favorite aesthetic change for a network graph is to replace the node icons with images. Here we can replace the great houses of Westeros (our nodes) with the images. This can easily be done by adding the filepath for the image to each node\u2019s object in our JSON. For example:<\/p>\n<pre><code class=\"json\">{id: \"Example\",\r\n  fill: {\r\n    src: \"example_url\"\r\n  }\r\n},<\/code><\/pre>\n<p>I\u2019ve already made this change and the updated file can be found <a href=\"https:\/\/static.anychart.com\/git-storage\/word-press\/data\/network-graph-tutorial\/data_images.json\" target=\"_blank\" rel=\"nofollow\">here<\/a>. By using this JSON with the images included, we get the following\u00a0graphic:<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-y209YF9m\" src=\"https:\/\/playground.anychart.com\/y209YF9m\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-y209YF9m{width:100%;height:500px;}\");\n})();<\/script><\/p>\n<p>See this network graph example with the full HTML\/CSS\/JS code on <a href=\"https:\/\/playground.anychart.com\/y209YF9m\/\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a> or <a href=\"https:\/\/codepen.io\/waydeherman\/pen\/xxZPwpx\" target=\"_blank\" rel=\"nofollow\">CodePen<\/a>.<\/p>\n<p>How cool is that? It is so much more engaging than it was before.<\/p>\n<h3>Node Labels<\/h3>\n<p>Not all of us know the banners of each house, and having to hover over each node to see which one it belongs to can be quite painful. To get around this, we can label each node. This is easily done with the following code:<\/p>\n<pre><code class=\"javascript\">\/\/ enable the labels of nodes\r\nchart.nodes().labels().enabled(true);\r\n \r\n\/\/ configure the labels of nodes\r\nchart.nodes().labels().format(\"{%id}\");\r\nchart.nodes().labels().fontSize(12);\r\nchart.nodes().labels().fontWeight(600);<\/code><\/pre>\n<p>And this results in:<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-Bm0Yttoh\" src=\"https:\/\/playground.anychart.com\/Bm0Yttoh\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-Bm0Yttoh{width:100%;height:500px;}\");\n})();<\/script><\/p>\n<p>See this network graph example with the full HTML\/CSS\/JS code on <a href=\"https:\/\/playground.anychart.com\/Bm0Yttoh\/\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a> or <a href=\"https:\/\/codepen.io\/waydeherman\/pen\/NWxwGyY\" target=\"_blank\" rel=\"nofollow\">CodePen<\/a>.<\/p>\n<p>For your convenience, here&#8217;s the full code of this (final for this tutorial) interactive JavaScript network graph visualizing data about the\u00a0Game of Thrones battles:<\/p>\n<pre><code class=\"html\">&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.8.0\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.8.0\/js\/anychart-graph.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.8.0\/js\/anychart-data-adapter.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;style type=\"text\/css\"&gt;\r\n      html, body, #container {\r\n        width: 100%;\r\n        height: 100%;\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n    &lt;script&gt;\r\n\r\n      anychart.onDocumentReady(function () {\r\n        anychart.data.loadJsonFile(\"https:\/\/static.anychart.com\/git-storage\/word-press\/data\/network-graph-tutorial\/data_images.json\", function (data) {\r\n\r\n          \/\/ create a chart from the loaded data\r\n          var chart = anychart.graph(data);\r\n\r\n          \/\/ set the title\r\n          chart.title(\"Network Graph showing the battles in Game of Thrones\");\r\n\r\n          \/\/ access nodes\r\n          var nodes = chart.nodes();\r\n\r\n          \/\/ set the size of nodes\r\n          nodes.normal().height(30);\r\n          nodes.hovered().height(45);\r\n          nodes.selected().height(45);\r\n\r\n          \/\/ set the stroke of nodes\r\n          nodes.normal().stroke(null);\r\n          nodes.hovered().stroke(\"#333333\", 3);\r\n          nodes.selected().stroke(\"#333333\", 3);\r\n\r\n          \/\/ enable the labels of nodes\r\n          chart.nodes().labels().enabled(true);\r\n\r\n          \/\/ configure the labels of nodes\r\n          chart.nodes().labels().format(\"{%id}\");\r\n          chart.nodes().labels().fontSize(12);\r\n          chart.nodes().labels().fontWeight(600);\r\n\r\n          \/\/ draw the chart\r\n          chart.container(\"container\").draw();\r\n\r\n        });\r\n      });\r\n\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<h2>Conclusion<\/h2>\n<p>And just like that we have an awesome visualization for unpacking the complicated relationships in this network. In the tutorial, I&#8217;ve showed just how fast and easy it is to get a\u00a0JS network chart\u00a0up and running and how with a tiny bit more effort we could really bring our chart to life with a few choice tweaks.<\/p>\n<p>Honestly, there are so many more changes you could make. Visit the <a href=\"https:\/\/www.anychart.com\/products\/anychart\/gallery\/Network_Graph\/\">gallery of network graphs<\/a> for further inspiration, as well as see this pretty extensive <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Network_Graph\" target=\"_blank\" rel=\"nofollow\">network graphs documentation<\/a>\u00a0and look around in <a href=\"https:\/\/docs.anychart.com\" target=\"_blank\" rel=\"nofollow\">AnyChart Docs<\/a> for ideas on what you could change to further improve this chart and how to implement them.<\/p>\n<p>If this tutorial has piqued your interest about charts based on the show, check out this awesome list of <a href=\"https:\/\/medium.com\/@jeffrey.lancaster\/32-game-of-thrones-data-visualizations-f4ab6bc978d8\" target=\"_blank\" rel=\"nofollow\">32 Game of Thrones data visualizations<\/a>.<\/p>\n<p><!-- SyntaxHighlighter --><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/default.min.css\"><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/atom-one-light.min.css\"><script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/highlight.min.js\"><\/script><script>hljs.initHighlightingOnLoad();<\/script><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Network graphs are a special, very interesting form of data visualization. Unlike more traditional chart types like bar graphs\u00a0or\u00a0pie charts, a network graph does a bit more than visualize numerical data. With these charts, you represent each object as a point, referred to as a node, and the connections between the objects\u00a0as a line, referred [&hellip;]<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,23,13,279,4],"tags":[53,127,258,471,266,54,256,844,805,2051,2054,2052,2053,32,55,144,36,907,141,81,57,58,65,56,957,30,172,1763,804],"class_list":["post-10900","post","type-post","status-publish","format-standard","hentry","category-anychart-charting-component","category-html5","category-javascript","category-javascript-chart-tutorials","category-tips-and-tricks","tag-anychart","tag-chart-types","tag-charts","tag-data-analysis","tag-data-analytics","tag-data-visualization","tag-data-visualization-examples","tag-data-visualization-tutorial","tag-front-end-development","tag-game-of-thrones","tag-game-of-thrones-charts","tag-game-of-thrones-data","tag-game-of-thrones-data-visualization","tag-html5","tag-html5-charts","tag-infographics","tag-javascript","tag-javascript-chart-tutorial","tag-javascript-charting","tag-javascript-charting-library","tag-javascript-charts","tag-js-chart","tag-js-charting","tag-js-charts","tag-network-graph","tag-tips-and-tricks","tag-tutorial","tag-web-developers","tag-web-development","wpautop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Network Graph | What It Is &amp; How to Create One in JavaScript HTML5<\/title>\n<meta name=\"description\" content=\"Learn what a Network Graph is and how to create an interactive data visualization of this type for the Web using JavaScript HTML5. JS network graph tutorial\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create JavaScript Network Graph\" \/>\n<meta property=\"og:description\" content=\"Learn what a Network Graph is and how to create an interactive data visualization of this type for the Web using JavaScript HTML5.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"AnyChart News\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AnyCharts\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-22T10:12:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-13T11:00:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2020\/07\/network-graph-js-html5.png\" \/>\n<meta name=\"author\" content=\"Wayde Herman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Create JavaScript Network Graph\" \/>\n<meta name=\"twitter:description\" content=\"Learn what a Network Graph is and how to create an interactive data visualization of this type for the Web using JavaScript HTML5.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2020\/07\/network-graph-js-html5.png\" \/>\n<meta name=\"twitter:creator\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:site\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Wayde Herman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/\"},\"author\":{\"name\":\"Wayde Herman\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/d9447a42182ea80639bfcdde177e0f89\"},\"headline\":\"How to Create JavaScript Network Graph\",\"datePublished\":\"2020-07-22T10:12:16+00:00\",\"dateModified\":\"2022-08-13T11:00:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/\"},\"wordCount\":1475,\"commentCount\":7,\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2020\/07\/network-graph-js-html5.png\",\"keywords\":[\"AnyChart\",\"chart types\",\"charts\",\"data analysis\",\"data analytics\",\"Data Visualization\",\"data visualization examples\",\"data visualization tutorial\",\"front-end development\",\"Game of Thrones\",\"Game of Thrones charts\",\"Game of Thrones data\",\"Game of Thrones data visualization\",\"HTML5\",\"html5 charts\",\"infographics\",\"JavaScript\",\"javascript chart tutorial\",\"javascript charting\",\"JavaScript charting library\",\"javascript charts\",\"js chart\",\"js charting\",\"js charts\",\"network graph\",\"Tips and tricks\",\"tutorial\",\"web developers\",\"web development\"],\"articleSection\":[\"AnyChart Charting Component\",\"HTML5\",\"JavaScript\",\"JavaScript Chart Tutorials\",\"Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/\",\"url\":\"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/\",\"name\":\"Network Graph | What It Is & How to Create One in JavaScript HTML5\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2020\/07\/network-graph-js-html5.png\",\"datePublished\":\"2020-07-22T10:12:16+00:00\",\"dateModified\":\"2022-08-13T11:00:30+00:00\",\"author\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/d9447a42182ea80639bfcdde177e0f89\"},\"description\":\"Learn what a Network Graph is and how to create an interactive data visualization of this type for the Web using JavaScript HTML5. JS network graph tutorial\",\"breadcrumb\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/#primaryimage\",\"url\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2020\/07\/network-graph-js-html5.png\",\"contentUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2020\/07\/network-graph-js-html5.png\",\"width\":1366,\"height\":768},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anychart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create JavaScript Network Graph\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\",\"url\":\"https:\/\/www.anychart.com\/blog\/\",\"name\":\"AnyChart News\",\"description\":\"AnyChart JS Charts\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.anychart.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/d9447a42182ea80639bfcdde177e0f89\",\"name\":\"Wayde Herman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/117ce313e0a18bbfaabbf201e21dfc14c7f633e1d57e32298ace464d25fc21aa?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/117ce313e0a18bbfaabbf201e21dfc14c7f633e1d57e32298ace464d25fc21aa?s=96&r=g\",\"caption\":\"Wayde Herman\"},\"url\":\"https:\/\/www.anychart.com\/blog\/author\/wayde-herman\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Network Graph | What It Is & How to Create One in JavaScript HTML5","description":"Learn what a Network Graph is and how to create an interactive data visualization of this type for the Web using JavaScript HTML5. JS network graph tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to Create JavaScript Network Graph","og_description":"Learn what a Network Graph is and how to create an interactive data visualization of this type for the Web using JavaScript HTML5.","og_url":"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/","og_site_name":"AnyChart News","article_publisher":"https:\/\/www.facebook.com\/AnyCharts","article_published_time":"2020-07-22T10:12:16+00:00","article_modified_time":"2022-08-13T11:00:30+00:00","og_image":[{"url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2020\/07\/network-graph-js-html5.png","type":"","width":"","height":""}],"author":"Wayde Herman","twitter_card":"summary_large_image","twitter_title":"How to Create JavaScript Network Graph","twitter_description":"Learn what a Network Graph is and how to create an interactive data visualization of this type for the Web using JavaScript HTML5.","twitter_image":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2020\/07\/network-graph-js-html5.png","twitter_creator":"@AnyChart","twitter_site":"@AnyChart","twitter_misc":{"Written by":"Wayde Herman","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/#article","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/"},"author":{"name":"Wayde Herman","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/d9447a42182ea80639bfcdde177e0f89"},"headline":"How to Create JavaScript Network Graph","datePublished":"2020-07-22T10:12:16+00:00","dateModified":"2022-08-13T11:00:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/"},"wordCount":1475,"commentCount":7,"image":{"@id":"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2020\/07\/network-graph-js-html5.png","keywords":["AnyChart","chart types","charts","data analysis","data analytics","Data Visualization","data visualization examples","data visualization tutorial","front-end development","Game of Thrones","Game of Thrones charts","Game of Thrones data","Game of Thrones data visualization","HTML5","html5 charts","infographics","JavaScript","javascript chart tutorial","javascript charting","JavaScript charting library","javascript charts","js chart","js charting","js charts","network graph","Tips and tricks","tutorial","web developers","web development"],"articleSection":["AnyChart Charting Component","HTML5","JavaScript","JavaScript Chart Tutorials","Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/","url":"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/","name":"Network Graph | What It Is & How to Create One in JavaScript HTML5","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2020\/07\/network-graph-js-html5.png","datePublished":"2020-07-22T10:12:16+00:00","dateModified":"2022-08-13T11:00:30+00:00","author":{"@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/d9447a42182ea80639bfcdde177e0f89"},"description":"Learn what a Network Graph is and how to create an interactive data visualization of this type for the Web using JavaScript HTML5. JS network graph tutorial","breadcrumb":{"@id":"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/#primaryimage","url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2020\/07\/network-graph-js-html5.png","contentUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2020\/07\/network-graph-js-html5.png","width":1366,"height":768},{"@type":"BreadcrumbList","@id":"https:\/\/www.anychart.com\/blog\/2020\/07\/22\/network-graph-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anychart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create JavaScript Network Graph"}]},{"@type":"WebSite","@id":"https:\/\/www.anychart.com\/blog\/#website","url":"https:\/\/www.anychart.com\/blog\/","name":"AnyChart News","description":"AnyChart JS Charts","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.anychart.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/d9447a42182ea80639bfcdde177e0f89","name":"Wayde Herman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/117ce313e0a18bbfaabbf201e21dfc14c7f633e1d57e32298ace464d25fc21aa?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/117ce313e0a18bbfaabbf201e21dfc14c7f633e1d57e32298ace464d25fc21aa?s=96&r=g","caption":"Wayde Herman"},"url":"https:\/\/www.anychart.com\/blog\/author\/wayde-herman\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/10900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/comments?post=10900"}],"version-history":[{"count":27,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/10900\/revisions"}],"predecessor-version":[{"id":15498,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/10900\/revisions\/15498"}],"wp:attachment":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/media?parent=10900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/categories?post=10900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/tags?post=10900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}