# Porting Brush and zoom II to observable

**URL:** <https://talk.observablehq.com/t/porting-brush-and-zoom-ii-to-observable/1597>\
**Category:** Help\
**Created:** [January 23, 2019, 3:49pm UTC](https://talk.observablehq.com/t/porting-brush-and-zoom-ii-to-observable/1597 "2019-01-23T15:49:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![maliky](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/maliky/32/706_2.png) [@maliky](https://talk.observablehq.com/u/maliky)\
**Post date:** [January 23, 2019, 3:49pm UTC](https://talk.observablehq.com/t/porting-brush-and-zoom-ii-to-observable/1597/1 "2019-01-23T15:49:48Z")

</div>

Hi,

I’m really not good in javascript but I’m trying to port [Brush & Zoom II](https://bl.ocks.org/mbostock/f48fcdb929a620ed97877e4678ab15e6) from bl.ocks to observablehq ([my attempt](https://beta.observablehq.com/@maliky/selection-et-zoom)) as to learn about brush and zoom.

The problem is that I don’t get quite get all the original code although I made progress since this morning (about 7 hours ago) and some doc reading (w3, d3, moz://a).

Comments would be welcome.  
Thank you.

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [January 23, 2019, 4:37pm UTC](https://talk.observablehq.com/t/porting-brush-and-zoom-ii-to-observable/1597/2 "2019-01-23T16:37:47Z")

</div>

Hi, here’s a fork that works:

> **[Observable](https://beta.observablehq.com/compare/7e3d7d0558af644c@213...4d6a3cea3fb781e4@234)**
>
> A better way to code.

The main change that I made was to move some of the code into the svg cell. Note that each cell defines its own function scope, so the only variables defined in a cell that you can access from other cells are the ones that you output with a `return` or `yield` statement.

Hope that helps!

---

<div class="post-metadata">

**Author:** ![maliky](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/maliky/32/706_2.png) [@maliky](https://talk.observablehq.com/u/maliky)\
**Post date:** [January 23, 2019, 10:59pm UTC](https://talk.observablehq.com/t/porting-brush-and-zoom-ii-to-observable/1597/3 "2019-01-23T22:59:05Z")

</div>

Thank you Bryan.  
It helps seen it work, Although I don’t understand why I didn’t get it right when I first tried copying the whole block in one cell.

I also finished reading [https://beta.observablehq.com/@mbostock/how-observable-runs](https://beta.observablehq.com/@mbostock/how-observable-runs) and scope thing in Observable gets clearer.

(edit:  
for good practices while porting code check [https://beta.observablehq.com/@tmcw/observable-anti-patterns-and-code-smells](https://beta.observablehq.com/@tmcw/observable-anti-patterns-and-code-smells))