Help

Table of Contents

  1. Data
  2. Style Properties
  3. Legend
  4. Downloading the plot
  5. Configuring the plot
  6. Templates

Data

Proportions

Entered data is normalized automatically i.e. proportions are calculated of any three positive values you enter. This means you do not need to calculate the percentages yourself before plotting.

Example data point
ABATotal
Data3005050400
Normalized75%12.5%12.5%100%

Data Headers

Rename your data headers (i.e. column names) by clicking on the light blue cells in the table head in any table. The data headers are synced between all tables and the plot.

Plot Elements

There are 4 different types of elements you can add to the ternary plot

  1. Points
  2. Text
  3. Lines
  4. Areas

Each type of element has its own table where data can be added.

Number of Rows

There's a limited of number of rows per element table.

Points
120 rows
Text
35 rows
Lines
80 rows
Areas
80 rows

Starting a new line or area

To start a new line or area, disable one row in between the rows with values for lines. Only the style properties of the first row of a line or area are applied. The subsequent style properties are ignored.

Example Lines/Areas
Enabled ABATitleColorCurve
333333First lineRedLinear
203050First lineIgnoredIgnored
304030First lineIgnoredIgnored
000Unchecked row to separate lines
50500Second lineBlackBasis
50500Second lineIgnoredIgnored

Saving data

This tool runs completely on the client-side using JavaScript, so your data never leaves your computer. Put another way, your entered values are not transmitted to any server and are only stored locally on your machine.

Auto-save (local)

Your data is saved automatically locally in your browser everytime you stop editing and click outside a table. When you return the page this data is automatically loaded into the tables again.

Save data under a name (local)

You can also save your data locally (in your browser) under a name. Click the purple "Save" button above the table, a text field will appear. Enter the name you want to store this data under in to the text field. Then click the button to the right of the text field to store the data.

Note that storing a data is one table type basis; points, text, lines, and areas data are all stored seperately.

To load the data click on the 'Load' button left of the 'Save' button.

Save as a file

See the sections on downloading and uploading a CSV file.

Downloading data

Download the table data by clicking the download button above a table and selecting the desired format. You can download data as either CSV or a JSON file.

Uploading data with a csv file

CSV files can be uploaded and read into the table provided they are formatted correctly and contain the right column names. Click upload button above a table and select your csv file. The right column names per type are listed below, for your convenience you can click on of the headers to copy them. Also make sure your entered values are correct, for example a symbol of a point can be only one of the 13 symbol types and a color must be a valid color.

The data is limited by the number of rows in the edit tables. Any rows after the limit are not read.

To mark the end of a line or area, set the value of enabled to false in row after the last row of the line/area.

Column headers

Note that you have to name the data columns in your CSV files a, b, and c. Already naming the columns in the csv file will not work, they really have to be a,b,c.
When uploading, an alert will appear stating which columns will be read, and which columns will be ignored.

Points:
a,b,c,size,symbol,opacity,fill,stroke,title
Text
a,b,c,text,fontSize,fill,textAnchor,rotation,opacity
Lines
enabled,a,b,c,curve,strokeWidth,strokeDasharray,opacity,stroke,title
Areas
enabled,a,b,c,curve,opacity,fill,title
Sample CSV Files

Get started by downloading one of these sample CSV files with demo datasets and then upload them to a table.

Style Properties

Shared Properties

The following properties apply to all types of plot elements

Opacity
A value between 0 and 1, where is is fully transparent and 1 is fully opaque.
Color
Enter a color in one the following formats or click the color box on the right side to open a color picker.(The color picker varies per browser and operating system)
  1. Hexadecimal format #fac42f
  2. RGB format rgb(250, 196, 47)
  3. HSL format hsl(44, 95, 58)
  4. A named color, these are shown in the suggested list. Check out this nifty webapp: Sorted CSS Colors to find the right named color.
Legend Title (except text table)
Add text to the "Legend Title" to add an entry to the legend for that data point. The styled element will appear in the legend. For points, the size property is ignored in the legend, all symbols in the legend have the same size.
This does not add text to the plot, it is used to add a data item to the legend.
If you want to add text to the plot, add it in in the text table.

Points

The following properties of point elements are configurable.

Symbol
There are two categories of symbols: filled & stroked. The following symbols are filled
  • circle (default)
  • cross
  • diamond
  • square
  • star
  • triangle
  • wye
And the following symbols are stroked
  • circle-stroked
  • plus
  • x
  • triangle-stroke
  • asterisk
  • square-stroke
  • diamond-stroke
Size
The size of the symbol in pixels. Default is 40.
Opacity
See opacity in shared properties
Fill color
Fill color is the color of the inside of the symbol. See color on how to enter colors.
Stroke color
The colors of the stroke (i.e. border) of the symbol. See color on how to enter colors.

Text

The following properties of text elements are configurable.

Text
The text that should be plotted
Font size
The font size in pixels. Default is 20.
Opacity
See opacity in shared properties
Text anchor
How to place the text relative to its coordinate anchor. Choose either start, middle or end.AStartAMiddleAEnd
Rotation
The rotation of the text in degrees. The point of rotation is determined by the text anchor.TernaryPlot.com20°TernaryPlot.com70°TernaryPlot.com180°
Color
The color of the text. See color on how to enter colors.

Lines

The following properties of line elements are configurable.

Curve type
There are different ways to connect the points that form a line. A variety of curve types are provided for this purpose. You can select one of the following curve types.
  • Linear (default)
  • Cardinal
  • Basis spline
  • Catmull–Rom spline
Width
The width of the line in pixels
Style
The pattern of dashes and gaps of the line. Select one of the predefined option or enter your own 'stroke-dasharray'. A stroke-dasharray is a list of comma and/or white space separated lengths and percentages that specify the lengths of alternating dashes and gaps. Learn more about stroke-dasharray on MDN.
The predefined line style options are:soliddotteddot-dashdot-dot-dashshort-dashedmedium-dashedlong-dashed
Arrow start
Toggle to attach an arrowhead to the start of the line
Arrow end
Toggle to attach an arrowhead to the end of the line
Opacity
See opacity in shared properties
Title
See title in shared properties.

Areas

To start a new line, disable one row in between the rows of the lines.

Curve type
See the curve section under "Lines". Curve types work exactly the same for areas.

Legend

Add text to the "Legend Title" column of the element in the table to add an entry to the legend. The legend will automatically appear if any row has text in "Legend Title".

It's possible to add a "Legend Title" to a row that has no data, it will appear in the legend anyway. This makes it possible to add legend items without plotting unnecessary items.

For points in the legend, size is ignored. So all points in the legend are drawn the same size (150).

Position

The legend can be repositioned by dragging it. Double click the legend to reset the legend to its initial position.

Downloading the plot

Just hit the download button below the plot, easy as that. You can download the plot in either SVG or PNG format.

SVG format (recommended)

SVG is a terrific vector graphics format that most people don't seem to know about. What makes SVG so good is that – unlike PNG – it's very editable! You can edit text, drag individual elements around, change colors and much more with a vector editing program like Inkscape (free & open-source), Adobe Illustrator, or Sketch or even right here in the browser, with right-click "Inspect" on the Plot element.

What's more, as its name suggests, SVG's are scaleable. They will scale up and down to suit your needs and won't become a pixelated mess like PNG.

If you know a little SVG syntax you can open the plot in a text editor (like VS Code) and edit it directly.

PNG format

PNG is common format and widely supported but it is not easily editable. That's because PNG is a raster-graphics file format, simply a grid of pixels! If you don't need to edit the ternary plot anymore, great, go for PNG. If you want to tweak the saved ternary plot, consider SVG.

Configuring the plot

Domains

New Domains
Enter the values of the new domains and then click the "Set Domains" button. Please double check if the entered domains are correct. The plot will break if the domains are incorrect.
Turn on "Clip to plot bounds" in "Background" to hide the features plotted outside of the custom domains.
Reverse domains
Toggle to reverse the current domains. Axis ticks and labels are changed automatically to match.

Labels

Label Angles
The angle of each axis label in degrees.
Label Offsets
The distance from the vertices of the plot to the axes labels in pixels.
Labels at Center
Toggle to place labels at the middle of their axis.
Label Font Sizes
The font sizes of the axis labels. A number between 8 and 38 pixels.

Ticks

Ticks are the short lines with numbers at regular intervals on the axes.

Format
Wether to format the ticks as decimals or as percentages and the number of decimals displayed.
Tick Angles
The angle of each axis ticks in degrees.
Number of Ticks
The number of ticks of each axis. The specified count is only a hint, the scale may return more or fewer values depending on the domain.
Length of Ticks
The size of each tick in pixels. Negative size means ticks will be placed inside the plot.
Tick Font Sizes
The font sizes of the value of the axis ticks. A number between 6 and 28 pixels.

Labels

Number of Gridlines
The numer of gridlines for each axis. The specified count is only a hint, the scale may return more or fewer values depending on the domain. To hide the gridlines, set all gridline counts to 0.
Gridlines Color
The color of the gridlines. For a readable plot, it is best to stick to a light grayscale color.

Background

Transparent background
Toggle to make the background transparent instead of white. The plot will have no background when you download it.
Clip to ternary plot
By default, points and lines are clipped to the triangle, meaning any features that fall outside of the plot domain it are invisible. Toggle to turn clipping on or off.
This should be turned on if you have entered a custom domain.
Responsive dimensions
By default, the plot is responsive meaning its dimensions change with larger screens. On small or very large screens this may not be what you want. In those cases, toggle the ‘responsive’ config off to make the plot have fixed dimensions of 500 by 500 px.

Templates

Add a template of a common ternary plot type by clicking the "Template" button below the plot and clicking a template. Currently the options are:

  • USDA Soil Texture Triangle
  • USDA Soil Texture Triangle without labels
  • QFR Triangle (Folk classification)
  • QmFL Triangle
  • QFL Diagram Triangle (Dickinson)
  • QAP Diagram without labels. This is one half of the QAPF diagram
  • FPA Diagram without labels. This is the other half of the QAPF diagram

USDA Soil Texture Triangle

Make a USDA Soil Texture Triangle online. Click the "Template" button below the plot and select the "USDA Soil Texture Triangle" option or the one without labels. The plot configuration settings will automatically be set. Now set the labels in order: Silt, Clay, Sand. At last, enter your data in the tables.

QFR Diagram

Make a QFR diagram online. Click the "Template" button below the plot and select the "QFR" option. Now set the labels in order: Q, F, R or Quartz, Feldspar, Rock Fragments (or similar). At last, enter your data in the tables.

QAP Diagram

Make a QAP diagram online. Click the "Template" button below the plot and select the "QAP Diagram" option. Now set the labels in order: Q, A, P or Quartz, Alkali, Plagioclase. At last, enter your data in the tables.

FPA Diagram

Make a FPA Diagram online. Click the "Template" button below the plot and select the "FPA diagram without labels" option. Now set the labels in order: Q, F, R or Feldspar, Plagioclase, Alkali. At last, enter your data in the tables.

QmFL Diagram

Make a QmFL Diagram online. Click the "Template" button below the plot and select the "QmFL" option. Now set the labels in order: Qm, F, L or Quartz, Feldspar, Lithic Fragments. At last, enter your data in the tables.