| CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
age: 0
cache-control: max-age=600
content-encoding: gzip
content-type: text/html; charset=utf-8
date: Tue, 14 Oct 2025 19:25:12 GMT
etag: W/"68e952e4-a760"
expires: Tue, 14 Oct 2025 19:35:12 GMT
last-modified: Fri, 10 Oct 2025 18:39:32 GMT
server: Vercel
strict-transport-security: max-age=63072000
vary: Accept-Encoding
via: 1.1 varnish
x-cache: MISS
x-cache-hits: 0
x-fastly-request-id: 03ce8a595c631ca4489f33edd4a91a6831809fb8
x-github-request-id: 632E:9AE86:E0E73:1088D5:68EEA397
x-origin-cache: HIT
x-proxy-cache: MISS
x-robots-tag: index
x-served-by: cache-bom-vanm7210021-BOM
x-timer: S1760469912.987697,VS0,VE287
x-vercel-cache: MISS
x-vercel-id: bom1::2b2qq-1760469911951-52b6524b029c
content-length: 9688
Ternary plots in JavaScript
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="https://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
};
}
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="https://bl.ocks.org/davenquinn/988167471993bc2ece29">block</a>',
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