TernaryPlot.com

Frequently Asked Question

How does TernaryPlot.com make money?

It doesn't, it's provide for your convenience for free, thats why you should donate!. If not enough people donate, many features of TernaryPlot.com will become premium.

I want to show just a part of the plot, how do I do that?

Click the plot configuration button and enter the subdomains in the domains section in the plot configuration panel. Be sure the enter domains are of equal length. For example, this is correct A: 0 - 0.7, B: 0 - 0.7 C: 0.3 - 1, all domains are of length 0.7. While the following is incorrect A: 0 - 0.7, B: 0 - 0.7 C: 0.2 - 1, because the the last domain is 0.1 'longer'.

How do I quickly enter data?

Copy-pasting

You can paste values directly from Excel or Google Sheets into multiple data cells. Select and copy multiple cells in Excel/Google sheets. In the table on TernaryPlot.com, select a cell and paste, now multiple cells will be set.

Using a csv file

I think this is the best way

  1. Click the download button and click "CSV" above the table you want to enter data into
  2. Open the downloaded CSV file in Excel (or something else) and add your data in the a, b, c columns. Do not edit the column names, so do NOT replace a,b,c and with labels for your data. Just leave the first row as it is.
  3. Check your data
    • Use a dot as a decimal separator.
    • Make sure the first three column names are "a, b, c"
    • Make sure your values are allowed, for example a symbol of a point can be only one of the 7 symbol types and point sized can't be negative.
  4. When you're done editing your data, save it as a CSV file.
  5. On TernaryPlot.com, go to the table you want to enter data into and click the upload button above the table
  6. Select your edited CSV file and confirm
  7. An alert appears stating which columns are read, and which columns are ignored. You should now see the data in the table and on the plot, hooray!

How do I save data?

Data is saved in your browser everytime you stop editing a table. You can also click the green download button above a table to download the table data.

The plot is inverted, how do I reverse the axes?

The plot is not inverted, perhaps you are reading the axes in reverse. If you want the axes reversed, click the "Plot configuration" button below the plot, then click the "Reverse domains" button in the Plot Configuration panel.

If you have set custom domains and are seeing strange plot results, then you have likely entered incorrect values for the domains.

Help

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 first.

Example data point
Data typeABATotal
Data3005050400
Normalized75%12.5%12.5%100%

Data Headers

Rename your data headers (i.e. data column names) by clicking on them in any table. The data headers are synced between all tables.

Starting a new line or area

To start a new line or area, disable a row between the rows of the 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
EnabledABATitleColorCurve
333333First lineRedLinear
203050First lineIgnoredIgnored
304030First lineIgnoredIgnored
000Unchecked row to separate lines
50500Second lineBlackBasis
50500Second lineIgnoredIgnored

Saving data

Your data is saved automatically locally in your browser everytime you stop editing a table. So when you come back TernaryPlot.com later, you'll be asked whether you want to reload your prior data. See also, the sections on downloading and uploading a csv file for saving data in the tables as csv files

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. A nice added benefit of this is that you can use TernaryPlot.com offline just as well!

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 7 symbol types and a color must be a valid color.

To mark the end of a line or area, set the value of enabled to false for the next row.

Column headers

Note that you should name the data headers a, b, and c. Already naming the data columns in the csv file will not work. When uploading, an alert appears 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

Style Properties

Shared Properties

The following properties apply to all types of plot elements

Opacity
A value between 0 and 1. Opacity is the opposite of transparency.
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 app: Sorted CSS Colors to find the right named color.
Title
The SVG title attribute of the element. This does not add text, it only sets the text in box that shows up when you hover your mouse over something. 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
Select one of the folowing symbols
  • Circle (default)
  • Cross
  • Diamond
  • Square
  • Star
  • Triangle
  • Wye
Size
The size of the symbol in pixels
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
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

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.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

So start a new line, disable a row between the rows of the lines.
Curve type
See the curve section under "Lines". Curve types work exactly the same for areas.

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.
Reverse domains
Click 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 offset distance from the vertex of the plot to the axis label in pixels.
Labels at Center
Toggle to place labels at the middle of the axis.

Ticks

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.

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.
Gridlines Color
The color of the gridlines. To hide the gridlines, set all gridline counts to 0.

Background

Transparent background
Toggle to make the background transparent instead of white. The plot will have no background when you download it.

Downloading the plot

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

SVG (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. What's more, as its name suggests, SVG's are scaleable.
If you know a little SVG syntax you can open it in a text editor (like VS Code) and edit it directly.

PNG

PNG is common format and widely supported but 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 downloaded ternary plot, consider SVG.