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('<br>Developer', 45),
        caxis: makeAxis('<br>Designer', -45),
        bgcolor: '#fff1e0'
    },
    annotations: [{
      showarrow: false,
      text: 'Replica of Tom Pearson\'s <a href="http://bl.ocks.org/tomgp/7674234">block</a>',
        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 <a href="http://bl.ocks.org/davenquinn/988167471993bc2ece29">block</a>',
            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