Mode allows you to create advanced presentations and visualizations using standard web technologies: HTML, CSS, and JavaScript. Check out the Mode Example Gallery to see what kinds of visualizations you can create.

Here are tutorials on how to make the two most common advanced visualizations we get asked about: heatmaps and word clouds.

Getting familiar with the 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 the “X”, or by clicking on the three-dot menu next to the element in the left navigator menu and selecting “Remove from layout.”)

After changing code in the HTML Editor, click Update to check what your visualization looks like. 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 in the presentation

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 preloaded 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 April 18, 2018