# New to Observable (turning working code into a notebook) **URL:** \ **Category:** Help\ **Created:** [May 23, 2018, 1:30pm UTC](https://talk.observablehq.com/t/new-to-observable-turning-working-code-into-a-notebook/796 "2018-05-23T13:30:32Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![Graig82](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/graig82/32/652_2.png) [@Graig82](https://talk.observablehq.com/u/Graig82)\ **Post date:** [May 23, 2018, 1:30pm UTC](https://talk.observablehq.com/t/new-to-observable-turning-working-code-into-a-notebook/796/1 "2018-05-23T13:30:32Z")
All, I am working through Elijah Meeks D3 in Action Second Edition examples, and I thought it would be neat to try to create some of the visualizations inside an observable notebook. As I am new to Observable I am having difficulty decomposing working code from my desktop into blocks of code in an observable notebook. I figured this would be a good opportunity to learn observable better. If I publish my notebook would someone mind taking a look, and giving me some suggestions. Thank you Graig ---
**Author:** ![Graig82](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/graig82/32/652_2.png) [@Graig82](https://talk.observablehq.com/u/Graig82)\ **Post date:** [May 23, 2018, 3:08pm UTC](https://talk.observablehq.com/t/new-to-observable-turning-working-code-into-a-notebook/796/2 "2018-05-23T15:08:35Z")
I have published the notebook at: [https://beta.observablehq.com/@graig82/d3-in-action-3-5](https://beta.observablehq.com/@graig82/d3-in-action-3-5) ---
**Author:** ![magjac](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/magjac/32/525_2.png) [@magjac](https://talk.observablehq.com/u/magjac)\ **Post date:** [May 23, 2018, 6:37pm UTC](https://talk.observablehq.com/t/new-to-observable-turning-working-code-into-a-notebook/796/3 "2018-05-23T18:37:48Z")
You’re never calling the overallTeamViz function. I’ve made some other changes which I cannot explain why they are necessary in [this fork](https://beta.observablehq.com/d/2ff14b85c61c48b1) (comments added where I made changes) and now at least the circles render. I don’t have more time right now. Maybe it’s a start anyway. Your code is a little hard to follow because the indentation is not consistent. If you fix it, it will be easier for people to help out. ---
**Author:** ![kelleyvanevert](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/kelleyvanevert/32/169_2.png) [@kelleyvanevert](https://talk.observablehq.com/u/kelleyvanevert)\ **Post date:** [May 23, 2018, 6:39pm UTC](https://talk.observablehq.com/t/new-to-observable-turning-working-code-into-a-notebook/796/4 "2018-05-23T18:39:01Z")
You’re code is already quite good, but there are some key points to take note of: - In your `soccerViz` cell, the `overallTeamViz` function is currently never run. I suggest simply removing the surrounding function, letting the code run once, when the cell evaluates. - Instead of `d3.select("svg")`, you can just use `svg`, and write `svg.append('g')...` etc. The rest of that statement is correct, including the `.data(data).enter().append('g')...` stuff. - Instead of making a new selection like you do in `var teamG = d3.selectAll("g.overallG");` (which I think should work too, BTW) — you may want to consider ‘saving’ your previous selection like so: ```auto var teamG = svg.append("g") .attr("id", "teamsG") .attr("transform", "translate(50,300)") .selectAll("g") .data(data) .enter() .append("g") .attr("class", "overallG") .attr("transform", (d, i) =>`translate(${(i * 50)}, 0)`); ``` After you’ve applied the `.enter()` command, you have in your hands the selection of “newly added elements corresponding to data points”, i.e. your full selection in this case. Thus, `teamG` is not actually “a single `` element”, but the whole selection of “new single `` elements”, if that makes sense to you? 🙂 - I’m not really sure what you want to do with your code, next. If you want to do something specific to every element (team) in this selection, you should do something like `teamG.each(function (d, i) { var singleTeamG = d3.select(this) ... })`. This `singleTeamG` then refers to just the one particular `` in question instead of the entire previous selection. ---
**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:** [May 23, 2018, 6:39pm UTC](https://talk.observablehq.com/t/new-to-observable-turning-working-code-into-a-notebook/796/5 "2018-05-23T18:39:27Z")
Hi there! Created a quick notebook to demonstrate how to translate that example to Observable, along with some references to the techniques/patterns required for translating the rest of D3 in Action: > **[Learning from D3 in Action - in Observable](https://observablehq.com/@tmcw/learning-from-d3-in-action-in-observable)** > > So you’ve picked up Elijah Meeks’s D3 in Action, 2nd Edition and want to learn D3. Observable’s a great place to learn, but is a bit different than a usual webpage: instead of a single script, you write a notebook, which has reactive cells. This... Looks like a lot of folks are online this morning 🙂 I can see other people also replying… ---
**Author:** ![magjac](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/magjac/32/525_2.png) [@magjac](https://talk.observablehq.com/u/magjac)\ **Post date:** [May 23, 2018, 6:39pm UTC](https://talk.observablehq.com/t/new-to-observable-turning-working-code-into-a-notebook/796/6 "2018-05-23T18:39:33Z")
BTW, you don’t need to publish. Just click _ **Share link** _ instead. ---
**Author:** ![kelleyvanevert](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/kelleyvanevert/32/169_2.png) [@kelleyvanevert](https://talk.observablehq.com/u/kelleyvanevert)\ **Post date:** [May 23, 2018, 6:40pm UTC](https://talk.observablehq.com/t/new-to-observable-turning-working-code-into-a-notebook/796/7 "2018-05-23T18:40:23Z")
Indeed a lot of people replying all at once, haha. But actually it’s late over here 😃 ---
**Author:** ![magjac](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/magjac/32/525_2.png) [@magjac](https://talk.observablehq.com/u/magjac)\ **Post date:** [May 23, 2018, 6:42pm UTC](https://talk.observablehq.com/t/new-to-observable-turning-working-code-into-a-notebook/796/8 "2018-05-23T18:42:42Z")
Morning? Here it’s time for bed soon 😴 (CET) ---
**Author:** ![Graig82](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/graig82/32/652_2.png) [@Graig82](https://talk.observablehq.com/u/Graig82)\ **Post date:** [May 23, 2018, 6:57pm UTC](https://talk.observablehq.com/t/new-to-observable-turning-working-code-into-a-notebook/796/9 "2018-05-23T18:57:13Z")
Hahaha, wow, that was a blast of help all at once. I’ll have to take some time to digest what was just said. Thank you all so much though, I love Observable as a “learning / teaching / communication” platform Mid afternoon here, EST. ---
**Author:** ![Graig82](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/graig82/32/652_2.png) [@Graig82](https://talk.observablehq.com/u/Graig82)\ **Post date:** [May 24, 2018, 1:51pm UTC](https://talk.observablehq.com/t/new-to-observable-turning-working-code-into-a-notebook/796/10 "2018-05-24T13:51:29Z")
Hi all, I got the majority of this working, the only issue I am having is with the control panel. That is to say that I cannot get the control panel to be visible. I see the g, and the associated buttons in the DOM, but nothing is visible on the page. Any suggestions? I updated the notebook, so you can see the current version at the same link as before. ---
**Author:** ![magjac](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/magjac/32/525_2.png) [@magjac](https://talk.observablehq.com/u/magjac)\ **Post date:** [May 24, 2018, 2:51pm UTC](https://talk.observablehq.com/t/new-to-observable-turning-working-code-into-a-notebook/796/11 "2018-05-24T14:51:08Z")
I don’t _think_ you can’t have a button inside an svg. Wrapping everything in a div solves it. See [https://beta.observablehq.com/d/02ddf50faadd2cc3](https://beta.observablehq.com/d/02ddf50faadd2cc3) (Good morning USA 😁) ---
**Author:** ![Graig82](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/graig82/32/652_2.png) [@Graig82](https://talk.observablehq.com/u/Graig82)\ **Post date:** [May 24, 2018, 2:59pm UTC](https://talk.observablehq.com/t/new-to-observable-turning-working-code-into-a-notebook/796/12 "2018-05-24T14:59:07Z")
Ah, of course. That was dumb of me. So question for you super smart observable users / creators. Is this the best way to author a notebook, as one block function, or should it be broken up into smaller more digestible / explainable components? What is the convention that we as a community are trying to go for here? ---
**Author:** ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)\ **Post date:** [May 24, 2018, 3:56pm UTC](https://talk.observablehq.com/t/new-to-observable-turning-working-code-into-a-notebook/796/13 "2018-05-24T15:56:06Z")
As for “the best way to author a notebook”, we’re still figuring it out, together. But usually, lots of little cells, each responsible for one aspect of your program, is a nice way to go. That allows the reactivity of the system to really shine.