Show effect only when that section is reached in a website
<p>I have a chart made using d3.js:</p>

<p><a href="https://jsfiddle.net/qp7L1hob/" rel="nofollow noreferrer">Code for chart</a></p>

<p>I have put this chart within a website.</p>

<p><a href="http://79.170.44.120/shivams.com/" rel="nofollow noreferrer">website</a></p>

<p>Problem is that in the above website, when you scroll through the page to the "teamchart" section, I don't see the effect of the chart. When you refresh the page, you can see the chart role the effect.</p>

<p>I want the chart to role and show the effect, when I reach that section of the page or when I use the nav bar, click "teamchart" and reach that section.</p>

<p>I used the below JavaScript code, but it's repeating it continuously:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).scroll(function() {
  //Basically your position in the page
  var x = $(this).scrollTop();
  //How far down (in pixels) you want the user to be when the effect to starts, eg. 500
  var y = 500;
  if (x &gt; y) {
     //Put your effect functions in here.
  }
});</code></pre>
</div>
</div>
</p>

<p>Fiddle related to the website:</p>

<p><a href="https://jsfiddle.net/jn1ba77s/6/" rel="nofollow noreferrer">My code related to website</a> (experiment here)</p>