ember-cli Unclosed element `d.y` causing ember app to crash

Question

I have the following file bubbles.hbs in a ember-cli app with the following code, and I am getting the following error, Unclosed element d.y (on line 56). I tried googling the problem, but could not find a solution.

UPDATE

Here is a fiddle I made https://jsfiddle.net/395jthv9/1/ of the code below, and appears to be working.

<script type="text/javascript">
// #5b342f
var beerBackground = d3.select("body").transition()
   .duration(2000)
   // carter wilson color = FFE152
   .style("background-color","#f5d037");
</script>
<script type="text/javascript">

w = window.innerWidth,
h = window.innerHeight;

    var svg = d3.select("body").append("svg:svg")
        .attr("width", w)
        .attr("height", h);

    var circle = svg.selectAll("circle")
        .data(d3.range(70).map(function(datum,interval) {
          return {
            x: interval*20,
            y: 0,
            // stroke-width="1",
            dx: 5,
            dy: -3 * (Math.random()+1),
            mu: Math.random()*2
          };
        }))
      .enter().append("svg:circle")
        .attr("r", 2.5)
        .attr("fill","#FFEFA0") // fill
        .attr("stroke","white") // stroke
       .attr("stroke-width", "1")
        // .attr("opacity",".0.2")
        .style("stroke-opacity", "1.0")
        .style("fill-opacity", ".5");

    var text = svg.append("svg:text")
        .attr("x", 20)
        .attr("y", 20);

    var start = Date.now(),
        frames = 0;

    d3.timer(function() 
    {

  // Update the circle positions.
  circle
      .attr("cx", function(d) {
        d.x += Math.random()*3*Math.sin(Math.random()*3*d.x + Math.random()*10); if (d.x > w) d.x -= w; else if (d.x < 0) d.x += w; return d.x; })
      .attr("cy", function(d) {
        d.y += d.dy ; 
        if (d.y > h) {
          d.y -= h; 
        }
        // And the below line is giving me an error.
        else if (d.y < 0) {
         d.y += h; 
        }
          return d.y; 
      })
      .attr("r",function(d) {
        return (d.y < 100) ? d3.select(this).attr("r") : d.mu*500/d.y;
      }); --}}

});
</script>

Answer 1

You shouldn't put your JavaScript code in .hbs file using <script> tag. Move this code to JavaScript file instead.

So, move that code from bubbles.hbs to bubbles.js. You could for example execute that logic in didInsertElement hook if it's component, or after init event.