Force-directed graph

Force-directed graphs can help visualize connections between objects in a network. Because force-directed graphs naturally cluster objects that are well connected, they can be both visually interesting and help uncover relationships between groups that may not be obvious otherwise.

Create a force-directed graph

This force-directed graph shows the connections between bike share stations in the San Francisco Bay Area. Each circle represents a station. The color of the circle shows the city the station is in, and the size of the circle shows how many rides start from that station. The rides between stations are represented by the grey bars. The thicker the bar, the more rides connect the two stations.

View Mode Analysis

Click Powered by Mode to duplicate this report and add links to your tables. Learn more about using HTML to customize your reports.

Add the stylesheet link and script tag to the top of the HTML:

<link rel="stylesheet" href="https://mode.github.io/alamode/alamode.min.css">
<script src="https://mode.github.io/alamode/alamode.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script>

This tag calls back to an open-source library called alamode.js, which provides an easy way to build some of our users' favorite visualizations.

Add the customizable snippet at the bottom of the HTML:

	<script>
	  alamode.forceDirectedGraph( 
  		{
    	  "html_element": "#force-directed-graph",
    	  "node_query": "Stations",
    	  "edge_query": "Trips",
    	  "title": "SF Bike Share network",
    	  "chart_width": 1000,
    	  "chart_height": 1000,
    	  "group_colors": {
    	    "San Francisco": "#37B067",
    	    "San Jose": "#894FBA",
    	    "Mountain View": "#22A3C0",
    	    "Palo Alto": "#EE7437",
    	    "Redwood City": "#DA364A"
    	  },
    	  "links_to_show":1000
  		}
	  )
	</script>

You can customize the force-directed graph by editing each of these parameters in the snippet:

• html_element: If not provided, the map will be added as the last element in the report. To place it elsewhere, select an element in your report with this parameter.
• node_query: The name of the query that returns the dataset you want to use as your nodes. Details about what should be in this query are shown below.
• edge_query: The name of the query that returns the dataset you want to use as your edges. Details about what should be in this query are shown below.
• title: The force-directed graph's title.
• chart_width: Width of the chart in pixels.
• chart_height: Height of the chart in pixels.
• group_colors: Hex codes for the colors of each group.
• links_to_show: The number of links you want to show. The graph will order links from largest to smallest, so if you choose 1000, it will show the 1000 strongest links. If you're experiencing performance troubles with your graph, try showing fewer links.

Guidelines for force-directed graph queries

Unlike most of the other examples in the Gallery, force-directed graphs require two queries.

The first query is the node_query. This query should return one row for each node in your network. The query should include at least three columns:

• node: The name of the node.
• node_group: The name of the group the node belongs to.
• node_size: A value representing the size of your node. If you want all the nodes to be the same size, you can return the same value for each node.

The second query is the edge_query. This query should return one row per edge in your network. The query should include at least three columns:

• source: The name of the source node.
• target: The name of the target node.
• edge_size: A value representing the strength of the connection.

Note that for the force-directed graphs, there's no way to distinguish between connections from node A to node B and connections from node B to node A. If your query returns one row for each of these connections, the graph will sum the edge_size of each row into a single value, and use that value to determine the size of the link.