plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Ternary Plots in plotly.js

How to create D3.js-based ternary plots. Examples of Ternary Plots with plotly.

var rawData = [
    {journalist:75,developer:25,designer:0,label:'point 1'},
    {journalist:70,developer:10,designer:20,label:'point 2'},
    {journalist:75,developer:20,designer:5,label:'point 3'},
    {journalist:5,developer:60,designer:35,label:'point 4'},
    {journalist:10,developer:80,designer:10,label:'point 5'},
    {journalist:10,developer:90,designer:0,label:'point 6'},
    {journalist:20,developer:70,designer:10,label:'point 7'},
    {journalist:10,developer:20,designer:70,label:'point 8'},
    {journalist:15,developer:5,designer:80,label:'point 9'},
    {journalist:10,developer:10,designer:80,label:'point 10'},
    {journalist:20,developer:10,designer:70,label:'point 11'},
];

Plotly.plot('graph', [{
    type: 'scatterternary',
    mode: 'markers',
    a: rawData.map(function(d) { return d.journalist; }),
    b: rawData.map(function(d) { return d.developer; }),
    c: rawData.map(function(d) { return d.designer; }),
    text: rawData.map(function(d) { return d.label; }),
    marker: {
        symbol: 100,
        color: '#DB7365',
        size: 14,
        line: { width: 2 }
    },
}], {
    ternary: {
        sum: 100,
        aaxis: makeAxis('Journalist', 0),
        baxis: makeAxis('
Developer', 45), caxis: makeAxis('
Designer', -45), bgcolor: '#fff1e0' }, annotations: [{ showarrow: false, text: 'Replica of Tom Pearson\'s block', x: 1.0, y: 1.3, font: { size: 15 } }], paper_bgcolor: '#fff1e0', }); function makeAxis(title, tickangle) { return { title: title, titlefont: { size: 20 }, tickangle: tickangle, tickfont: { size: 15 }, tickcolor: 'rgba(0,0,0,0)', ticklen: 5, showline: true, showgrid: true }; }
Inspired from Tom Pearson's block
var url = 'https://gist.githubusercontent.com/davenquinn/988167471993bc2ece29/raw/f38d9cb3dd86e315e237fde5d65e185c39c931c2/data.json';

Plotly.d3.json(url, function(err, rawData) {
    if(err) throw err;

    plot(rawData);
});

function plot(rawData) {
    var data = Object.keys(rawData).map(function(k) {
        var pts = rawData[k];

        return {
            type: 'scatterternary',
            mode: 'lines',
            name: k,
            a: pts.map(function(d) { return d.clay }),
            b: pts.map(function(d) { return d.sand }),
            c: pts.map(function(d) { return d.silt }),
            line: { color: '#c00' }
        };
    });

    var layout = {
        ternary: {
            sum: 100,
            aaxis: makeAxis('Clay'),
            baxis: makeAxis('Sand'),
            caxis: makeAxis('Silt')
        },
        showlegend: false,
        width: 700,
        annotations: [{
            showarrow: false,
            text: 'Replica of Daven Quinn\'s block',
            x: 0.15,
            y: 1.1
        }]
    };

    Plotly.plot('graph', data, layout);
}

function makeAxis(title) {
  return {
      title: title,
      ticksuffix: '%',
      min: 0.01,
      linewidth: 2,
      ticks: 'outside',
      ticklen: 8,
      showgrid: true,
  };
}
Inspired from Daven Quinn's block
Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.