Plotly.js element on Webflow site

Design help Webflow integrations
1

Hi all,

Relatively new here on Webflow - but appreciating the Community and Discourse very much! However been stuck in integrating a plot on my website, and I am not sure anymore how get to next step.

Want to include a plot (from plotly / d3) on my website in a element. The plot can be split into a part of HTML and JS code (leveraging codepen)

On the HTML side

<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-2.8.3.min.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
</head>

<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

and on the JS side:

d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv", function(err, rows){

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


var trace1 = {
  type: "scatter",
  mode: "lines",
  name: 'AAPL High',
  x: unpack(rows, 'Date'),
  y: unpack(rows, 'AAPL.High'),
  line: {color: '#17BECF'}
}

var trace2 = {
  type: "scatter",
  mode: "lines",
  name: 'AAPL Low',
  x: unpack(rows, 'Date'),
  y: unpack(rows, 'AAPL.Low'),
  line: {color: '#7F7F7F'}
}

var data = [trace1,trace2];

var layout = {
  title: 'Basic Time Series',
};

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

I tried to include parts of the code in the header, script and embeded HTML building blocks, but cannot get it to work. Any pointers?

Any help is appreciated,
Many thanks,