# yield svg.node() in react jsx

**URL:** <https://talk.observablehq.com/t/yield-svg-node-in-react-jsx/5553>\
**Category:** Help\
**Created:** [September 8, 2021, 8:18am UTC](https://talk.observablehq.com/t/yield-svg-node-in-react-jsx/5553 "2021-09-08T08:18:02Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![shouts77](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/shouts77/32/4931_2.png) [@shouts77](https://talk.observablehq.com/u/shouts77)\
**Post date:** [September 8, 2021, 8:18am UTC](https://talk.observablehq.com/t/yield-svg-node-in-react-jsx/5553/1 "2021-09-08T08:18:03Z")

</div>

Hi. I’m learning D3.js with making it work in React. I made simple bar chart, scatter chart and so on.  
Now I have faced a problem with pachinko simulator on my react app. When I run the simulator, ‘yield’ makes an error. How can I apply below observablehq codes in react jsx?

> **[Pachinko Simulator](https://observablehq.com/@mbostock/pachinko-simulator)**
>
> Generate random x-values, then stack them along y to approximate the probability distribution of the given random number generator. It’s a sort of virtual bean machine beeswarm plot. Appendix Here’s the implementation, using d3.bisect to maintain...

[observablehq codes]

for (let i = 0; i \< n; ++i) {  
if (i % 5 === 0) **yield svg.node()**;  
const cx = x(values[i]);  
const cy = height - margin.bottom - dodge(cx) - radius - 1;

```
svg.append("circle")
    .attr("cx", cx)
    .attr("cy", -400)
    .attr("r", radius)
  .transition()
    .duration(750)
    .ease(d3.easeBounce)
    .attr("cy", cy);

```

}

yield svg.node();

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [September 11, 2021, 8:05pm UTC](https://talk.observablehq.com/t/yield-svg-node-in-react-jsx/5553/2 "2021-09-11T20:05:52Z")

</div>

When Observable compiles a cell’s code, it applies some modifications, like wrapping each cell’s body in a function declaration.

If `yield` is used inside a cell, then Observable will automatically declare a generator (i.e., `function*()`).

The code that you referenced gets compiled to:

```auto
function*(replay,dodger,radius,n,random,d3,width,DOM,height)
{
  replay;
  const dodge = dodger(radius * 2 + 1);
  const margin = ({top: 0, right: 10, bottom: 20, left: 10});
  const values = Float64Array.from({length: n}, random);
  const x = d3.scaleLinear(d3.extent(values), [margin.left, width - margin.right]).nice();
  const svg = d3.select(DOM.svg(width, height)).style("overflow", "visible");

  svg.append("g")
      .attr("transform", `translate(0,${height - margin.bottom})`)
      .call(d3.axisBottom(x));

  for (let i = 0; i < n; ++i) {
    if (i % 5 === 0) yield svg.node();
    const cx = x(values[i]);
    const cy = height - margin.bottom - dodge(cx) - radius - 1;

    svg.append("circle")
        .attr("cx", cx)
        .attr("cy", -400)
        .attr("r", radius)
      .transition()
        .duration(750)
        .ease(d3.easeBounce)
        .attr("cy", cy);
  }

  yield svg.node();
}

```

(Source: [https://api.observablehq.com/@mbostock/pachinko-simulator.js?v=3](https://api.observablehq.com/@mbostock/pachinko-simulator.js?v=3))

---

<div class="post-metadata">

**Author:** ![shouts77](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/shouts77/32/4931_2.png) [@shouts77](https://talk.observablehq.com/u/shouts77)\
**Post date:** [September 13, 2021, 9:04pm UTC](https://talk.observablehq.com/t/yield-svg-node-in-react-jsx/5553/3 "2021-09-13T21:04:24Z")

</div>

Thank you for the reply. I will try to modify code. (I wish I could have d3.js generator function example in HTML. I searched ‘[Bl.ocks.org](http://Bl.ocks.org)’ but I couldn’t find it.)