Overview

Mode includes a variety of built-in charts, tables and other report visualizations. Once you successfully execute a SQL query, you can create a new visualization on top of it’s results from the report editor. In addition, you can add advanced visualizations using D3 or any JavaScript visualization library of your choosing. Explore the Mode Gallery to learn how to easily add advanced D3 visualizations to your reports.

Built-in visualizations

Chart

Mode includes a number of built-in charts that you can quickly build on top of query results and add to your reports. To add a new chart:

  1. Navigate to the report you want to modify and click Edit in the header.
  2. On the left side, find the query with the data you want to build a chart on top of and click the new modal-add Created with Sketch. button under it.
  3. Click Add Chart to enter the chart builder.
  4. Under Chart Settings, select the desired chart type dropdown menu and then follow the instructions in the middle of the screen to begin.

When a new chart is created, it is automatically added the Report Builder. Each column in your query’s data is categorized as either a measure or a dimension based on the data within it:

Dimension: Data that is typically qualitative and gives context to one or more measures (e.g., sales territory, customer ID, customer segment, etc.). Dimensions typically hold discrete data such as categories or hierarchies that cannot be aggregated.

Measure: Data that is quantitative and must be contextualized by one or more dimensions in order to be effectively consumed (e.g., revenue, number of customers, etc.). Measures can be aggregated (e.g., sum, average, count, etc.) and grouped by dimensions.

Once you’ve added a measure to your chart as a dependent variable (i.e., on the y-axis), click on it’s pill to adjust the type of aggregation that is performed.

Big Number

Big Number visuals are useful for highlighting key metrics and how those metrics change over time.

Big Number

To add a Big Number visualization to a report:

  1. Navigate to the report you want to modify and click Edit in the header.
  2. On the left side, find the query with the data you want to build a Big Number on top of and click the new modal-add Created with Sketch. button under it.
  3. Click Add Big Number and use the following options to configure your Big Number:

Value: The column you want to use in the Big Number chart.

Aggregate: The aggregate value you wish to display on the chart.

Sort by: This allows you to sort your query results, which will change the number that’s displayed as the Last Value. You can sort by column and ascending or descending order.

Trend: If you’ve selected Last Value as the aggregate, you can choose to display the rate of change or the total change under the Big Number value.

Compare To: The value you want to compare against the Last Value.

  • Previous Value: The value in the row directly above the Last Value.
  • First Value: The value in the top row in the table. This value is determined by the Sort by field.
  • Custom: This allows you to compare the Last Value against a value several values back (e.g. compare the Last Value to a value that is three values back).

Display table

The first time you successfully execute a query, a display table containing the query results is automatically added to your report. By default, data tables display all columns returned in the underlying query and each column is formatted based on the data within each column.

Click on Display Table under any query in your report to control that how that query’s display table is formatted, sorted, and show/hide columns:

  • Columns: Un-check any columns on the right side to remove them from the table.
  • Sort: Click on the header of the column you’d like to sort by and click the drop down button that appears on the right side to choose how you want the table sorted.
  • Formatting: Click on the column header for any column and you can customize it’s data formatting using the drop down menu on the right. Depending on which format you choose, a number of additional customization options will appear.

Pivot table

A pivot table can help you aggregate, summarize or organize query results by allowing you to easily sum, average, and count items and display the results to users. Mode allows you to easily create a pivot table on top of any set of query results:

  1. Navigate to the report you want to modify and click Edit in the header.
  2. On the left side, find the query with the data you want to build a pivot table on top of and click the new modal-add Created with Sketch. button under it.
  3. Click Add Pivot Table.
  4. Drag and drop fields from your query results to the quadrants on the bottom right to configure. Set columns and rows to choose the value you want to display. Fields should be dragged into the Rows quadrant in the order of nesting.
  5. Your pivot table will be automatically added to the report builder, and just like any other report element, it can be adjusted within the report builder.

Text box

Text boxes can include text, links, images and more to enrich and add context to your Mode report.

  1. Navigate to the report you want to modify and click Edit in the header.
  2. In the Reporting section on the left, click on Report Builder.
  3. Click Add Text.
  4. A new text box will be added to your report. You can input text, links, or embed an image.
  5. Click anywhere outside the text box to save your text box.

Mode offers common keyboard shortcuts while editing text boxes. You can re-arrange or re-size your text elements the same way you would any other report element. To remove a text box, click on it and then click Remove in the toolbar.

Remove or hide a visualization

Hover over the visualization’s name on the left side of the report editor and click the menu-dots-gray-press Created with Sketch. button next to it to:

  • Duplicate: Creates a copy of the visualization that you can modify.
  • Add to builder: Adds the visualization to your report if it is not already there.
  • Remove from builder: Removes the visualization from your report but does not delete it. It can be re-added later.
  • Delete: Removes the visualization from your report and deletes it from the query.

Notebook visualizations

You can build compelling visualizations using any of the included Python or R libraries in the Notebook. The contents of any output cell can be added to your report. Learn more about using the Notebook to build compelling visualizations.

Advanced visualizations

HTML Editor

To make completely custom data visualizations, go to the Report Builder and click Edit HTML*.

The HTML Editor

You will see several lines of code. Lines 2 and 3 add your report’s title and description into your report (which you can set by clicking on “Untitled Report” in the top blue bar). You can override this with other copy if you like, or add additional paragraphs of description.

Starting on line 5, you’ll see one line of code for each chart and table in your report. For each table, you’ll see a mode-table element; for each standard chart, you’ll see a mode-chart element.

To remove these elements, you can delete the corresponding line of code. Note that this removes the charts and tables from the layout, but doesn’t remove them from your report. You can also remove charts and tables by hovering over the element and clicking X, or by clicking on the menu-dots-gray-press Created with Sketch. button next to the element in the left navigator menu and clicking Remove from layout.

After changing code in the HTML Editor, click Update to preview your visualization. If your cursor is active in the HTML Editor, you can also use Ctrl/Cmd + Return to save and update the report layout.

Accessing query results using JavaScript

If you have a single query in your report, the result of that query is available as a JSON object that you can call in a script block in the HTML Editor using this statement:

dataset.content

As an example, check out this report. The query returns the same result as the map example above. The presentation, however, has been changed to simply log the JSON result object in your browser’s console.

If you’re working with multiple queries in one report, the results of all the queries will be available in a JSON array known as datasets. Here are the statements you can use to call on each query:

  • To call the first query, use datasets[0].content.
  • To call the second query, use datasets[1].content.
  • To call the third query, use datasets[2].content.

And so on. The order of the queries is determined by the date they were created, regardless of how they’re organized within the HTML Editor or the report. However, each element in the datasets list also includes the name of the query. For example, datasets[0].queryName will return the name of the first query. If you want to refer to a query result by name, you can using this JavaScript filter() method. This example shows how to get the results of a query called “My Second Query”:

var data = datasets.filter(function(d) { return d.queryName == "My Second Query"; })[0].content;

As a shortcut, you can always use dataset.content to call the results of the first query. In other words, datasets[0].content = dataset.content.

Once the JSON object is available in your script block, you can use it as you would any other JSON object. For a simple example of this, see this report with a simple D3 bar chart. Line 56 replaces the d3.tsv function on line 55 (and the closing brackets for that function on line 85). Aside from this change and the omission of the D3 script tag (discussed below), the presentation code is identical to the code used to create the original chart on D3’s gallery page.

Including external assets

Mode also allows you to include JavaScript libraries and other assets (stylesheets, images, JSON files, etc.) in your presentation. To include other assets, simply reference them via URL as you would normally. When including external assets, however, two further points are worth mentioning:

  • Assets must be hosted elsewhere. Mode doesn’t host assets at this time.
  • Assets must be loaded over HTTPS. Therefore, all of your URLs should look like this: https://example.com/myscript. URLs that begin with http:, like this one http://example.com/myscript, will NOT work.

D3 (v3.1.5) and JQuery (v1.10.2), two JavaScript libraries commonly used for data visualization, are pre-loaded into the presentation. You do not need to add script tags to include these libraries.

To see an example of how to include external assets, take a look at the population map from above. Two JavaScript libraries—TopoJSON and Underscore.js—are added on lines 190 and 191 of the presentation code, while the JSON required to draw the U.S. map is loaded on line 244.

Last updated May 17, 2018