Ternary Plots in JavaScript
How to create D3.js-based ternary plots. Examples of Ternary Plots with plotly.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.
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="/?originalUrl=https%3A%2F%2Fplotly.com%2F%26quot%3Bhttp%3A%2F%2Fbl.ocks.org%2Ftomgp%2F7674234%26quot%3B%26gt%3Bblock%26lt%3B%2Fa%26gt%3B",
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
};
}
Inspired from Tom Pearson's block
var url = 'https://gist.githubusercontent.com/davenquinn/988167471993bc2ece29/raw/f38d9cb3dd86e315e237fde5d65e185c39c931c2/data.json';
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="/?originalUrl=https%3A%2F%2Fplotly.com%2F%26quot%3Bhttp%3A%2F%2Fbl.ocks.org%2Fdavenquinn%2F988167471993bc2ece29%26quot%3B%26gt%3Bblock%26lt%3B%2Fa%26gt%3B",
x: 0.15,
y: 1.1
}]
};
Plotly.newPlot('myDiv', data, layout);
}
function makeAxis(title) {
return {
title: {
text: title
},
ticksuffix: '%',
min: 0.01,
linewidth: 2,
ticks: 'outside',
ticklen: 8,
showgrid: true,
};
}
Inspired from Daven Quinn's block
