Your First Interactive Graph in Under 5 Minutes with Graph.do

In a world drowning in data, traditional spreadsheets and tables often hide the most valuable insights: the relationships between the data points. Whether you're mapping a social network, a complex supply chain, or a knowledge base, understanding connections is key. This is where graph visualization shines, and with graph.do, creating a powerful, interactive network graph has never been easier.

Follow this step-by-step guide to take a simple dataset and turn it into a dynamic, explorable visualization using the graph.do API. You'll be surprised at how quickly you can go from raw data to actionable insight.

Why Visualize Data as a Graph?

Before we dive in, let's touch on why this is so powerful. Graph databases and visualizations are purpose-built for relationship analysis. They allow you to:

• Uncover Hidden Patterns: Instantly see clusters, outliers, and critical connection points that are invisible in tabular data.
• Simplify Complexity: Represent intricate systems like IT infrastructure or biological pathways in an intuitive, human-readable format.
• Ask Deeper Questions: Move beyond "what" and "how many" to ask "how are these connected?" and "what is the path from A to B?".

graph.do takes this power and makes it accessible through a simple, developer-friendly API, acting as an agentic workflow platform to handle the heavy lifting for you.

Step 1: Project Setup

Let's get your environment ready. All you need is a Node.js environment. Open your terminal and install the graph.do SDK.

npm install @do/sdk

That's it. You're ready to start building.

Step 2: Define and Model Your Data

For our example, we'll model a small team. Notice how we have two types of data: the people (we'll call them nodes) and their relationships (we'll call them edges).

• Nodes: Alice (Engineer), Bob (Designer), and Chandra (Product Manager).
• Edges: Alice and Bob are colleagues. Chandra manages both Alice and Bob.

Now, let's translate this into a structure that the graph.do API can understand. Create a new file, for example create-graph.ts, and add the following code.

import { graph } from '@do/sdk';

async function buildMyGraph() {
  // Agentically create and visualize a graph
  console.log('Sending data to graph.do...');

  const myGraph = await graph.create({
    name: 'Project Team Network',
    nodes: [
      { id: 'alice', label: 'Alice', properties: { profession: 'Engineer', team: 'Apollo' } },
      { id: 'bob', label: 'Bob', properties: { profession: 'Designer', team: 'Apollo' } },
      { id: 'chandra', label: 'Chandra', properties: { profession: 'Product Manager', team: 'Apollo' } },
    ],
    edges: [
      { from: 'alice', to: 'bob', label: 'colleagues' },
      { from: 'chandra', to: 'alice', label: 'manages' },
      { from: 'chandra', to: 'bob', label: 'manages' },
    ],
  });

  console.log('Success! Your interactive graph is ready at:');
  console.log(myGraph.url); // Returns a URL to the interactive graph visualization
}

buildMyGraph();

Let's quickly break down this code:

• nodes: Each object in the nodes array represents an entity. It has a unique id, a label for display, and a properties object for storing rich, filterable data.
• edges: Each object here defines a relationship. The from and to properties use the id of the nodes to create a directed link, and the label describes the nature of that connection.

Step 3: Run the Code and Get Your Visualization

Save your file and run it from the terminal:

ts-node create-graph.ts

In seconds, you will see a response in your console:

Sending data to graph.do...
Success! Your interactive graph is ready at:
https://graph.do/v/a1b2c3d4-e5f6-7890-g1h2-i3j4k5l6m7n8

The "Wow" Moment: Your Interactive Graph

Copy the URL from your console and paste it into your browser. You'll see your data transformed into a clean, interactive network graph.

You can now:

• Click and drag nodes to rearrange the layout.
• Zoom and pan to focus on different areas.
• Click on a node or edge to see its full set of properties in an inspector panel.

What Just Happened? The Magic of Agentic Workflows

You didn't have to configure a database, set up a visualization library, or deploy a web server. So, how did this work?

This is the power of graph.do's agentic platform. When you called graph.create(), our agent:

1. Analyzed your simple JSON structure.
2. Provisioned the necessary graph backend resources.
3. Modeled the nodes and edges in an optimized graph database.
4. Generated an intuitive force-directed layout for your data.
5. Deployed a unique, shareable URL with an interactive UI.

graph.do isn't just a graph database; it's a complete "graph-as-a-service" workflow that handles the entire pipeline for you.

Next Steps: From Simple Scripts to Powerful Applications

You've just scratched the surface. Now you can easily see how this applies to more complex, real-world scenarios. Imagine feeding data from your existing sources:

• Social Networks: Map user interactions, friend connections, and community structures.
• Supply Chains: Visualize the flow of goods from raw materials to end customers.
• Fraud Detection: Connect accounts, transactions, and devices to spot fraudulent rings.
• Knowledge Graphs: Build a semantic network of your company's documents, products, and expertise.

Because graph.do is built on a scalable, cloud-native architecture and provides flexible data ingestion APIs, you can connect it to your existing databases or data lakes and build graphs with millions of nodes and edges.

Ready to transform your own complex data into powerful, interactive graphs? Visit graph.do to learn more and get started.