Mode Analytics
Sign In
Sign Up

SQL Editor

Query your connected data sources with SQL

Notebooks

Use Python and R for advanced analysis

Reports

Build customizable, sharable reports


Compare plans Dashboards Security Embedded analytics Customers Integrations

Gallery Learn SQL Learn Python

Mode Business Blog Forum

Mode Analytics

Mode Business
Product

SQL Editor

Query your connected data sources with SQL

Notebooks

Use Python and R for advanced analysis

Reports

Build customizable, sharable reports

Compare plans Dashboards Embedded analytics Customers Integrations Security
Resources

Gallery

Explore example analysis and visualizations

Learn SQL

Answer data questions with SQL

Learn Python

Learn Python for business analysis

Documentation Getting started webinar Forum Blog Contact us
Sign In Sign Up – Free Forever
Gallery
  • Charts
  • Tables
  • Reports
  • Dashboards
Try Mode Business

Automate everything & equip everyone with Mode Business.

Request a Demo

Hive plot

Hive plots show how objects in network are related to each other. Like force-directed graphs, hive plots communicate how nodes are related through their position in the visualization. Unlike force-directed graphs, however, hive plots position nodes in a more orderly fashion, creating both a cleaner visualization and one capable of describing more information.

This diagram was based on Mike Bostock’s hive plot.

Create a hive plot

This hive plot shows the connections between bike share stations in the San Francisco Bay Area. Each axis represents a city. Each circle on the axes represents a bike station in that city. The further the circle is away from the center of the chart, the “bigger” the node (in this case, the more trips originate from that station). If a trip connects two stations, then a line is drawn between the two stations. Though it’s not used in this example, the angle of the axis can also communicate addition information.

Mode Analytics

Click Results à la Mode to clone 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.hive( 
  {
    "html_element": "#hive",
    "node_query": "Stations",
    "edge_query": "Trips",
    "groups_are_numeric": false,
    "title": "SF Bike Share network",
    "chart_width": 1000,
    "chart_height": 1000,
    "padding_for_names": 50,
    "group_colors": {
      "San Francisco": "#37B067",
      "San Jose": "#894FBA",
      "Mountain View": "#22A3C0",
      "Palo Alto": "#EE7437",
      "Redwood City": "#DA364A"
    }
  }
)
</script>

You can customize the hive plot 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.
  • groups_are_numeric: If the node_group values in the node_query are numeric, setting this parameter to true will use these values to determine the angle of the group axes. The lowest value will be positioned on to 12 o’clock axis, with axes rotating clockwise as they increase.
  • title: The hive plot’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.

Guidelines for hive plot queries

Unlike most of the other examples in the Gallery, hive plots 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.
  • node_size: A value representing the size of your node. This determines each circle’s position on its axis.

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.
Tags: charts

See more examples

  • Heat Map
  • Funnel chart
  • Chart annotations

<< Back to Gallery

Looks like you've got a thing for cutting-edge data news.

So do we. Stay in the know with our regular selection of the best analytics and data science pieces, plus occasional news from Mode. Sign up here and we'll keep you posted:

Thanks! Keep an eye on your inbox for the next newsletter!

Contact

Request a Demo

hi@modeanalytics.com

415-689-7436

208 Utah Street, Suite 400
San Francisco CA 94103

Product

Compare plans

Mode Business

SQL editor

Notebooks

Reports

Dashboards

Embedded analytics

Mode for Slack

Customers

Integrations

Security

Resources

Help & support

Getting started webinar

Forum

Learn SQL

Learn Python

Data jobs

Data news

Drag and drop webinar

Scaling analytics webinar

Retention analytics ebook

Salesforce CRM ebook

Company

About

Careers

Blog

© Mode Analytics, Inc. 2018 Terms of Service Privacy Policy