title: Plotly.js: How to avoid overlapping contour lines?
body: <p>Below is an example for creating a contour plot with plotly.js. Some of the <strong>contour lines overlap</strong>. </p>
  
  <p>How can I alter the plotly settings to avoid that (e.g. increase <strong>resolution</strong>, switch <strong>contouring algorithm</strong>)? If I plot the same data using conrec.js the contours do not overlap. </p>
  
  <p><strong>A. Conrec.js</strong> (this works, no overlap)</p>
  
  <p><a href="https://i.stack.imgur.com/MMu0Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MMu0Q.png" alt="enter image description here"></a></p>
  
  <p>Source code for the example:
  <a href="https://github.com/jasondavies/conrec.js/tree/master/example" rel="nofollow noreferrer">https://github.com/jasondavies/conrec.js/tree/master/example</a></p>
  
  <p><strong>B. Plotly.js</strong> (does not work: overlapping contours)</p>
  
  <p><a href="https://i.stack.imgur.com/w6aIv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w6aIv.png" alt="enter image description here"></a></p>
  
  <p>Source code for the example:
  <a href="https://jsfiddle.net/jwmdw3o1/" rel="nofollow noreferrer">https://jsfiddle.net/jwmdw3o1/</a></p>
  
  <p>Resources:</p>
  
  <p><a href="https://cdn.plot.ly/plotly-latest.min.js" rel="nofollow noreferrer">https://cdn.plot.ly/plotly-latest.min.js</a></p>
  
  <p><a href="https://github.com/mbostock/d3/raw/v1.10.1/d3.js" rel="nofollow noreferrer">https://github.com/mbostock/d3/raw/v1.10.1/d3.js</a></p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div id="graph"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var zData = createData();
  var xData = d3.range(0, zData.length);
  var yData = d3.range(0, zData[0].length);
  
  var data = [ {
    z: zData,
    x: xData,
    y: yData,
    type: 'contour',  
    colorscale: 'Jet',
    showscale: false,
    autocontour: false,  
    contours: {
      start: -5,
      end: 3,
      size: 0.5
    }
  }];
  
  var layout = {
  margin: {
  b: 0,
  l: 0,
  r: 0,
  t: 0
  },
  height: 600,
  width: 600,
    title: '',
    xaxis: {
          ticks: '',
        showticklabels: false  
  
    },
    yaxis: {
         ticks: '',
         showticklabels: false     
    } 
  };
  
  Plotly.newPlot('graph', data, layout, {displayModeBar: false});
  
  function createData(){
  var data = [
    [
      0.4, 
      0.4, 
      0.7, 
      -1.0, 
      -0.1, 
      0.6, 
      -0.4, 
      0.6, 
      -0.4, 
      1.3, 
      0.7, 
      -0.4, 
      1.1, 
      1.3, 
      0.6, 
      0.1, 
      -0.0, 
      -0.8, 
      -0.8, 
      -1.0
    ], 
    [
      0.4, 
      -0.4, 
      0.4, 
      -1.2, 
      -0.7, 
      0.4, 
      -0.9, 
      0.5, 
      -0.9, 
      1.2, 
      0.5, 
      -1.0, 
      1.3, 
      1.1, 
      0.5, 
      -0.0, 
      -0.1, 
      -1.2, 
      -1.0, 
      -0.9
    ], 
    [
      0.7, 
      0.4, 
      0.1, 
      -1.2, 
      -0.2, 
      0.5, 
      -0.6, 
      0.6, 
      -0.2, 
      0.9, 
      0.6, 
      -0.5, 
      1.1, 
      0.8, 
      0.6, 
      0.1, 
      -0.4, 
      -0.9, 
      -0.7, 
      -0.8
    ], 
    [
      -1.0, 
      -1.2, 
      -1.2, 
      -4.4, 
      -1.9, 
      -0.8, 
      -2.2, 
      -1.0, 
      -2.2, 
      0.0, 
      -0.3, 
      -2.0, 
      -0.2, 
      0.2, 
      -0.8, 
      -1.6, 
      -1.9, 
      -2.4, 
      -2.3, 
      -2.6
    ], 
    [
      -0.1, 
      -0.7, 
      -0.2, 
      -1.9, 
      -2.0, 
      -0.5, 
      -1.9, 
      -0.3, 
      -1.7, 
      0.4, 
      -0.2, 
      -1.9, 
      0.3, 
      0.4, 
      -0.3, 
      -0.8, 
      -0.9, 
      -2.1, 
      -1.8, 
      -2.0
    ], 
    [
      0.6, 
      0.4, 
      0.5, 
      -0.8, 
      -0.5, 
      -0.1, 
      -0.8, 
      0.6, 
      -0.5, 
      1.0, 
      0.5, 
      -0.7, 
      0.8, 
      1.0, 
      0.5, 
      0.1, 
      -0.3, 
      -0.9, 
      -0.7, 
      -1.1
    ], 
    [
      -0.4, 
      -0.9, 
      -0.6, 
      -2.2, 
      -1.9, 
      -0.8, 
      -2.7, 
      -0.6, 
      -2.0, 
      0.3, 
      -0.3, 
      -2.3, 
      -0.0, 
      -0.0, 
      -0.6, 
      -1.1, 
      -1.3, 
      -2.4, 
      -2.0, 
      -2.2
    ], 
    [
      0.6, 
      0.5, 
      0.6, 
      -1.0, 
      -0.3, 
      0.6, 
      -0.6, 
      0.1, 
      -0.8, 
      1.3, 
      0.8, 
      -0.8, 
      1.1, 
      1.3, 
      0.4, 
      0.1, 
      0.1, 
      -0.8, 
      -1.0, 
      -1.0
    ], 
    [
      -0.4, 
      -0.9, 
      -0.2, 
      -2.2, 
      -1.7, 
      -0.5, 
      -2.0, 
      -0.8, 
      -2.9, 
      0.3, 
      -0.4, 
      -2.2, 
      -0.0, 
      -0.0, 
      -0.7, 
      -0.7, 
      -1.3, 
      -2.4, 
      -2.1, 
      -2.6
    ], 
    [
      1.3, 
      1.2, 
      0.9, 
      0.0, 
      0.4, 
      1.0, 
      0.3, 
      1.3, 
      0.3, 
      1.1, 
      1.0, 
      0.2, 
      0.7, 
      1.9, 
      0.9, 
      -0.2, 
      0.3, 
      0.1, 
      -0.4, 
      -0.2
    ], 
    [
      0.7, 
      0.5, 
      0.6, 
      -0.3, 
      -0.2, 
      0.5, 
      -0.3, 
      0.8, 
      -0.4, 
      1.0, 
      0.3, 
      -0.3, 
      1.0, 
      1.1, 
      0.6, 
      0.1, 
      0.3, 
      -0.7, 
      -0.5, 
      -0.6
    ], 
    [
      -0.4, 
      -1.0, 
      -0.5, 
      -2.0, 
      -1.9, 
      -0.7, 
      -2.3, 
      -0.8, 
      -2.2, 
      0.2, 
      -0.3, 
      -2.7, 
      0.0, 
      -0.0, 
      -0.6, 
      -1.0, 
      -1.1, 
      -2.3, 
      -2.1, 
      -2.4
    ], 
    [
      1.1, 
      1.3, 
      1.1, 
      -0.2, 
      0.3, 
      0.8, 
      -0.0, 
      1.1, 
      -0.0, 
      0.7, 
      1.0, 
      0.0, 
      1.6, 
      0.8, 
      1.0, 
      0.8, 
      0.7, 
      -0.2, 
      -0.2, 
      -0.2
    ], 
    [
      1.3, 
      1.1, 
      0.8, 
      0.2, 
      0.4, 
      1.0, 
      -0.0, 
      1.3, 
      -0.0, 
      1.9, 
      1.1, 
      -0.0, 
      0.8, 
      1.2, 
      1.1, 
      0.0, 
      0.2, 
      -0.1, 
      -0.4, 
      0.0
    ], 
    [
      0.6, 
      0.5, 
      0.6, 
      -0.8, 
      -0.3, 
      0.5, 
      -0.6, 
      0.4, 
      -0.7, 
      0.9, 
      0.6, 
      -0.6, 
      1.0, 
      1.1, 
      -0.2, 
      0.1, 
      -0.0, 
      -0.9, 
      -0.6, 
      -1.2
    ], 
    [
      0.1, 
      -0.0, 
      0.1, 
      -1.6, 
      -0.8, 
      0.1, 
      -1.1, 
      0.1, 
      -0.7, 
      -0.2, 
      0.1, 
      -1.0, 
      0.8, 
      0.0, 
      0.1, 
      -0.6, 
      -0.4, 
      -1.2, 
      -1.3, 
      -1.4
    ], 
    [
      -0.0, 
      -0.1, 
      -0.4, 
      -1.9, 
      -0.9, 
      -0.3, 
      -1.3, 
      0.1, 
      -1.3, 
      0.3, 
      0.3, 
      -1.1, 
      0.7, 
      0.2, 
      -0.0, 
      -0.4, 
      -1.3, 
      -1.4, 
      -1.6, 
      -1.9
    ], 
    [
      -0.8, 
      -1.2, 
      -0.9, 
      -2.4, 
      -2.1, 
      -0.9, 
      -2.4, 
      -0.8, 
      -2.4, 
      0.1, 
      -0.7, 
      -2.3, 
      -0.2, 
      -0.1, 
      -0.9, 
      -1.2, 
      -1.4, 
      -3.0, 
      -2.3, 
      -2.5
    ], 
    [
      -0.8, 
      -1.0, 
      -0.7, 
      -2.3, 
      -1.8, 
      -0.7, 
      -2.0, 
      -1.0, 
      -2.1, 
      -0.4, 
      -0.5, 
      -2.1, 
      -0.2, 
      -0.4, 
      -0.6, 
      -1.3, 
      -1.6, 
      -2.3, 
      -2.3, 
      -2.4
    ], 
    [
      -1.0, 
      -0.9, 
      -0.8, 
      -2.6, 
      -2.0, 
      -1.1, 
      -2.2, 
      -1.0, 
      -2.6, 
      -0.2, 
      -0.6, 
      -2.4, 
      -0.2, 
      0.0, 
      -1.2, 
      -1.4, 
      -1.9, 
      -2.5, 
      -2.4, 
      -3.3
    ]
  ];
  return data;
  }
  </code></pre>