Clash with Distill.pub script - SVGs displayed below each other

plotly.js
1

Hi there,

I wanted to prepare a plot for a publication on https://distill.pub/guide/ (That should be allowed as Plotly.js is under MIT license, right?).

However, there is a script that deals with the layout on Distill (https://distill.pub/template.v1.js) and as soon as I add this, all the graphs are displayed incorrectly:
was:
right

now is:

wrong
wrong.png266×526 5.97 KB

I inspected the page in the browser and found that Plotly generates two SVGs (<svg class="main-svg">). They remain the same if I add the Distill script but are not displayed on top of each other anymore. Does anyone know a fix or a workaround for this problem?

I can reproduce this behavior of displaying the SVGs below each other if I create a html page that doesn’t contain any Plotly code but only the two SVG paths and then either

  • add the Distill template.v1.js script or
  • remove the plotly-latest.min.js script

Thank you in advance!

Here is the code:

<head>
    <script src="https://distill.pub/template.v1.js"></script>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <script>
      var trace1 = {
      x: [2, 8],
      y: [0.25, 6],
      text: ['filled triangle', '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: [

        //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)'
          }
        }
      ]
    };

    var data = [trace1];

    function start() {
        Plotly.newPlot("graph", data, layout);
    }
  </script>
</head>
<body onload="start()">
  <div id="graph"></div>
</body>