Help
Table of Contents
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.
| A | B | A | Total | |
|---|---|---|---|---|
| Data | 300 | 50 | 50 | 400 |
| Normalized | 75% | 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
- Points
- Text
- Lines
- 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
- 200 rows
- Text
- 20 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.
| Enabled | A | B | A | Title | Color | Curve |
|---|---|---|---|---|---|---|
| 33 | 33 | 33 | First line | Red | Linear | |
| 20 | 30 | 50 | First line | Ignored | Ignored | |
| 30 | 40 | 30 | First line | Ignored | Ignored | |
| 0 | 0 | 0 | Unchecked row to separate lines | |||
| 50 | 50 | 0 | Second line | Black | Basis | |
| 50 | 50 | 0 | Second line | Ignored | Ignored | |
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.
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)
- Hexadecimal format
#fac42f - RGB format
rgb(250, 196, 47) - HSL format
hsl(44, 95, 58) - A named color, these are shown in the suggested list. Check out this nifty webapp: Sorted CSS Colors to find the right named color.
- Hexadecimal format
- 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
- 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,middleorend. - Rotation
- The rotation of the text in degrees. The point of rotation is determined by the text anchor.
- 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: - 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
- 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.