Skip to main content

Neighbourhood Views

Use popups and JsPlumb's ability to dynamically render selections to provide neighbourhood contextual information for some selected element
Vanilla JS
React
Angular
Vue
Svelte
Typescript
JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more

The source code for this demo is available on Github.

Vanilla JS
https://github.com/jsplumb-demonstrations/neighbourhood-views

If you haven't got a license for JsPlumb, we offer 30 day evaluations.

Start a free trial
Neighbourhood Views

This demonstration illustrates how you can use JsPlumb to render dynamically changing selections. Each popup window provides a detailed view of some aspect of the selected node's relationships with the nodes around it.

Click on a node to select it and see the popups change their content.

Click on a category button at the top (or a popup header) to toggle its display

View documentation
More Demos
See all demos

Flowchart builder application - JsPlumb, industry standard diagramming and rich visual UI Javascript library

Flowchart

Gantt chart builder application - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow

Gantt

Chatbot builder application - JsPlumb, industry standard diagramming and rich visual UI Javascript library

Chatbot

Callflow builder application - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow

Call Flow

Kanban application - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more

Kanban

Network topology diagram builder - JsPlumb, industry standard diagramming and rich visual UI Javascript library

Network Topology

Database schema builder application - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow

Database Schema

Org Chart application - JsPlumb - Angular, React, Vue, Svelte diagramming library

Org Chart

Mindmap builder application - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more

Mindmap

Element grouping demonstration - JsPlumb, build diagrams and rich visual UIs fast

Nested Groups

Path tracing demonstration - JsPlumb, build diagrams and rich visual UIs fast

Path Tracing

Hello world demonstration - JsPlumb, build diagrams and rich visual UIs fast

Hello World

Image processor application - JsPlumb, industry standard diagramming and rich visual UI Javascript library

Image Processor

Neighbour views dynamic selections demonstration - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow

Neighbourhood Views

Active filtering demonstration - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow

Active Filtering

Org chart layout demonstration - JsPlumb, industry standard diagramming and rich visual UI Javascript library

Hierarchy Layout

CAD Drawing tools demonstration - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow

Connector Editors

Force directed layout demonstration, org chart layout demonstration - JsPlumb, industry standard diagramming and rich visual UI Javascript library

Layouts

Collapsible hierarchy Italic language family demonstration - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more

Collapsible Hierarchy

Nested instances desktop example - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs

Nested Instances