Visualizations

Overview

After using SQL to gather, structure and analyze all of the necessary data for your analysis, you can build visualizations on top of that data. Mode offers a number of options for building visualizations, including the ability to take your analysis even further using Python / R or using any type of custom visualization using JavaScript (e.g., D3).

Built-in charts and tables

Mode reports offer a number of built-in charts and tables that can be quickly built on top of query results.

To manage built-in charts and tables in the report editor, locate and hover over the visualization's name on the left side of the report editor and click the

More

button to:

  • Duplicate:

    Creates a copy of the visualization and adds it to the report layout.
  • Add to builder:

    Adds the visualization to your report's layout if it is not already there.
  • Remove from builder:

    Removes the visualization from the report layout but does not delete it from the editor.
  • Delete:

    Removes the visualization from your report layout and deletes it from the editor.

Tables

Tables display data in a format that is both customizable and easily digestable for end users. You can create new tables in many different ways. One option is to click on the green “Add Chart” dropdown in the query editor page. Once you land on the chart editor page, the default chart selection is Table.

Another option is to find the query with the data you want to display and click the green + button under it. From there, you select the “Add chart” option, and as with the first method once you land on the chart editor page the default chart selection is Table.

add chart

create table

Once you arrive at the chart editor page, a solid first step is to begin constructing your table. You can do this by dragging desired columns from the “Dimensions” and “Measures” fields over to the “Columns” section under the “Chart Settings” interface. Further, you can add columns that you wish to be used as filters under the “Filters” section.

Once you construct your table, there are many formatting options that you can apply to individual columns. You can access these formatting options by clicking on the “Format” dropdown located on the top header of the Chart Editor page.

format tables

One potential option is to display numeric data as currency or percent, and to increase/decrease decimal places. Another option is to display date entries as Mon Year, Year-Mon-Date, and Date and Time. A third option is to create URL links from string entries.

In addition to formatting the columns, you can also adjust the column width by clicking on the “Size" to fit" dropdown located on the top header of the Chart Editor page and selecting "Manually size"

Moreover, there are many formatting options that can be applied to table as a whole. You can access these options by clicking on the “Format” section directly to the right of the “Field” section. It is worth noting that any sorting/formatting options you select will persist beyond your current session and will determine how the Table appears on the Report page.

add table columns

One potential option is to display the table with alternating row colors. These alternating row colors tend to make Tables more presentable to end users. Another option is the ability to alter row heights to standard, compact, and open. By altering row heights on larger data sets, users can make more rows appear at once and reduce the amount of scrolling needed to navigate the data set. A third option is to show column/row gridlines, and to show row numbers

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. On the left side of the report editor, find the query with the data you want to visualize and click the

    New

    button under it.
  2. Click

    Add Chart

    .
  3. Under Chart Settings, select the desired chart type from the dropdown menu and then follow the instructions in the middle of the window.

Each column in your query's data is categorized as either a measure or a dimension based on the data it contains.

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 understood (e.g., revenue, number of customers, etc.). Measures are typically aggregated (e.g., using sum, average, count, etc.) and grouped by dimensions.

Once you add a measure to your chart as a dependent variable (i.e., on the y-axis), you can click on its pill to adjust the type of aggregation that is performed.

Big Values

Big value visualizations are useful for highlighting key metrics and how those metrics change over time. You can create new Big Values in many different ways. One option is to click on the green “Add Chart” dropdown in the query editor page. Once you land on the chart editor page, the default chart selection is Table. From there you can begin constructing a Big Value by navigating over to the Settings section and selecting the “Big Value” chart.

Another option is to find the query with the data you want to display and click the green + button under it. From there, you select the “Add chart” option, and as with the first method once you land on the chart editor page the default chart selection is Table, and you can switch over to Big Value by navigating to the Settings section and selecting the “Big Value” chart.

Present_Big_number

Once you navigate to the Big Value chart, you can use the following options to configure your Big Value. You can add any field from either Dimensions or Measures into each of these dropzones:

Present_Big_Values

  • Value: The field with the data you want to display. Click on the little arrow to the right of the column name to choose the aggregate type.
  • Trend By: The field that you would like to group the dataset by to determine the aggregate values. After you’ve dropped a field in here, the Value we display is the last one in your grouped dataset. Note that the the default sort order is ascending by the field you have in the *Trend by. *If you would like to alter the sorting, you can do so by clicking on the sort ascending and sort descending buttons in the toolbar above.
  • Indicator: Chooses how the inputted value compares to another value. Click on the little arrow to the right of the field name to choose the aggregate type, calculation format, and the value for comparing to the Big Value. Note: If you want to mirror the functionality of the Mode’s old Big Numbers, add the same field that you have in the Value dropzone to the Indicator dropzone.
  • Format: use format shortcuts at located in the top toolbar to the right panel’s to customize the formats of Value and Indicator. These options include plain text, currency, number, and percentage.

Display Table

** Note that we now no longer actively support Display Tables and we are in the process of sunsetting them at some point in the future **

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

Click on

Display Table

under any query in your report to control how that query's display table is formatted and sorted, and to show or hide columns:

  • Columns:

    Un-check any columns on the right side to remove them from the table.
  • Sort:

    Click the header of the column you'd like to sort the table by and click the

    drop down

    button to choose how you want the table sorted.
  • Formatting:

    Click on the column header for any column to see formatting options for that column on the right side of the window. Depending on which format you choose, a number of additional customization options will appear.

Big Number

** Note that we now no longer actively support Big Numbers and we are in the process of sunsetting them at some point in the future **

Big number

Big number visuals are useful for highlighting key metrics and how those metrics change over time. To add a big number visualization to a report:

  1. On the left side of the report editor, find the query with the data you want to visualize and click the

    New

    button under it.
  2. Click

    Add Big Number

    to add a new big number to the report layout.
  3. Use the following options to configure your big number:
  4. Value:

    The column with the data you want to display.
  5. Aggregate:

    How you want Mode to aggregate the data in the selected Value column for display.

When you select

Last Value

as the Aggregate method, there are additional options:

  • Sort by:

    Sorts the selected Value column. Last Value will display the top-most record in the column.
  • Trend:

    Includes a calculated trend below the big number's value using the rest of the value column's data, compared to another record in the selected value column of your choosing.

Pivot Table

A pivot table aggregates and summarizes (e.g., using sum, average, count, etc.) query results and presents them in a data table. To add a pivot table to a report:

  1. On the left side of the report editor, find the query with the data you want to display and click the

    New

    button under it.
  2. Click

    Add Pivot Table

    to add a new pivot table to the report's layout.
  3. Drag one or more fields to the quadrants on the bottom right to configure. Fields should be added to the rows quadrant in the order of nesting.

Notebook visualizations

Every report contains a built-in Notebook environment where you can take the results of one or more queries, further analyze them in Python or R, and visualize the results using one of the many built-in libraries.

The contents of any Notebook output cell can be added to your report. These visualizations will update whenever the Notebook is run and the output changes.

Advanced visualizations

The HTML editor lets you embed any valid HTML, JavaScript, or CSS that you'd like in the layout of your report, allowing you to add interactivity, custom visualizations, and more. To help you get started, Mode's community maintains the Alamode JavaScript library that makes creating D3 powered visualizations a snap.

Check out Mode's Gallery for inspiration, sample reports, and more information about how to create advanced visualizations in Mode.

Was this article helpful?

decorative particle

Get our weekly data newsletter

Work-related distractions for every data enthusiast.