Getting Started

This page describes four things that you will need to learn in order to use Charticulator.

Terminology

  • A mark is a primitive graphical element (e.g., rectangle, line, text).

  • A glyph is a visual representation of a single data row. A glyph contains one or more marks.

  • A guide is an auxiliary element for positioning marks or glyphs. Guides do not appear in exported charts.

  • A plot segment lays out a set of glyphs.

  • A scaffold or an axis specifies the layout property of one particular direction in a plot segment. A scaffold specifies a basic stacking layout without data binding and an axis specifies a layout that is bound to properties of the data. An axis can position glyphs according to a categorical data attribute or to a numerical data attribute.

Terminology illustration

User Interface Components

Charticulator’s user interface consists of the following components:

  1. Dataset Panel: listing the columns in your dataset. Click the “…” button to view the actual data values.

  2. Toolbar: widgets for specifying Marks, Links, Guides, Plot Segments, and Scaffolds.

  3. Glyph Editor: a canvas for specifying the glyph design.

  4. Layers Panel: listing the contents of the chart and glyph designs.

  5. Attributes Panel: widgets for specifying the attributes and data bindings for each layer.

  6. Chart Canvas: a canvas for specifying the chart design.

User interface

You can customize the position, size, and docking status of the Glyph Editor, Layers Panel, and Attributes Panel. Click the dock status icon in the top right corner of each view to toggle its docking status. When the view is undocked, you can change its position and size.

Floating Panels

Help Menu

Click the help icon in the top right corner to reveal links to several resources, including a link to this Getting Started page, the Example gallery, a link to create an issue in our Github repository, the Charticulator main website, and a link to contact us via email.

Help Menu

Preparing Data

Charticulator supports datasets in CSV format and expects that the first row contains the column names. Currently, Charticulator supports only the “long format” or “narrow format” of a data table. For example, the table below shows (in long form) the maket share of mobile operating systems from one year to the next.

YearOperatingSystemMarketShare
2009iOS59.35
2009Android5.58
2009Symbian2.5
2010iOS40.77
2010Android16.97
2010Symbian1.19
.........

Data for Links

To draw charts with the links between glyphs, you will need two data tables: one for nodes/entities and another for links/relationships between nodes. For example, to draw the arc chart below (character co-ocurrence in Les Miserables), you will need one table for the characters and another for their co-occurrences.

Les Miserables Chart

Charticulator expects the nodes table to contain an id column and the links table to contain source_id and target_id columns, which refer to the ids in the nodes table, as illustrated below.

idNameGroup
MyrielMyrielG01
NapoleonNapoleonG01
ValjeanValjeanG02
MargueriteMargueriteG03
.........
source_idtarget_idStrength
NapoleonMyriel1
ValjeanMyriel5
MargueriteValjean1
.........

Loading Data

When you launch Charticulator, it automatically invokes the “New” chart command. Because you need to load data in order to create a chart, the New chart panel lets you select data files. You can click the button or drag a CSV file into the button area to open the data file.

Import Data

Once you choose the data file, Charticulator allows you to preview its top five rows.

Import Data Preview

Now you are ready to create a chart with Charticulator and follow along with our video tutorials. Also note that each chart in our gallery has an associated video of its creation process.