31:T418,{ const repositoriesData = [{ name: "intake", data: [ { date: new Date('03/02/2018 6:55:11 PM') }, { date: new Date('03/02/2018 10:56:11 PM') }, { date: new Date('03/03/2018 6:57:11 AM') }, ] }, { name: "eligibility", data: [ { date: new Date('03/03/2018 6:58:09 PM') }, { date: new Date('03/03/2018 11:58:09 PM') }, ] }, { name: "assessment", data: [ { date: new Date('03/04/2018 6:59:09 PM') } ] }, { name: "dispute resolution", data: [ { date: new Date('03/05/2018 7:01:09 AM') } ] }, { name: "compliance", data: [ { date: new Date('03/05/2018 7:05:09 PM') } ] }, { name: "closure", data: [ { date: new Date('03/05/2018 11:12:07 PM') } ] }]; var chart = eventDrops({ range: { start: new Date('03/01/2018 6:55:11 PM'), end: new Date('03/06/2018 7:15:11 PM') }, drop: { date: d => d.date, }, }); d3.select(events).data([repositoriesData]).call(chart); }32:[] 2f:{"title":"Learning JavaScript (and Observable) by Converting a Fiddle","cells":[{"id":0,"value":"md`# Learning JavaScript (and Observable) by Converting a Fiddle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`\n\nI recently started learning about data visualizations for the web, but I don't know much about 'coding' in general (and JavaScript in particular). I set out to try to re-create a few blocks, but I keep getting stuck when trying to figure out how to take the pieces apart and to put them back together in a structure that is meaningful in [Observable](https://beta.observablehq.com/).\n\nIn this notebook, I walk through how to re-create an [Event Drops](https://jsfiddle.net/6rqxusw5/9/) visualization. I'd like to note that I had very little to do with this, as the visualization is the product of others, and both Tom and Mike did the heavy lifting in reaching a solution. [Check out Mike's take on it!](https://beta.observablehq.com/@mbostock/hello-eventdrops)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"events = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"md`Firstly, load in the D3.js file:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"d3 = require(\"https://unpkg.com/d3@4.13.0/build/d3.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"md`Next, load in the EventDrops .js file:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"eventDrops = require(\"https://unpkg.com/event-drops/dist/index.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`As the example also includes CSS, load that in too:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"stylesheet = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"md`When fist adding the EventDrops code from the Fiddle example into Observable, I was met with a few errors. We'll address these in a moment, but first, here's the code:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`[As explained by @tom](https://talk.observablehq.com/t/why-do-i-get-javascript-undefined-property-in-observable-but-not-in-html/587), the event-drops module expects d3 to be just ‘hanging around’ on the window object, which is why you'll see a timeFormat error if you're walking through this document a step at a time. To fix this, add a cell that sets window.d3 = d3:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"window.d3 = d3","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"md`Finally, we had to make a few minor adjustments to the original code, [as explained by Tom](https://talk.observablehq.com/t/why-do-i-get-javascript-undefined-property-in-observable-but-not-in-html/587/4):\n\n> 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.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"md`Thanks to [Tom MacWright](https://talk.observablehq.com/u/tom/summary) for walking me through all of this and getting the Event Drops example working, and thanks to [Mike Bostock](https://talk.observablehq.com/u/mike/summary) for building out an [improved example](https://beta.observablehq.com/@mbostock/hello-eventdrops).`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}