Table of Contents
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.
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.
There are 4 different types of elements you can add to the ternary plot
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.
- 120 rows
- 35 rows
- 80 rows
- 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.
|0||0||0||Unchecked row to separate lines|
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
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
false in row after the last row of the line/area.
Note that you have to name the data columns in your CSV files
c. Already naming the columns in the csv file will not work, they really have to be
When uploading, an alert will appear stating which columns will be read, and which columns will be ignored.
Sample CSV Files
Get started by downloading one of these sample CSV files with demo datasets and then upload them to a table.
The following properties apply to all types of plot elements
- A value between 0 and 1, where is is fully transparent and 1 is fully opaque.
- 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)
- 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.
The following properties of point elements are configurable.
- There are two categories of symbols: filled & stroked. The following symbols are filled
- circle (default)
- The size of the symbol in pixels. Default is 40.
- 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.
The following properties of text elements are configurable.
- The text that should be plotted
- Font size
- The font size in pixels. Default is 20.
- See opacity in shared properties
- Text anchor
- How to place the text relative to its coordinate anchor. Choose either
- The rotation of the text in degrees. The point of rotation is determined by the text anchor.
- The color of the text. See color on how to enter colors.
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)
- Basis spline
- Catmull–Rom spline
- The width of the line in pixels
- 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:
- 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
- See opacity in shared properties
- See title in shared properties.
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.
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).
If you add a lot of entries, the legend might overflow onto the ternary plot. Try increasing your browser window or zooming
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.
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
- 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.
- 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 are the short lines with numbers at regular intervals on the axes.
- 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.
- 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.
- 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.
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
- QFR Triangle
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. 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.
Make a QFR Diagram online. Click the "Template" button below the plot and select the "USDA Soil Texture Triangle" 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.