Network matrix

Network matrices show how objects in a system are related to one another. Compared to other network diagrams like force-directed graphs, network matrices are more structured and can be easier to read.

Moreover, unlike force-directed graphs, network matrices differentiate between a connection from node A to node B, and a connection from node B to node A. This can be particularly useful when the connections between objects have directionality (i.e., trips from one station to another station).

This diagram was based on Mike Bostock's co-occurrence matrix.

Create a network matrix

This network matrix shows the connections between bike share stations in the San Francisco Bay Area. Each square shows how many trips started from the left station and ended at the top station. The darker the square, the more trips between the two stations. The color of the square shows the city the stations are in.

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.networkMatrix( 
    {
      "html_element": "#network-matrix",
      "node_query": "Stations",
      "edge_query": "Trips",
      "title": "SF Bike Share Network",
      "chart_width": 900,
      "chart_height": 900,
      "padding_for_names": 255,
      "left_label": "Starting station",
      "top_label": "Ending station",
      "group_colors": {
        "San Francisco": "#37B067",
        "San Jose": "#894FBA",
        "Mountain View": "#22A3C0",
        "Palo Alto": "#EE7437",
        "Redwood City": "#DA364A"
      }
    }
  )
</script>

You can customize the force_directed layout 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 network matrix's title.
• chart_width: Width of the chart in pixels.
• chart_height: Height of the chart in pixels.
• padding_for_names: The amount of padding for labels on the top and left of the matrix.
• left_label: The label for the left nodes. These nodes represent source nodes.
• top_label: The label for the top nodes. These nodes represent target nodes.
• group_colors: Hex codes for the colors of each group.

Guidelines for network matrix queries

Unlike most of the other examples in the Gallery, network matrices 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 two columns:

• node: The name of the node.
• node_group: The name of the group the node belongs to.

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.