Got "Uncaught TypeError: Plotly.d3 is undefined"

plotly.js
1

[what was i doing]
I was following the plotly.js video tutorial from University of Sydney.

[what’s the problem]
Console through the following error "Uncaught TypeError: Plotly.d3 is undefined" when using <script src="https://cdn.plot.ly/plotly-2.3.1.min.js"></script> in <head>, which is strange because the url link is from Plotly.js Getting Started.

However, there is no such problem if I change the url to <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>.

[my question]
May I ask the reason for such error when using the official CDN url of plotly.js?

[example code]

[index.html]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>title</title>
    <meta name="author" content="oat" />
    <meta name="description" content="tutorial on plotly.js" />
    <meta name="keywords" content="plotly.js" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!-- <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> -->

    <!-- the following address will cause error -->
    <script src="https://cdn.plot.ly/plotly-2.3.1.min.js"></script>
  </head>

  <div class="grid-container">
    <div class="header"></div>
    <div class="nav"></div>
    <div class="aside"></div>
    <div class="main">
      <div id="viz1" class="viz1"></div>
      <div id="viz2" class="viz2"></div>
      <div id="viz3" class="viz3"></div>
    </div>

    <script src="script.js"></script>
  </div>
</html>

[script.js]

const lineColors = {
  green: "#44bb66",
  red: "#bb4466",
  blue: "#4466bb",
};

const config = {
  displayModeBar: false,
  responsive: true,
};

const plot1Div = document.getElementById("viz1");
const plot2Div = document.getElementById("viz2");
const plot3Div = document.getElementById("viz3");

Plotly.d3.csv(
  "https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv",
  function (rows) {
    var trace0 = {
      type: "scatter",
      mode: "lines",
      name: "apple high",
      x: unpack(rows, "Date"),
      y: unpack(rows, "AAPL.High"),
      line: {
        color: lineColors.green,
      },
    };

    var trace1 = {
      type: "scatter",
      mode: "lines",
      name: "apple high",
      x: unpack(rows, "Date"),
      y: unpack(rows, "AAPL.Low"),
      line: {
        color: lineColors.red,
      },
    };

    var data1 = [trace0, trace1];

    var rangeSelectorOptions = {
      buttons: [
        {
          count: 1,
          label: "1m",
          step: "month",
          stepmode: "backward",
        },
        {
          count: 6,
          label: "6m",
          step: "month",
          stepmonth: "backward",
        },
        { step: "all" },
      ],
    };

    var layout1 = {
      title: "apple stock price",
      xaxis: {
        autorange: true,
        rangeselector: rangeSelectorOptions,
        type: "date",
        rangeslider: {
          range: ["2015-02-17", "2017-02-16"],
        },
      },
    };

    Plotly.newPlot(plot1Div, data1, layout1, config);
  }
);

function unpack(rows, key) {
  return rows.map(function (row) {
    return row[key];
  });
}

[style.css]

@import url("https://fonts.googleapis.com/css?family=Poppins:400");

.grid-container {
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  grid-template-rows: 300px 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "Header Header Header"
    "nav main aside"
    "nav main aside";
}

.header {
  grid-area: Header;
}

.nav {
  grid-area: nav;
}

.aside {
  grid-area: aside;
}

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "viz1 viz1"
    "viz2 viz3";
  grid-area: main;
}

.viz1 {
  grid-area: viz1;
}

.viz2 {
  grid-area: viz2;
}

.viz3 {
  grid-area: viz3;
}

/* Typography */

html {
  font-size: 100%;
} /*16px*/

body {
  background: white;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  line-height: 1.75;
  color: #000000;
}

p {
  margin-bottom: 1rem;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 3rem 0 1.38rem;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  line-height: 1.3;
}

h1 {
  margin-top: 0;
  font-size: 4.209rem;
}

h2 {
  font-size: 3.157rem;
}

h3 {
  font-size: 2.369rem;
}

h4 {
  font-size: 1.777rem;
}

h5 {
  font-size: 1.333rem;
}

small,
.text_small {
  font-size: 0.75rem;
}
2

Would anybody kindly help to take a look and advise if this is an issue related to Plotly.d3 in plotly-2.3.1.min.js? Thanks.

3

It seems that the Plotly.d3 object was removed from version >2 (at least according to this announcement).