Uncaught ReferenceError: d3 is not defined

Community Help
1

Hello,

I’m following the Getting Started guide for Observable Plot using the ESM + CDN setup. I’m trying to change this code to fetch the data using d3.json but I’m getting the JS error d3 is not defined. The text on the guide says that the D3 dependency should automatically be loaded and I do see d3.fetch being requested in DevTools from the URL https://cdn.jsdelivr.net/npm/d3-fetch@3.0.1/+esm

<!DOCTYPE html>
<div id="myplot"></div>
<script type="module">

import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm";

const data = await d3.json("https://127.0.0.1:8000/api/data.json")
const plot = Plot.plot({marks: [Plot.lineY(data, {x: "datetime", y: "value"})]});
const div = document.querySelector("#myplot");
div.append(plot);

</script>

Can anyone help point out what I’m missing?

2

I added an explicit import and this fixed it.

import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
1 Like