2016-04-13-basic-ternary-plot.html

---
name: Basic Ternary Plot with Markers
language: plotly_js
suite: ternary-plot
order: 1
sitemap: false
arrangement: horizontal
description: Inspired from Tom Pearson's <a href="http://bl.ocks.org/tomgp/7674234">block</a>
---

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.newPlot('myDiv', [{
    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: {
            text: title,
            font: {
                size: 20
            }
        },
        tickangle: tickangle,
        tickfont: {
            size: 15
        },
        tickcolor: 'rgba(0,0,0,0)',
        ticklen: 5,
        showline: true,
        showgrid: true
    };
}