Skip to content

Commit 10d4a3a

Browse files
michaeloboyleclaude
michaeloboyle
and
claude
committed
feat: Add Vis.js interactive graph visualizations to use case examples
Enhanced landing page use cases with interactive Vis.js network visualizations: **Job Search Example:** - User → Skills → Jobs → Companies - Query: Find remote jobs matching user skills - Animated query path highlighting **E-Commerce Example:** - Users → Products → Recommendations - Query: Recommend products based on purchases - Collaborative filtering visualization **Social Network Example:** - User → Friends → Friend-of-Friends - Query: Friend-of-friend suggestions - Network graph with relationship paths **CRM Example:** - Deals → Companies → Contacts - Query: Find C-level decision makers for deals - Company hierarchy visualization **Features:** - Interactive "Run Query" buttons animate query execution - Auto-play on scroll into view (first time only) - Real-time graph highlighting shows query traversal - Code snippets with syntax highlighting - Responsive design (300px → 250px → 200px on mobile) - Matches landing page design system (orange primary color) - 4 complete examples with nodes, edges, and query paths **Technical Implementation:** - Vis.js v9.1.6 CDN integration - Custom graph configurations per use case - Smooth animations with focus transitions - Physics simulation disabled after initial layout - IntersectionObserver for auto-play - Mobile-optimized graph heights and code font sizes 🤖 Generated with Claude Code https://claude.com/claude-code Co-Authored-By: Claude <[email protected]>
1 parent 48cc38c commit 10d4a3a

File tree

3 files changed

+423
-8
lines changed

3 files changed

+423
-8
lines changed

‎landing-page/css/style.css‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -475,6 +475,58 @@ body {
475475
color: var(--primary-dark);
476476
}
477477

478+
/* Graph Visualizations */
479+
.graph-visualization {
480+
width: 100%;
481+
height: 300px;
482+
margin: var(--space-md) 0;
483+
border: 1px solid var(--border);
484+
border-radius: var(--radius-md);
485+
background: var(--bg-secondary);
486+
}
487+
488+
.animate-query-btn {
489+
width: 100%;
490+
padding: 0.75rem 1.5rem;
491+
background: var(--primary);
492+
color: white;
493+
border: none;
494+
border-radius: var(--radius-md);
495+
font-weight: 600;
496+
cursor: pointer;
497+
transition: all 0.2s;
498+
font-size: 0.875rem;
499+
margin-bottom: var(--space-md);
500+
}
501+
502+
.animate-query-btn:hover {
503+
background: var(--primary-dark);
504+
transform: translateY(-1px);
505+
box-shadow: var(--shadow-md);
506+
}
507+
508+
.animate-query-btn:active {
509+
transform: translateY(0);
510+
}
511+
512+
.code-snippet {
513+
background: var(--bg-dark);
514+
border-radius: var(--radius-md);
515+
padding: var(--space-md);
516+
overflow-x: auto;
517+
}
518+
519+
.code-snippet pre {
520+
margin: 0;
521+
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
522+
font-size: 0.75rem;
523+
line-height: 1.6;
524+
}
525+
526+
.code-snippet code {
527+
color: #E5E7EB;
528+
}
529+
478530
/* Pricing */
479531
.pricing {
480532
padding: var(--space-3xl) 0;
@@ -789,6 +841,18 @@ body {
789841
.code-content pre {
790842
font-size: 0.75rem;
791843
}
844+
845+
.graph-visualization {
846+
height: 250px;
847+
}
848+
849+
.code-snippet pre {
850+
font-size: 0.625rem;
851+
}
852+
853+
.use-cases-grid {
854+
grid-template-columns: 1fr;
855+
}
792856
}
793857

794858
@media (max-width: 480px) {
@@ -807,4 +871,21 @@ body {
807871
.price-amount {
808872
font-size: 2.5rem;
809873
}
874+
875+
.graph-visualization {
876+
height: 200px;
877+
}
878+
879+
.code-snippet {
880+
padding: var(--space-sm);
881+
}
882+
883+
.code-snippet pre {
884+
font-size: 0.625rem;
885+
}
886+
887+
.animate-query-btn {
888+
font-size: 0.8125rem;
889+
padding: 0.625rem 1.25rem;
890+
}
810891
}

‎landing-page/index.html‎

Lines changed: 51 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
<link rel="preconnect" href="https://fonts.googleapis.com">
1111
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1212
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
13+
<!-- Vis.js Network Visualization -->
14+
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vis-network.min.js"></script>
1315
</head>
1416
<body>
1517
<!-- Navigation -->
@@ -193,29 +195,69 @@ <h3 class="feature-title">Enterprise Security</h3>
193195
<h2 class="section-title">Built for modern applications</h2>
194196
</div>
195197
<div class="use-cases-grid">
196-
<div class="use-case">
198+
<div class="use-case" data-example="job-search">
197199
<div class="use-case-icon">🔍</div>
198200
<h3>Job Boards & Recruiting</h3>
199201
<p>Connect jobs, companies, candidates, and skills. Query complex relationships instantly.</p>
200-
<a href="#" class="use-case-link">See example →</a>
202+
<div id="graph-job-search" class="graph-visualization"></div>
203+
<button class="animate-query-btn" data-target="job-search">▶ Run Query</button>
204+
<div class="code-snippet">
205+
<pre><code><span class="code-comment">// Find remote jobs matching my skills</span>
206+
<span class="code-keyword">const</span> jobs = <span class="code-keyword">await</span> db
207+
.<span class="code-function">nodes</span>(<span class="code-string">'User'</span>, { id: <span class="code-string">'me'</span> })
208+
.<span class="code-function">follow</span>(<span class="code-string">'HAS_SKILL'</span>)
209+
.<span class="code-function">follow</span>(<span class="code-string">'-REQUIRES_SKILL'</span>)
210+
.<span class="code-function">where</span>({ remote: <span class="code-keyword">true</span> })
211+
.<span class="code-function">exec</span>();</code></pre>
212+
</div>
201213
</div>
202-
<div class="use-case">
214+
<div class="use-case" data-example="ecommerce">
203215
<div class="use-case-icon">🛒</div>
204216
<h3>E-Commerce</h3>
205217
<p>Product recommendations, user preferences, purchase history. Real-time personalization.</p>
206-
<a href="#" class="use-case-link">See example →</a>
218+
<div id="graph-ecommerce" class="graph-visualization"></div>
219+
<button class="animate-query-btn" data-target="ecommerce">▶ Run Query</button>
220+
<div class="code-snippet">
221+
<pre><code><span class="code-comment">// Recommend products based on purchases</span>
222+
<span class="code-keyword">const</span> recommended = <span class="code-keyword">await</span> db
223+
.<span class="code-function">nodes</span>(<span class="code-string">'User'</span>, { id: userId })
224+
.<span class="code-function">follow</span>(<span class="code-string">'PURCHASED'</span>)
225+
.<span class="code-function">follow</span>(<span class="code-string">'-PURCHASED'</span>)
226+
.<span class="code-function">groupBy</span>(<span class="code-string">'id'</span>)
227+
.<span class="code-function">exec</span>();</code></pre>
228+
</div>
207229
</div>
208-
<div class="use-case">
230+
<div class="use-case" data-example="social">
209231
<div class="use-case-icon">👥</div>
210232
<h3>Social Networks</h3>
211233
<p>Friend graphs, follows, feeds. Scale to millions of connections effortlessly.</p>
212-
<a href="#" class="use-case-link">See example →</a>
234+
<div id="graph-social" class="graph-visualization"></div>
235+
<button class="animate-query-btn" data-target="social">▶ Run Query</button>
236+
<div class="code-snippet">
237+
<pre><code><span class="code-comment">// Friend-of-friend suggestions</span>
238+
<span class="code-keyword">const</span> suggestions = <span class="code-keyword">await</span> db
239+
.<span class="code-function">nodes</span>(<span class="code-string">'User'</span>, { id: <span class="code-string">'me'</span> })
240+
.<span class="code-function">follow</span>(<span class="code-string">'FRIENDS_WITH'</span>)
241+
.<span class="code-function">follow</span>(<span class="code-string">'FRIENDS_WITH'</span>)
242+
.<span class="code-function">except</span>(myFriends)
243+
.<span class="code-function">exec</span>();</code></pre>
244+
</div>
213245
</div>
214-
<div class="use-case">
246+
<div class="use-case" data-example="crm">
215247
<div class="use-case-icon">🎯</div>
216248
<h3>CRM & Sales</h3>
217249
<p>Company hierarchies, deal pipelines, contact networks. Track every relationship.</p>
218-
<a href="#" class="use-case-link">See example →</a>
250+
<div id="graph-crm" class="graph-visualization"></div>
251+
<button class="animate-query-btn" data-target="crm">▶ Run Query</button>
252+
<div class="code-snippet">
253+
<pre><code><span class="code-comment">// Find decision makers for deals</span>
254+
<span class="code-keyword">const</span> contacts = <span class="code-keyword">await</span> db
255+
.<span class="code-function">nodes</span>(<span class="code-string">'Deal'</span>, { stage: <span class="code-string">'negotiation'</span> })
256+
.<span class="code-function">follow</span>(<span class="code-string">'AT_COMPANY'</span>)
257+
.<span class="code-function">follow</span>(<span class="code-string">'-WORKS_AT'</span>)
258+
.<span class="code-function">where</span>({ role: <span class="code-string">'C-level'</span> })
259+
.<span class="code-function">exec</span>();</code></pre>
260+
</div>
219261
</div>
220262
</div>
221263
</div>
@@ -564,5 +606,6 @@ <h4>Company</h4>
564606
</footer>
565607

566608
<script src="js/main.js"></script>
609+
<script src="js/examples.js"></script>
567610
</body>
568611
</html>

0 commit comments

Comments
 (0)