Connections — Map Your Network: draw relationship networks as force-directed graphs

Connections is a tool for mapping the relationships in a network — between people, bird species with overlapping habitats, whatever you like. Enter the connections and it draws the graph.

Your data stays in your browser. Networks are force-simulated using D3.js with d3-bboxCollide.

Adding content to the graph

Type the names you're drawing lines between — your connectees — on either side of the dash in the connections tab. When you leave that row, the graph updates automatically, and any new connectees are added in the connectees tab. You can add or edit connectees directly in the connectees tab as well.

Navigation & interactions

Mouse: Drag connectees to move them, pinch to zoom, drag to pan. Double-click a connection line or connectee to scroll to it in the data entry area. Resize the data entry area by double clicking (desktop), clicking (mobile), or pulling on the dot in the header row. Select rows by clicking on their row numbers.

Hotkeys: In the data entry area, tab or enter to accept autocomplete and to advance through the fields, shift + tab to back up, escape to clear autocomplete suggestions. Common hotkeys for undo/redo, copy/paste, select-all/deselect, and scroll to beginning/end are also available.

Copy/paste: You can paste text with your connections or connectees directly into the corresponding data entry tab. As long as your text is in a consistent format that looks something like “Kevin - Lori” with entries on separate lines, your content will be added to the graph. (Supported separators: tab, --, ->, →, ,, ;, -.)

Shuffle

Shuffle creates a fresh layout for your connections by randomizing the order they're in before the simulation pushes them around.

Font weighting

When weighting is on, the connectees with the most connections are shown in the largest fonts and those with the fewest are the smallest.

Grouping

Grouping color-codes clusters in your network. When the network is grouped, connectee styles are temporarily overridden — they return when you turn grouping off. (Uses Graphology's implementation of the Louvain algorithm for community detection, resolution 1.25.)

Styling

To change what connections and connectees look like, create styles in the styles tab. To apply them, select connection/s or connectee/s by clicking their row numbers, click the brackets icon, and select a style from the dropdown menu. You can also change the default appearance if you wish.

Legend

To indicate different kinds of relationships or related things, toggle the legend button on a style. The legend is only shown when the style is present on the graph. The style name appears as the key to what the style means.

Your data

Everything is saved automatically in your browser. Clearing your browser data will erase it — download as GraphML if you want a saved copy.

Uploading

To continue working on a network across browsers or devices, download as GraphML and then upload. With files from other apps, labels, connections, and positions are restored where available.

Downloads

Use the download button to export as PNG, SVG, or GraphML.

Delete-all

Delete-all (the trash button in the slide-out tray) clears all data from your browser except a flag that you've been to the site before. Recommended if you're sharing devices.

Limits

There's a maximum of 100 connectees and 1,000 connections per graph. Connectee names can be up to 30 characters. If you hit the max for connections or connectees and want to keep going, you can download as GraphML and continue in a tool for bigger data.

Sent. Thanks for the feedback.