Interactive 500-Node Network Graph

A comprehensive HTML example with advanced filtering and visualization

Highlights

Scalable Visualization: Code demonstrates dynamic generation of 500 nodes and variable connections.
Advanced Filtering: Includes user interface components to filter nodes and edges based on multiple properties.
Interactive Features: Features such as zoom, pan, layout switching, and customizable appearance based on data properties.

Introduction

The following HTML code demonstrates how to build an interactive network graph that visualizes 500 nodes with rich visualization options and filtering capabilities. The network graph is designed to handle a large number of nodes and edges, offering users a way to analyze relationships using filters that act on node properties like size, group, or type, and edge properties like weight or connection type. In our example, we use a popular JavaScript library known for its flexibility and performance for graph visualization. The code includes HTML, CSS, and JavaScript components integrated seamlessly to deliver an efficient, interactive experience.

Overview of Key Concepts

Network Graphs

A network graph is a visual representation of data where items are represented as nodes and their relationships as edges. This type of visualization is especially useful for showing complex connections in large datasets, revealing clustering patterns, central nodes, and interconnections.

Interactive Visualization Libraries

To achieve advanced visualization and filtering, we can use JavaScript libraries such as AnyChart or Cytoscape.js. These libraries are well suited for managing performance issues, especially when handling up to 500 nodes, by using techniques like canvas rendering and custom layout algorithms.

Filtering Mechanisms

Filtering enables the user to manage data overload by showing only the nodes and edges that meet specific criteria. This can be implemented with interactive components like sliders, dropdown menus, or input fields. The filtering logic adjusts the display of nodes and edges dynamically according to user-specified constraints (e.g., showing nodes with a weight above a given threshold).

Code Breakdown

HTML Structure and Styling

The HTML structure is simple and clean. The container is set to take full width and height, ensuring that the graph visualization occupies the entire available space. CSS rules are embedded to facilitate a responsive layout.

HTML and CSS

This section of code establishes the basic skeleton. The <div id="container"> element is crucial as it serves as the drawing area for the graph. CSS ensures that the container scales appropriately with the viewport.

<!-- HTML Structure with Embedded CSS -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive 500-Node Network Graph</title>
  <style>
    html, body, #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
    /* Style for filter section */
    #controls {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(255,255,255,0.9);
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
      z-index: 10;
    }
    #controls h4 {
      margin: 5px 0;
    }
    #controls input, #controls select, #controls button {
      margin-bottom: 8px;
      padding: 6px;
      width: 100%;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    #controls button {
      background-color: #388278;
      color: #fff;
      cursor: pointer;
    }
    #controls button:hover {
      background-color: #2a6b63;
    }
  </style>
</head>
<body>
  <div id="controls">
    <h4>Filter Nodes by Size</h4>
    <input type="range" id="nodeSizeFilter" min="10" max="30" value="10" />
    <h4>Filter Edges by Weight</h4>
    <input type="range" id="edgeWeightFilter" min="1" max="10" value="1" />
    <h4>Select Layout</h4>
    <select id="layoutSelect">
      <option value="force">Force Directed</option>
      <option value="grid">Grid</option>
      <option value="circle">Circle</option>
    </select>
    <button id="applyFilters">Apply Filters</button>
    <button id="resetFilters">Reset Filters</button>
  </div>
  <div id="container"></div>
  
  <!-- Including the JavaScript library and code below -->
  <script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-core.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-graph.min.js"></script>
  
  <script>
    // Execute when the document is ready
    anychart.onDocumentReady(function() {
      // Generate 500 nodes dynamically and sample edges with random properties
      var nodes = [];
      for (var i = 0; i < 500; i++) {
        nodes.push({
          id: 'node' + i,
          name: 'Node ' + i,
          size: Math.floor(Math.random() * 20) + 10,  // Node size between 10 and 30
          group: Math.floor(Math.random() * 5)         // Random group for color coding
        });
      }
      
      var edges = [];
      // Create a higher number of edges to reflect complexity
      for (var j = 0; j < 1000; j++) {
        var source = 'node' + Math.floor(Math.random() * 500);
        var target = 'node' + Math.floor(Math.random() * 500);
        // Avoid self-loop edges
        if (source === target) continue;
        edges.push({
          from: source,
          to: target,
          weight: Math.floor(Math.random() * 10) + 1 // Edge weight between 1 and 10
        });
      }
      
      // Combine nodes and edges into a single data set
      var graphData = nodes.concat(edges);
      
      // Create a network graph chart
      var chart = anychart.graph();
      chart.data({
        nodes: nodes,
        edges: edges
      });
      
      // Set title and configure layout
      chart.title('Interactive Network Graph (500 Nodes)');
      chart.layout().type('force'); // Using the force-directed layout by default
      
      // Configure node appearance with a custom color scheme based on group property
      var colorPalette = ['#69b3a2', '#ff9896', '#9467bd', '#e377c2', '#7f7f7f'];
      chart.nodes().normal().fill(function() {
        var group = this.get('group');
        return colorPalette[group % colorPalette.length];
      });
      
      // Style the edges
      chart.edges().normal().stroke('#b3b3b3');
      
      // Enable smooth interaction features like selection and tooltips
      chart.interactivity('selection');
      chart.tooltip().titleFormat('Node: {%name}');
      
      // Draw the chart in the container
      chart.container('container');
      chart.draw();
      
      // ---------- Filter Functionality ----------
      // Function to filter nodes by minimum size
      function filterGraph() {
        var minSize = parseInt(document.getElementById('nodeSizeFilter').value, 10);
        var minWeight = parseInt(document.getElementById('edgeWeightFilter').value, 10);
        
        // Filter nodes: show only nodes with size greater than or equal to the slider value
        chart.nodes().filter(function() {
          return this.get('size') >= minSize;
        });
        
        // Filter edges: show only edges with weight greater than or equal to selected value
        chart.edges().filter(function() {
          return this.get('weight') >= minWeight;
        });
        chart.draw();
      }
      
      // Function to reset filters
      function resetGraphFilters() {
        // Removing any custom filtering; redraw complete chart
        chart.nodes().clearFilter();
        chart.edges().clearFilter();
        document.getElementById('nodeSizeFilter').value = 10;
        document.getElementById('edgeWeightFilter').value = 1;
        // Reset layout to default force directed for clarity
        chart.layout().type('force');
        chart.draw();
      }
      
      // Assign filter actions to button events
      document.getElementById('applyFilters').addEventListener('click', function() {
        // Allow users to change layout via dropdown
        var layoutChoice = document.getElementById('layoutSelect').value;
        chart.layout().type(layoutChoice);
        filterGraph();
      });
      
      document.getElementById('resetFilters').addEventListener('click', function() {
        resetGraphFilters();
      });
    });
  </script>
</body>
</html>

Explanation of the JavaScript Code

This code performs several key tasks:

Data Generation: A loop constructs an array of 500 nodes with random sizes and group identifiers. A separate loop generates 1000 edges connecting these nodes, each assigned a random weight.
Graph Initialization: The AnyChart graph is initialized with the combined node and edge datasets. The graph’s layout is set to force-directed by default, ensuring a natural spread.
Custom Styling: Nodes are colored based on their group property, utilizing a predefined palette. The edges receive a gray tone to emphasize node connections.
Interactivity: Tooltips and selection interactivity are enabled for a more engaging experience. Users can inspect individual nodes by hovering over them.
Filtering: Two range controls (sliders) allow users to set minimum values for node sizes and edge weights. The script filters out the unwanted elements and redraws the graph. Additional layout selection is available to change the graph’s arrangement dynamically.

Visualization Enhancements

To further improve the understanding of the data, you could include a table summarizing the graph statistics below the visualization area. For instance, the table below shows a sample structure to update in real time with the number of visible nodes and edges.

Graph Statistics Table

Metric	Value
Total Nodes	500
Total Edges	~1000
Filtered Nodes	Calculated Dynamically
Filtered Edges	Calculated Dynamically

This table can be updated via JavaScript (using methods to count visible elements) to provide real-time analytics while users adjust filters or change layouts.

Conclusion

The provided HTML code sets up an interactive network graph that not only visualizes 500 nodes with randomly generated properties but also integrates advanced filtering options to help analyze complex inter-node relationships. With a responsive layout and interactive controls, users are empowered to explore data in an engaging, visual manner. The combination of dynamic data generation, custom styling based on node properties, and user-driven filtering ensures that the visualization remains comprehensible even as the dataset scales. This example offers a solid foundation, which can be further expanded with additional features such as node labeling, export options, and performance optimizations using web workers if needed.

References

How to Create JavaScript Network Graph - AnyChart
Network Graph - D3 Graph Gallery
Cytoscape.js - Network Graph Library
AnyChart CDN Library Resources