title: d3.scale.log cannot read property log of undefined
body: <p>I am trying to replicate a map that I saw in a <a href="https://www.youtube.com/watch?v=8jvoTV54nXw" rel="nofollow noreferrer">tutorial</a> 
   and I cannot seem to get it right even if the code on my editor is the same as his. When I tried to debug my code I get the following error</p>
  
  <blockquote>
    <p>Cannot read property log of undefined in the d3.scale.log.</p>
  </blockquote>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;meta charset="utf-8"&gt;
    &lt;title&gt;D3!!&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
  &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  &lt;script 
   src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"&gt;&lt;/script&gt;
  &lt;script src="https://d3js.org/d3-selection-multi.v0.4.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  var outerWidth=500;
  var outerheight=250;
  var margin={left:-50, top:0, right:-50, bottom:0};
  var xColumn="longitude";
  var yColumn="latitude";
  var rColumn="population";
  var peoplePerPixel=1000000;
  var innerWidth=outerWidth - margin.left - margin.right;
  var innerHeight=outerheight - margin.top - margin.bottom;
  var svg=d3.select("body").append("svg")
   .attr("width", outerWidth)
   .attr("height", outerheight);
  
  var g= svg.append("g")
    .attr("transform", "translate (" + margin.left + "," +margin.top +")");
   var xScale= d3.scale.log()
    .range([0,innerWidth]);
   var yScale= d3.scale.log()
    .range([innerHeight,0]);
   var rScale= d3.scale.sqrt();
  function render (data){
  xScale.domain(d3.extent(data, function (d){return d[xColumn]; }));
  yScale.domain(d3.extent(data, function (d){return d[yColumn]; }));
  rScale.domain([0, d3.max(data, function (d){return d[xColumn]; })]);
  
  var circles= svg.selectAll("circle").data(data);
  circles.enter().append("circle");
  circles
   .attr("cx", function(d){ return xScale(d[xColumn]);})
   .attr("cy", function(d){ return yScale(d[yColumn]);})
   .attr("r", function(d){ return rScale(d[rColumn]);});
   circles.exit().remove();
    }
   function type(d) {
    d.latitude=+d.latitude;
    d.longitude=+d.longitude;
    d.population=+d.population;
    return d;
       }
  
   d3.csv("map_cities.csv",type, render)
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>