Shapes in JavaScript

How to make arbitrary D3.js-based SVG shapes in JavaScript. Examples of lines, circle, rectangle, and path.


New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

var data = [
  {
    x: ['2015-02-01', '2015-02-02', '2015-02-03', '2015-02-04', '2015-02-05',
        '2015-02-06', '2015-02-07', '2015-02-08', '2015-02-09', '2015-02-10',
        '2015-02-11', '2015-02-12', '2015-02-13', '2015-02-14', '2015-02-15',
        '2015-02-16', '2015-02-17', '2015-02-18', '2015-02-19', '2015-02-20',
        '2015-02-21', '2015-02-22', '2015-02-23', '2015-02-24', '2015-02-25',
        '2015-02-26', '2015-02-27', '2015-02-28'],
    y: [-14, -17, -8, -4, -7, -10, -12, -14, -12, -7, -11, -7, -18, -14, -14,
        -16, -13, -7, -8, -14, -8, -3, -9, -9, -4, -13, -9, -6],
    mode: 'line',
    name: 'temperature'
  }
];

var layout = {

    // to highlight the timestamp we use shapes and create a rectangular

    shapes: [
        // 1st highlight during Feb 4 - Feb 6
        {
            type: 'rect',
            // x-reference is assigned to the x-values
            xref: 'x',
            // y-reference is assigned to the plot paper [0,1]
            yref: 'paper',
            x0: '2015-02-04',
            y0: 0,
            x1: '2015-02-06',
            y1: 1,
            fillcolor: '#d3d3d3',
            opacity: 0.2,
            line: {
                width: 0
            }
        },

        // 2nd highlight during Feb 20 - Feb 23
        
        {
            type: 'rect',
            xref: 'x',
            yref: 'paper',
            x0: '2015-02-20',
            y0: 0,
            x1: '2015-02-22',
            y1: 1,
            fillcolor: '#d3d3d3',
            opacity: 0.2,
            line: {
                width: 0
            }
        }
    ],
    height: 500,
    width: 500
}

Plotly.newPlot('myDiv', data, layout);
var d3 = Plotly.d3

function normal_array( mean, stddev, size ){
    var arr = new Array(size), i;
    // from http://bl.ocks.org/nrabinowitz/2034281
    var generator = (function() {
        return d3.random.normal(mean, stddev);
    }());

    for( i=0; i< arr.length; i++ ){
        arr[i] = generator();
    }
    return arr;
}

var x0 = normal_array(2, 0.45, 300);
var y0 = normal_array(2, 0.45, 300);

var x1 = normal_array(6, 0.4, 200);
var y1 = normal_array(6, 0.4, 200)

var x2 = normal_array(4, 0.3, 200);
var y2 = normal_array(4, 0.3, 200);

console.log(x0);

var data = [
    {
        x: x0,
        y: y0,
        mode: 'markers'
    }, {
        x: x1,
        y: y1,
        mode: 'markers'
    }, {
        x: x2,
        y: y2,
        mode: 'markers'
    }, {
        x: x1,
        y: y0,
        mode: 'markers'
    }
];

var layout = {
    shapes: [
        {
            type: 'circle',
            xref: 'x',
            yref: 'y',
            x0: d3.min(x0),
            y0: d3.min(y0),
            x1: d3.max(x0),
            y1: d3.max(y0),
            opacity: 0.2,
            fillcolor: 'blue',
            line: {
                color: 'blue'
            }
        },
        {
            type: 'circle',
            xref: 'x',
            yref: 'y',
            x0: d3.min(x1),
            y0: d3.min(y1),
            x1: d3.max(x1),
            y1: d3.max(y1),
            opacity: 0.2,
            fillcolor: 'orange',
            line: {
                color: 'orange'
            }
        },
        {
            type: 'circle',
            xref: 'x',
            yref: 'y',
            x0: d3.min(x2),
            y0: d3.min(y2),
            x1: d3.max(x2),
            y1: d3.max(y2),
            opacity: 0.2,
            fillcolor: 'green',
            line: {
                color: 'green'
            }
        },
        {
            type: 'circle',
            xref: 'x',
            yref: 'y',
            x0: d3.min(x1),
            y0: d3.min(y0),
            x1: d3.max(x1),
            y1: d3.max(y0),
            opacity: 0.2,
            fillcolor: 'red',
            line: {
                color: 'red'
            }
        }
    ],
    height: 400,
    width: 480,
    showlegend: false
}

Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [2, 3.5, 6],
  y: [1, 1.5, 1],
  text: ['Vertical Line', 'Horizontal Dashed Line', 'Diagonal dotted Line'],
  mode: 'text'
};

var layout = {
  title: 'Vertical and Horizontal Lines Positioned Relative to the Axes',
  xaxis: {
    range: [0, 7]
  },
  yaxis: {
    range: [0, 2.5]
  },
  width: 500,
  height: 500,
  shapes: [

    //line vertical

    {
      type: 'line',
      x0: 1,
      y0: 0,
      x1: 1,
      y1: 2,
      line: {
        color: 'rgb(55, 128, 191)',
        width: 3
      }
    },

    //Line Horizontal

    {
      type: 'line',
      x0: 2,
      y0: 2,
      x1: 5,
      y1: 2,
      line: {
        color: 'rgb(50, 171, 96)',
        width: 4,
        dash: 'dashdot'
      }
    },

    //Line Diagonal

    {
      type: 'line',
      x0: 4,
      y0: 0,
      x1: 6,
      y1: 2,
      line: {
        color: 'rgb(128, 0, 128)',
        width: 4,
        dash: 'dot'
      }
    }
  ]
};

var data = [trace1];

Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [1.5, 3.5],
  y: [0.75, 2.5],
  text: ['Unfilled Circle', 'Filled Circle'],
  mode: 'text'
};

var layout = {
  title: 'Circles',
  xaxis: {
    range: [0, 4.5],
    zeroline: false
  },
  yaxis: {
    range: [0, 4.5]
  },
  width: 500,
  height: 500,
  shapes: [

    // Unfilled Circle

    {
      type: 'circle',
      xref: 'x',
      yref: 'y',
      x0: 1,
      y0: 1,
      x1: 3,
      y1: 3,
      line: {
        color: 'rgba(50, 171, 96, 1)'
      }
    },

    // Filled Circle

    {
      type: 'circle',
      xref: 'x',
      yref: 'y',
      fillcolor: 'rgba(50, 171, 96, 0.7)',
      x0: 3,
      y0: 3,
      x1: 4,
      y1: 4,
      line: {
        color: 'rgba(50, 171, 96, 1)'
      }
    }
  ]
};

var data = [trace1];

Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [1.5, 3],
  y: [2.5, 2.5],
  text: ['Rectangle reference to the plot', 'Rectangle reference to the axes'],
  mode: 'text'
};

var layout = {
  title: 'Rectangles Positioned Relative to the Plot and to the Axes',
  xaxis: {
    range: [0, 4],
    showgrid: false
  },
  yaxis: {
    range: [0, 4]
  },
  width: 800,
  height: 600,
  shapes: [

    //Rectangle reference to the axes

    {
      type: 'rect',
      xref: 'x',
      yref: 'y',
      x0: 2.5,
      y0: 0,
      x1: 3.5,
      y1: 2,
      line: {
        color: 'rgb(55, 128, 191)',
        width: 3
      },
      fillcolor: 'rgba(55, 128, 191, 0.6)'
    },

    //Rectangle reference to the Plot

    {
      type: 'rect',
      xref: 'paper',
      yref: 'paper',
      x0: 0.25,
      y0: 0,
      x1: 0.5,
      y1: 0.5,
      line: {
        color: 'rgb(50, 171, 96)',
        width: 3
      },
      fillcolor: 'rgba(50, 171, 96, 0.6)'
    }
  ]
};

var data = [trace1];

Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [1.5, 4.5],
  y: [0.75, 0.75],
  text: ['Unfilled Rectangle', 'Filled Rectangle'],
  mode: 'text'
};

var layout = {
  title: 'Rectangle Positioned Relative to the Axes',
  xaxis: {
    range: [0, 7],
    showgrid: false
  },
  yaxis: {
    range: [0, 3.5]
  },
  width: 500,
  height: 500,
  shapes: [

    //Unfilled Rectangle

    {
      type: 'rect',
      x0: 1,
      y0: 1,
      x1: 2,
      y1: 3,
      line: {
        color: 'rgba(128, 0, 128, 1)'
      }
    },

    //Filled Rectangle

    {
      type: 'rect',
      x0: 3,
      y0: 1,
      x1: 6,
      y1: 2,
      line: {
        color: 'rgba(128, 0, 128, 1)',
        width: 2
      },
      fillcolor: 'rgba(128, 0, 128, 0.7)'
    }
  ]
};

var data = [trace1];

Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [2, 6],
  y: [1, 1],
  text: ['Line positioned relative to the plot', 'Line positioned relative to the axes'],
  mode: 'text'
};

var layout = {
  title: 'Lines Positioned Relative to the Plot & to the Axes',
  xaxis: {
    range: [0, 8]
  },
  yaxis: {
    range: [0, 2]
  },
  width: 500,
  height: 500,
  shapes: [

    //Line reference to the axes

    {
      type: 'line',
      xref: 'x',
      yref: 'y',
      x0: 4,
      y0: 0,
      x1: 8,
      y1: 1,
      line: {
        color: 'rgb(55, 128, 191)',
        width: 3
      }
    },

    //Line reference to the plot

    {
      type: 'line',
      xref: 'paper',
      yref: 'paper',
      x0: 0,
      y0: 0,
      x1: 0.5,
      y1: 0.5,
      line: {
        color: 'rgb(50, 171, 96)',
        width: 3
      }
    }
  ]
};

var data = [trace1];

Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [2, 1, 8, 8],
  y: [0.25, 9, 2, 6],
  text: ['filled triangle', 'filled Polygon', 'Quadratic Bezier Curves', 'Cubic Bezier Curves'],
  mode: 'text'
};

var layout = {
  title: 'Basic Arbitrary SVG Paths',
  xaxis: {
    range: [0, 9],
    zeroline: false
  },
  yaxis: {
    range: [0, 11],
    showgrid: false
  },
  width: 500,
  height: 500,
  shapes: [

    //Quadratic Bezier Curves

    {
      type: 'path',
      path: 'M 4,4 Q 6,0 8,4',
      line: {
        color: 'rgb(93, 164, 214)'
      }
    },

    //Cubic Bezier Curves

    {
      type: 'path',
      path: 'M 1,4 C 2,8 6,4 8,8',
      line: {
        color: 'rgb(207, 114, 255)'
      }
    },

    //Filled Triangle

    {
      type: 'path',
      path: 'M 1 1 L 1 3 L 4 1 Z',
      fillcolor: 'rgba(44, 160, 101, 0.5)',
      line: {
        color: 'rgb(44, 160, 101)'
      }
    },

    //Filled Polygon

    {
      type: 'path',
      path: ' M 3,7 L2,8 L2,9 L3,10, L4,10 L5,9 L5,8 L4,7 Z',
      fillcolor: 'rgba(255, 140, 184, 0.5)',
      line: {
        color: 'rgb(255, 140, 184)'
      }
    }
  ]
};

var data = [trace1];

Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [1, 1.75, 2.5],
  y: [1, 1, 1],
  type: 'scatter',
  mode: 'text',
  text: ['A', 'A+B', 'B'],
  textfont: {
    color: 'black',
    size: 18,
    family: 'Arial'
  }
};

var layout = {
  title: 'Venn Diagram with Circle Shapes',
  xaxis: {
    showticklabels: false,
    autotick: false,
    showgrid: false,
    zeroline: false
  },
  yaxis: {
    showticklabels: false,
    autotick: false,
    showgrid: false,
    zeroline: false
  },
  shapes: [{
    opacity: 0.3,
    xref: 'x',
    yref: 'y',
    fillcolor: 'blue',
    x0: 0,
    y0: 0,
    x1: 2,
    y1: 2,
    type: 'circle',
    line: {
      color: 'blue'
    }
  }, {
    opacity: 0.3,
    xref: 'x',
    yref: 'y',
    fillcolor: 'gray',
    x0: 1.5,
    y0: 0,
    x1: 3.5,
    y1: 2,
    type: 'circle',
    line: {
      color: 'gray'
    }
  }],
  margin: {
    l: 20,
    r: 20,
    b: 100
  },
  height: 500,
  width: 500
};

var data = [trace1];

Plotly.newPlot('myDiv', data, layout);
function linspace(a,b,n) {
  return Plotly.d3.range(n).map(function(i){return a+i*(b-a)/(n-1);});
}

var xValues = linspace(1, 3, 200);

var yValues = [];

for ( var i = 0 ; i < xValues.length ; i++ ) {
  var result = xValues[i] * Math.sin(Math.pow(xValues[i], 2)) + 1;
  yValues.push(result);
};

var trace1 = {
  x: xValues,
  y: yValues,
  type: 'scatter'
};

var data = [trace1];

var layout = {
  title: 'Creating Tangent Lines with Shapes',
  shapes: [{
    type: 'line',
    x0: 1,
    y0: 2.30756,
    x1: 1.75,
    y1: 2.30756,
    opacity: 0.7,
    line: {
      color: 'red',
      width: 2.5
    }
  }, {
    type: 'line',
    x0: 2.5,
    y0: 3.80796,
    x1: 3.05,
    y1: 3.80796,
    opacity: 0.7,
    line: {
      color: 'red',
      width: 2.5
    }
  }, {
    type: 'line',
    x0: 1.90,
    y0: -1.1827,
    x1: 2.50,
    y1: -1.1827,
    opacity: 0.7,
    line: {
      color: 'red',
      width: 2.5
    }
  }],
  height: 500,
  width: 500
};

Plotly.newPlot('myDiv', data, layout);