Build a Dynamic Knowledge Graph with Axure RP

Creating a Dynamic Knowledge Graph with Axure and a Spreadsheet: A Step-by-Step Guide

This tutorial will guide you through building a high-fidelity prototype of a dynamic knowledge graph using Axure RP and a spreadsheet. We'll cover key features like node creation, editing, deleting, and dragging and dropping, allowing for an interactive and engaging visual representation of your data.

Here’s what we'll accomplish:

• Building the Foundation: We'll start by setting up the basic structure of our knowledge graph, including nodes representing entities and edges connecting them.
• Interactive Node Creation: Learn how to add new nodes dynamically with user input, linking them to existing nodes based on selection.
• Node Editing: Discover how to edit node content directly within the prototype and update the underlying spreadsheet data.
• Node Deletion: Implement a straightforward process for deleting nodes from the graph.

Let's Dive In!

2.1 Setting Up the Canvas:

Begin by creating your Axure RP document. We'll use a few key widgets:

• Dynamic Panels: These panels will hold our nodes, allowing us to dynamically add and remove them as needed.
• Image Widgets: Represent individual nodes with images or icons.
• Text Widgets: Display node labels and content.
• Lines/Connectors: Visualize relationships between nodes using lines or connectors.

2.2 Adding Nodes:

1. Create a Button: This button will trigger the process of adding new nodes.

2. Dynamic Panel Behavior: When the "Add Node" button is clicked, a dynamic panel appears with text fields for node input and interactive elements for dragging and dropping.

3. Data Integration: Connect your spreadsheet data to the Axure RP prototype using a method like API integration or XML import. This will ensure that changes made in the spreadsheet automatically reflect in the prototype.

2.3 Node Interactions:

1. Selection: Implement click events on individual nodes to select them. Use visual cues (like highlighting) to indicate selection.
2. Dragging & Dropping: Allow users to drag and drop nodes to reposition them within the graph.

2.4 Adding Sub-Nodes:

1. Parent Node Selection: Allow users to select a parent node before adding a sub-node. Use visual feedback (like a highlight) to indicate selection.
2. Sub-Node Creation: When a user clicks "Add Sub-Node," display a new node, allowing them to input its label and position it relative to the parent node.

2.5 Editing Node Content:

1. Edit Button: Include an "Edit" button on each node that triggers an editing mode.
2. Input Field: Replace the node's label with a text input field, allowing users to modify its content.

2.6 Deleting Nodes:

1. Delete Button: Add a "Delete" button next to each node.

2. Confirmation Prompt: Before deleting a node, display a confirmation prompt to ensure the user wants to proceed.

Conclusion:

By following these steps, you'll be able to create an interactive and visually appealing knowledge graph prototype using Axure RP and a spreadsheet as your data source. This dynamic prototype will enable you to effectively communicate complex relationships and information in a clear and engaging manner.