Why do I get JavaScript undefined property in Observable but not in HTML?

Community Help
2

Hi Aaron,

Sure! Here’s a fork of that notebook that works: https://beta.observablehq.com/@tmcw/learning-javascript-and-observable-by-converting-a-fiddle

The changes are:

  • The event-drops module expects d3 to be just ‘hanging around’ on the window object. This isn’t ideal: modules should really declare their dependencies and load them with AMD, but anyway - it’s not a dealbreaker. I added a cell that sets window.d3 = d3 and that makes event-drops happy. This was the issue that complained about timeFormat - it expected d3.timeFormat to just be there.
  • I created a cell for the output, and now reference that in d3.select(events) instead of d3.select('#events'). See the little observer for one explanation of why: cells run the order that they need to depending on each other, so it’s best to connect things like d3.select to elements on the page based on referencing variables, rather than using strings like ‘#events’ to select elements on the page.
  • The stylesheet can just be added with the html template literal - no need to append it to the <head> of the document manually.
2 Likes