title: No Output of the apparent right "D3.js - Code" (Simple Scatterplot)
body: <p>I am new in D3.js and can't fix a seemingly small problem. The thing is I don't realy understand what's wrong with "my" code. The error that I get on the console tells me: "SyntaxError: expected expression, got '&lt;' ", which doesn't make any sense for me. May be some of you can help me with this. Here it is: </p>
  
  <pre><code>     var xyr = [
  {x:1,y:1,r:1},
  {x:2,y:2,r:2},
  {x:3,y:3,r:3}
            ];
  
  var body = d3.select("body");
  var svg = body.append("svg").attr("width",250).attr("height",250);
  
  var scaleX = d3.scaleLinear().range([0,250]);
  var scaleY = d3.scaleLinear().range([0,250]);
  
  function render(data){
  //Data Binding
  var circles = svg.selectAll("circle").data(data);
  
  scaleX.domain(d3.extent(data,function(d){ return d.x; }));
  scaleY.domain(d3.extent(data,function(d){ return d.y; }));
  
    //Debugging (working correct  --&gt; 125)
  
  circles
  //Enter
  .enter().apend("circle").attr("r",5)
  //Update
  .merge(circles)
  .attr("cx", function (d){ return scaleX; })
  .attr("cy", function (d){ return scaleY; });
  
  //Exit
  circles.exit().remove();
  };
  
      //Invoking the funktion with var xyr
  render(xyr);
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>