Skip to main content

Intro

This page describes four things that you need to learn in order to use Charticulator. The documentation based on original source of Charticulator documentation.

This documentation will include also new features and changes that aren't included original visual or Charticulator app.

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. Chart Canvas: a canvas for specifying the chart design.

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

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

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

  7. Scales Panel: listing the scales used in the chart.

User interface

You can customize the position, size, and docking status of the Glyph Editor, Layers Panel, Attributes Panel, and Scales 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 Github repository.

Help Menu

Preparing Data

Charticulator supports datasets in CSV format and expects that the first row contains the column names. Charticulator is designed to support both the wide and narrow format of a data table.

Narrow

The table below shows (in narrow form) the market share of mobile operating systems from one year to the next.

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

Wide

The table below shows (in wide form) the world population by gender and age. Because a glyph represents one data row, you need to use a data-driven guide to position multiple marks based on numerical data values in a glyph.

AgeFemaleMale
0-4327.601350.321
5-9316.714338.892
10-14301.011322.363
15-19288.482308.333
20-24287.820306.100
.........

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. Note that these column names are case sensitive.

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 previews 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 many of the charts in our gallery have an associated video of their creation process.