The open source JavaScript graphing library that powers plotly

  • Open Source.
    These libraries are free forever. Your Pro plan helps keep them top notch.
  • Share Online.
    Share charts, dashboards, Jupyter notebooks, and presentations through our enterprise-grade cloud.
  • Engineering Support.
    Get instant chat support from our awesome engineering team.
Show Sidebar Hide Sidebar

Ternary Contour Plots in plotly.js

How to create D3.js-based ternary contour plots. Examples of Ternary Contour Plots with plotly.

var url = '';

var colors = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f'];

Plotly.d3.json(url, function(err, rawData) {
    if(err) throw err;


function plot(rawData) {
    var data = Object.keys(rawData).map(function(k, i) {
        var pts = rawData[k];
        pts = pts.concat(pts[0]);

        return {
            type: 'scatterternary',
            mode: 'lines',
            name: k,
            a: { return d.clay }),
            b: { return d.sand }),
            c: { return d.silt }),
            line: { color: '#444' },
            fill: 'toself',
            fillcolor: colors[i],

    var layout = {
        ternary: {
            sum: 100,
            aaxis: makeAxis('Clay'),
            baxis: makeAxis('Sand'),
            caxis: makeAxis('Silt')
        showlegend: false,
        width: 700,
        annotations: [{
            showarrow: false,
            text: 'Soil Types Fill Plot',
            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

plotly.js runs on all SVG-compatible browsers

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to our Premium or Enterprise plans.