DEV Community

Cover image for Creating a Network Graph Using the AnyChart JS Charting Library (Visualizing Game of Thrones Battles)
andreykh
andreykh

Posted on • Originally published at anychart.com

2 1

Creating a Network Graph Using the AnyChart JS Charting Library (Visualizing Game of Thrones Battles)

Representing objects as points (called nodes) and connections between them as lines (called edges or links), Network Graphs help explore relationships in a network or sections of a network.

Here I'd like to share a tutorial that will guide you through the entire process of creating an interactive Network Graph for the web using JavaScript (HTML5) - on the example of visualizing data about the relationships in the world of Game of Thrones (showing who attacked whom) using the AnyChart JS charting library (free for non-commercial use). No special knowledge is required at all, only some basic understanding of HTML and coding in general. The principle is quite the same for all JavaScript libraries for data visualization.

To start with, check this out - it's a quick demo of the visualization being built along the tutorial:
Network graph demo visualizing Game of Thrones battles

See the Network Graph tutorial here.

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay