title: D3 Logarithmic Scaling
body: <p>I'm working on this visualization:</p>
  
  <pre><code>http://tinyurl.com/cul7oyg
  </code></pre>
  
  <p>on the #scatterplot div (scroll down below the circle).  I set the Y scaling to logarithmic and changed the second number to 1:
  <code>y = d3.scale.log().range([h - 60, 1])</code></p>
  
  <p>Domain:</p>
  
  <pre><code>y.domain(d3.extent(data, function(d) {
      console.log(+d.netdonations/+d.population)
      console.log(y(+d.netdonations/+d.population))
      return +d.netdonations/+d.population;
  }));
  </code></pre>
  
  <p>I see a bunch of "infinity" values in the log whenever the data is 0.  The negative infinity asymptote should be well to the left of the x-0 Y axis.</p>
  
  <pre><code>    // set the stage
      var margin = {
          t : 30,
          r : 20,
          b : 20,
          l : 40
      }, w = 600 - margin.l - margin.r, h = 500 - margin.t - margin.b, x = d3.scale.linear().range([0, w]), y = d3.scale.log().range([h - 60, 1]),
      //colors that will reflect geographical regions
      color = d3.scale.category10();
  
      var svg = d3.select("#scatterplot").append("svg").attr("width", w + margin.l + margin.r).attr("height", h + margin.t + margin.b);
  
  scatterplot.svg = svg
  
      // set axes, as well as details on their ticks
      var xAxis = d3.svg.axis().scale(x).ticks(20).tickSubdivide(true).tickSize(6, 3, 0).orient("bottom");
  
      var yAxis = d3.svg.axis().scale(y).ticks(20).tickSubdivide(true).tickSize(6, 3, 0).orient("left");
  
      // group that will contain all of the plots
      var groups = svg.append("g").attr("transform", "translate(" + margin.l + "," + margin.t + ")");
  
      // array of the regions, used for the legend
      var regions = getContinents;
      //["Asia", "Europe", "Middle East", "N. America", "S. America", "Sub-Saharan Africa"]
  
      // bring in the data, and do everything that is data-driven
      //d3.csv("./data/trust-business.csv", function(data) {
  
      // sort data alphabetically by region, so that the colors match with legend
      /*data.sort(function(a, b) {
       return d3.ascending(a.region, b.region);
       })
       console.log(data)*/
  
      var x0 = Math.max(-d3.min(data, function(d) {
          return d.gdppercap;
      }), d3.max(data, function(d) {
          return d.gdppercap;
      }));
      //x.domain([-100, 100]);
      //y.domain([180, 0])
      x.domain(d3.extent(data, function(d) {
          return +d.gdppercap;
      }));
      y.domain(d3.extent(data, function(d) {
          console.log(+d.netdonations/+d.population)
          console.log(y(+d.netdonations/+d.population))
          return +d.netdonations/+d.population;
      }));
  
  scatterplot.x = x
  scatterplot.y = y
  
      //console.log(d3.extent(data, function(d) {return +d.gdppercap;})); 
      //console.log(d3.extent(data, function(d) {return +d.netdonations/+d.population;}));
  
      // style the circles, set their locations based on data
      var circles = groups.selectAll("circle").data(data).enter().append("circle").attr("class", "circles").attr({
          cx : function(d) {
              return x(+d.gdppercap);
          },
          cy : function(d) {
              console.log(+d.netdonations/+d.population)
              console.log(y(+d.netdonations/+d.population))
              return y(+d.netdonations/+d.population);
          },
          r : 8,
          id : function(d) {
              return d.name;
          }
      }).style("fill", function(d) {
          return color(d.continent);
      });
  
      // what to do when we mouse over a bubble
      var mouseOn = function() {
          var circle = d3.select(this);
  
          // transition to increase size/opacity of bubble
          circle.transition().duration(800).style("opacity", 1).attr("r", 16).ease("elastic");
  
          // append lines to bubbles that will be used to show the precise data points.
          // translate their location based on margins
          svg.append("g").attr("class", "guide").append("line").attr("x1", circle.attr("cx")).attr("x2", circle.attr("cx")).attr("y1", +circle.attr("cy") + 26).attr("y2", h - margin.t - margin.b).attr("transform", "translate(40,20)").style("stroke", circle.style("fill")).transition().delay(200).duration(400).styleTween("opacity", function() {
              return d3.interpolate(0, 0.5);
          });
  
          svg.append("g").attr("class", "guide").append("line").attr("x1", +circle.attr("cx") - 16).attr("x2", 0).attr("y1", circle.attr("cy")).attr("y2", circle.attr("cy")).attr("transform", "translate(40,30)").style("stroke", circle.style("fill")).transition().delay(200).duration(400).styleTween("opacity", function() {
              return d3.interpolate(0, 0.5);
          });
  
          // function to move mouseover item to front of SVG stage, in case
          // another bubble overlaps it
          d3.selection.prototype.moveToFront = function() {
              return this.each(function() {
                  this.parentNode.appendChild(this);
              });
          };
  
          // skip this functionality for IE9, which doesn't like it
          //if (!$.browser.msie) {
          if (navigator.appName !== 'ie') {
              circle.moveToFront();
          }
          //select()
      };
      // what happens when we leave a bubble?
      var mouseOff = function() {
          var circle = d3.select(this);
  
          // go back to original size and opacity
          circle.transition().duration(800).style("opacity", 0.5).attr("r", 8).ease("elastic");
  
          // fade out guide lines, then remove them
          d3.selectAll(".guide").transition().duration(100).styleTween("opacity", function() {
              return d3.interpolate(0.5, 0);
          }).remove();
  
          //mouseout
      };
  
      // run the mouseon/out functions
      circles.on("mouseover", mouseOn);
      circles.on("mouseout", mouseOff);
  
      // tooltips (using jQuery plugin tipsy)
      circles.append("title").text(function(d) {
          return d.name;
      });
  
      $(".circles").tipsy({
          gravity : 's'
      });
  
      // the legend color guide
      var legend = svg.selectAll("rect").data(regions).enter().append("rect").attr({
          x : function(d, i) {
              return (40 + i * 80);
          },
          y : h,
          width : 25,
          height : 12
      }).style("fill", function(d) {
          return color(d);
      });
  
      // legend labels
      svg.selectAll("text").data(regions).enter().append("text").attr({
          x : function(d, i) {
              return (40 + i * 80);
          },
          y : h + 24
      }).text(function(d) {
          return d;
      });
  
      // draw axes and axis labels
      svg.append("g").attr("class", "x axis").attr("transform", "translate(" + margin.l + "," + (h - 60 + margin.t) + ")").call(xAxis);
  
      svg.append("g").attr("class", "y axis").attr("transform", "translate(" + margin.l + "," + margin.t + ")").call(yAxis);
  
      svg.append("text").attr("class", "x label").attr("text-anchor", "end").attr("x", w + 50).attr("y", h - margin.t - 5).text("Per Capita GDP");
  
      svg.append("text").attr("class", "y label").attr("text-anchor", "end").attr("x", -20).attr("y", 45).attr("dy", ".75em").attr("transform", "rotate(-90)").text("Per Capita Net Donations");
      //});
  </code></pre>