title: d3.js linear scale returns NaN
body: <p>I'm trying to build my first visualization with d3.js and I have som issue scaling data from a JSON source (<code>myData</code>). This is how I'm scaling it and creating svg circles:</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>var myData = [{
    "x": "45.4969717",
    "y": "10.605375399999957"
  }, {
    "x": "45.4847328802866",
    "y": "9.236798286437988"
  }, {
    "x": "45.4838657",
    "y": "9.25125330000003"
  }]
  
  var xline = d3.scaleLinear().domain(45.103300, 40.1053737).range([0, 450.57913]);
  var yline = d3.scaleLinear().domain(12.186311, 12.605783).range([0, 350]);
  var svgViewport = d3.select("#mappa-italia").append("g").attr("id", "locations");
  var circleElements = svgViewport.selectAll("circle").data(myData).enter().append("circle").attr("cx", function(d) {
    return xline(d.x);
  }).attr("cy", function(d) {
    return yline(d.y);
  }).attr("r", "5");</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;
  
  &lt;svg id="mappa-italia"&gt;&lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The error returned by the console is:</p>
  
  <pre><code>Error: &lt;circle&gt; attribute cx: Expected length, "NaN".
  
  Error: &lt;circle&gt; attribute cy: Expected length, "NaN".
  </code></pre>
  
  <p>I'm using <strong>d3.js version 5</strong></p>