# Why do I get JavaScript undefined property in Observable but not in HTML? **URL:** \ **Category:** Help\ **Created:** [March 31, 2018, 4:13pm UTC](https://talk.observablehq.com/t/why-do-i-get-javascript-undefined-property-in-observable-but-not-in-html/587 "2018-03-31T16:13:18Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\ **Post date:** [March 31, 2018, 4:13pm UTC](https://talk.observablehq.com/t/why-do-i-get-javascript-undefined-property-in-observable-but-not-in-html/587/1 "2018-03-31T16:13:18Z")
Hi Community! I am new to coding / JavaScript / data visualization, and I am very thankful to the Observable team for making this resource (and making it OpenSource)! I am trying to understand how code sections need to be separated in order to work in observable. Toward this aim, I tried to covert a visualization from standard HTML so that it would render in Observable. I can’t get it to work, however – getting `TypeError: Cannot read property 'timeFormat' of undefined` in reference to the line of code that draws the chart, namely: `d3.select('#events').data([repositoriesData]).call(chart);` My progress is visible at: > **[Learning JavaScript (and Observable) by Converting a Fiddle](https://observablehq.com/@aaronkyle/learning-javascript-and-observable-by-converting-fiddle)** > > An Observable notebook by Aaron Kyle Dennis. Is there anyone who can help me understand what I am doing wrong (and how to fix it)? Thanks for your time! ---
**Author:** ![tom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tom/32/2262_2.png) [@tom](https://talk.observablehq.com/u/tom)\ **Post date:** [March 31, 2018, 10:00pm UTC](https://talk.observablehq.com/t/why-do-i-get-javascript-undefined-property-in-observable-but-not-in-html/587/2 "2018-03-31T22:00:39Z")
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](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](https://beta.observablehq.com/@tmcw/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 `` of the document manually. ---
**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\ **Post date:** [April 1, 2018, 12:43am UTC](https://talk.observablehq.com/t/why-do-i-get-javascript-undefined-property-in-observable-but-not-in-html/587/3 "2018-04-01T00:43:47Z")
Here’s my take: > **[Hello, EventDrops](https://observablehq.com/@mbostock/hello-eventdrops)** > > An Observable notebook by Mike Bostock. The main change I would make is to combine the cell that creates the DIV element with the cell that renders the chart. In general, you want to avoid side-effects in Observable, like reaching into a DOM element created in another cell and modifying its contents; instead, try to combine the definition into a single cell. The slightly tricky thing here is that EventDrops requires that the DIV into which you want to render the chart be already in the DOM, whereas cells in Observable are designed to create detached DOM elements and then return then. But you can solve this readily by first `yield`ing the DIV element (so that Observable adds it to the DOM) and _then_ rendering the chart with EventDrops. Tom used a similar technique here for maps: > **[🍃 Leaflet](https://observablehq.com/@tmcw/leaflet)** > > An Observable notebook by Tom MacWright. ---
**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\ **Post date:** [April 1, 2018, 11:08am UTC](https://talk.observablehq.com/t/why-do-i-get-javascript-undefined-property-in-observable-but-not-in-html/587/4 "2018-04-01T11:08:48Z")
Wow! Thanks to you both! I appreciate not only that you made the chart work, but also that your explanations are clear and informative. I also feel honored that two of Observable’s founders and developers replied to my newbie question – thanks again!