@jmoncada/vis-graph

A web component for visualizing SPARQL knowledge graphs with D3.js and configurable visual mapping.

✨ Features

• 🚀 Simple API: Configure properties → call launch() → done!
• 🔄 Multiple data sources: SPARQL endpoints, JSON data, or manual nodes/links
• 🌐 Smart CORS handling: Automatic proxy fallback for cross-origin requests
• 🎨 Visual mapping system: JSON-based styling inspired by Vega-Lite
• 📊 Interactive visualization: Drag, zoom, hover, and contextual details
• 🔍 Intelligent data transformation: Automatic node labeling and deduplication
• 🛠️ Zero dependencies: Self-contained web component (D3.js included)

🚀 Quick Start

Installation

npm install @jmoncada/vis-graph

📖 Quick Usage

1. Import

Option A: ES Module (recommended with a bundler)

import '@jmoncada/vis-graph';

Option B: UMD (for direct use in browser via <script>)

Include the script in your HTML.

<script src="https://unpkg.com/@jmoncada/vis-graph@latest/dist/vis-graph.umd.js"></script>

2. Usage

To get started with the vis-graph component and explore its capabilities, check out the vis-graph Component Guide.
This guide covers everything from basic usage to advanced configuration, including internal operation and component architecture, so you can make the most of your knowledge graph visualizations.

What the component does for you:

The vis-graph component handles the complexity behind the scenes. When you call launch():

• It uses its internal SparqlDataFetcher.
• It automatically tries to connect to the endpoint.
• If it fails due to CORS, it automatically uses the configured proxy.
• It transforms the raw SPARQL results into a graph structure (nodes and links).
• It renders the interactive graph using D3.js.

You don't need to worry about the details, just provide the configuration and the component does the rest.

Documentation

📚 Detailed guides available:

• vis-graph Component Guide - Internal operation and component architecture
• SparqlDataFetcher Guide - Simple usage of the data retrieval module
• SPARQL Proxy Configuration - Resolving CORS issues
• Domain Calculator Guide - Automatic domain calculation for visual encodings
• Color Scale Calculator Guide - Smart color palette generation
• Visual Encoding System - Complete guide to the visual encoding system

📄 License

This project is licensed under MIT.