Introduction to Glimpse
Glimpse is a native desktop application that facilitates the exploration, visualization, and communication of your data. Glimpse creates stand-alone HTML5 visualizations that are live, responsive, and interactive, and can also be exported to PDF, SVG, and PNG for sharing with the world.
This tutorial will guide through the fundamentals on how to work with Glimpse to produce a visualization and publish it.
The User Interface
First step is to become familiar with the Glimpse interface.
A. Outline Panel – B. Toolbar – C. Canvas – D. Inspector Panel – E. Encoding Channels – F. Data Grid – G. Width & Height
The left sidebar that contains and allows you to manage the data Sources, Data Transforms, visualization Layers, and data Fields.
The “+” button on the bottom of the Outline Panel allows you to Add Data Row, Add Data Field, Add Data Source and Add Transform, when a data source or the Data Grid is selected. When a layer is select, the “+” can Add Layer.
The standard macOS area where commonly-used buttons are placed. Can be customized by going View > Customize Toolbar…
The container for any visualizations drawn.
The right sidebar that holds the inspector for manipulating details of the current selection. The Inspector Panel is divided into three parts, which are each in turn subdivided into three parts:
Data - For editing parts of the data.
- Source - Editing or refreshing the selected data source.
- Field - Editing the settings of the selected data field.
Transform - Adding and editing Data Transforms.
Viz - For editing parts of the visualization.
- Mark - Editing the settings or appearance of Marks.
- Encoding - Changing the settings of the selected Encoding Channel.
Layer - Changing the settings of the selected layer.
Doc - For changing the document’s settings.
- Info - Editing the document’s information.
- Theme - Editing the settings of the document’s theme.
- Settings - Editing document settings.
The section between the Outline Panel and the Canvas that holds the various encoding wells for configuring an Encoding Channel. Here you can encode a data field to particular visual or interactive aspect of the visualization.
A collapsible section below the Canvas that contains an editable view of the input data source, as well as displaying a read-only view of the processed data that was used for the visualization.
Width & Height:
Displays the current dimension (in pixels) of the Canvas in terms of its width and height, which can be locked.
Adding Data Sources
Before a visualization can be created in Glimpse, first, there needs to be a data source. Data in Glimpse can be added externally or internally with the Data Grid.
External data can be imported into Glimpse in two ways:
- On the top menu by going Data > Add Source.
- On the bottom of the Encoding Channels by pressing the Source dropdown menu.
There are four types of external data sources you can import into Glimpse:
- File - A local file with a dataset in these file formats: CSV, TXT, JSON.
- URL - A web-based dataset that requires a URL address to link to a delimited or JSON data source.
- Clipboard - Pastes in a dataset via the clipboard after selecting and copying from an external source.
- Sample - Allows you to select from one of Glimpse’s native sample datasets.
However, for the purposes of this tutorial, the data will be entered in manually inside of Glimpse through the Data Grid, which you can open up by pressing this button on the bottom:
On any new document, the Data Grid will be blank. So the first thing to do is to double-click on the row along from 1 to create a new data field (or alternatively, going Data > Add Data Field… from the top menu).
Type in “Category” as this will be the first column where the category labels will be contained and after press Create.
To create a second field column, double-click on the highlighted row anywhere to right of the Category column (or go Data > Add Data Field… on the top menu). Type in “Values” and press Create.
To enter in the data into the cells, simply double-click on a cell that’s below a field and start typing. For the Category column write “A” and for the Values column write “28”.
Now to create a new row, go Data > Add Data Row on the top menu, or an even quicker way is to have a row selected and press ⌘ + C (to copy) and ⌘ + V (to paste). Nine rows in total are needed.
Edit the table in the Data Grid to include this dataset:
The Data Grid can be closed by pressing the button on the top-left.
In Glimpse, each field in a dataset will have a corresponding Field Token, which all are listed in the Outline under Fields. Field Tokens can be dragged and dropped into one of the Encoding Wells listed in the Encoding Channels.
Outputs from Data Transformations are also listed under Fields and can also be dragged into an Encoding Well.
If you look at the Outline under Fields, you should notice the two Field Tokens from the dataset that’s just been created:
Currently, the color of the two field tokens is grey, which means that no Measure type has been assigned. This is usually the case when data is inputted from within Glimpse but when the data is sourced externally, Glimpse will automatically a Measure type to each Field Token.
Note: When an output has been created from a Data Transformation, it will also appear as a grey token.
Measure types in Glimpse refer to the “level of measurement” or “scale of measure”, which is a classification system that describes the nature of information within the values assigned to variables (in Glimpse’s case, the fields). In Glimpse there are four types:
- Quantitative: Data that expresses some kind of quantity. Typically this is numerical data (e.g. 7.3, 42.0, 12.1). Quantitative data can represent either the ratio or interval level of measurement.
- Ordinal: Data that represents ranked order (1st, 2nd, 3rd, etc.) by which the data can be sorted. However, as opposed to quantitative data, there is no notion of relative degree of difference between them.
- Nominal: Also known as categorical data, Nominal differentiates between values based only on their names or labelling. For example, gender, nationality, music genre, and name.
- Temporal: For time-based data. Uses date-times and times such as “2015-03-07 12:32:17”, “17:01”, “2015-03-16”. “2015”, 1552199579097 (timestamp).
The coloring for Field Tokens is as follows:
A Field Token must have a Measure type assigned to it if it is to be visualized. If you try to drop an unspecified Field Token into an encoding well, Glimpse will automatically assign a Measure type to it.
To assign a measure to a Field Token, first click onto it (under Fields) and in the Inspector (under Data > Field) select an option from the Measure dropdown menu.
For the field Category, set the Measure to Nominal, and for the field Values, set the Measure to Quantitative.
Creating a Simple Visualization
Now that there’s some data contained within the document and the Measures have been assigned to the Field Tokens, a visualization can be created. For this example, the creation of a simple Bar Chart will be demonstrated.
The creation of any visualization in Glimpse requires the assigning of Field Tokens to the Encoding Channels/Wells. This can be done by first clicking and dragging a Field Token and moving it over to an Encoding Well and releasing the mouse button:
Move the field Category into the encoding X and the field Values into the encoding Y.
Note: The current Encoding Well selected is indicated by its icon being highlighted.
If the Mark type hasn’t been specified for a layer, then Glimpse will automatically assign, which in the below example has been assigned to Tick.
Marks are the basic visual building block of a visualization. They provide the basic shapes whose properties (such as position, size, color, etc.) can be used to visually encode data from a data field.
Glimpse supports the following “simple” mark types: Area, Arc, Bar, Circle, Line, Rectangle, Rule, Square, Text, Tick, and Trail. In addition, Glimpse also supports “composite” marks, which are more complex as a they made up of multiple simple marks: Box Plot, Error Bar, Error Band. Knowing what Marks to select and combine together is key to producing a particular visualization.
The Tick mark is hard to see and need to be changed into something more visible. Changing the Mark type can be done in two ways:
First, via the Mark menu on the bottom of the Encoding Channels:
Or second, through the Inspector panel under Viz > Mark with the dropdown menu at the top:
Select the Bar option to convert the visualization into a Bar Chart:
Customizing a Visualization
By default Glimpse makes some choices about the properties and styling of the visualization, but these can be changed with the Inspector panel on the right.
For example, the color of the bars can be changed by going Viz > Mark > Color and selecting a color from the Colors menu:
To make the bars thinner or thicker, go Viz > Mark > Size.
The axes can be edited by first select the relevant encoding (for example X, which has the field Category assigned to it) and going Viz > Encoding > Axis.
To remove the axis label, deactivate Title:
To edit the axis labels, open up Labels to get all the option to edit them:
To change the intervals and number of tick marks displayed (on the Values, Y-axis), open up Ticks > Distribution and enter in a number in Count.
Publishing a Visualization
Once a visualization is complete and requires no further customization, then it is ready for publishing. There are six main formats you can export to:
- PDF (Portable Document Format) - Typical file format for print used to present documents in a manner independent of application software, hardware, and operating systems. Each PDF file encapsulates a complete description of a fixed-layout, flat document, including the text, fonts, graphics, and any other information needed to display it. When exported to PDF, the visualization as a vector image.
- SVG (Scalable Vector Graphics) - An XML-based vector image format for 2D graphics with support for interactivity and animation, making SVGs ideal for online use. SVGs are useful for exporting a visualization into a vector image editing program like Adobe Illustrator for further refinement or adding to infographics.
- PNG (Portable Network Graphics) - The most widely used lossless, raster image compression format used on the Internet. PNGs were designed for transferring images on the Internet and not for printing, as PNGs do not support non-RGB color spaces such as CMYK. PNGs allows for either transparent or white backgrounds.
- HTML (Hypertext Markup Language) - is the standard markup language for documents designed to be displayed in a web browser. Visualizations are exported into a HTML5 stand-alone webpage that can be displayed online as live, responsive, and interactive visualizations for the web.
- Vega - Exports the document into Vega code in a JSON format. Vega is a visualization grammar, a declarative language for creating, saving, and sharing interactive visualization designs. With Vega, you can describe the visual appearance and interactive behavior of a visualization in a JSON format, and generate web-based views using Canvas or SVG.
- Vega Lite - Exports the document into Vega-Lite code in a JSON format. Vega-lite is a high-level visualization grammar. It provides a concise JSON syntax for supporting rapid generation of visualizations to support analysis.
Exporting a visualization from Glimpse can be done in two ways. First from the top menu by going Canvas > Export. The other way is by the export buttons on the Toolbar:
Clicking one of these buttons will open up a preview, which can be open from the button on the top-right:
However, to quickly export the visualization via these buttons, hold down the ⌥ key and press one of the export buttons on the Toolbar.
This concludes the introductory tutorial to using Glimpse. If you want to learn more about Glimpse, then please read the the documentation.