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="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 }; } 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="http://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
