title: d3.scale.category20 is too smart for me
body: <p>Can anybody explain to me why these two expressions return different values...</p>
  
  <pre><code>log1.text(c20(1)); // "#aec7e8"
  log2.text(d3.scale.category20()(1)); // "#1f77b4"
  </code></pre>
  
  <p>... in the following context  </p>
  
  <hr>
  
  <h2>Working example...</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var c20 = d3.scale.category20(),
        col = d3.range(20).map(function(c) {
          return c20(c).replace("#", "0x")
        }),
        log1 = d3.select("#log1"),
        log2 = d3.select("#log2");
  
      log1.text(c20(1)); // "#aec7e8"
      log2.text(d3.scale.category20()(1)); // "#1f77b4"
      $("#user-agent").text(navigator.userAgent);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#log div {
    display: inline-block;
    margin: 0 0 0 10px;
    background: #ccc;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="log"&gt;
    &lt;div id="log1"&gt;&lt;/div&gt;
    &lt;div id="log2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="container"&gt;&lt;/div&gt;
    &lt;p id="user-agent"&gt;&lt;/p&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"&gt;&lt;/script&gt;
    &lt;div id="log1"&gt;&lt;/div&gt;
    &lt;div id="log2"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The user agent reported in my system is  </p>
  
  <blockquote>
    <p>Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like
    Gecko) Chrome/45.0.2454.85 Safari/537.36</p>
  </blockquote>
  
  <hr>
  
  <p>I kind of get the above behaviour but this is very strange...</p>
  
  <p>Why is this...  </p>
  
  <pre><code>// method 1
  d3.range(20).map(d3.scale.category20())
  
  0   #1f77b4
  1   #aec7e8
  2   #ff7f0e
  3   #ffbb78
  4   #2ca02c
  5   #98df8a
  6   #d62728
  7   #ff9896
  8   #9467bd
  9   #c5b0d5
  10  #8c564b
  11  #c49c94
  12  #e377c2
  13  #f7b6d2
  14  #7f7f7f
  15  #c7c7c7
  16  #bcbd22
  17  #dbdb8d
  18  #17becf
  19  #9edae5
  </code></pre>
  
  <p>different from this...  </p>
  
  <pre><code>// method 2
  d3.range(20).map(function(d, i) {
      return d3.scale.category20()(i);
  })  
  
  0   #1f77b4
  1   #1f77b4
  2   #1f77b4
  3   #1f77b4
  4   #1f77b4
  5   #1f77b4
  6   #1f77b4
  7   #1f77b4
  8   #1f77b4
  9   #1f77b4
  10  #1f77b4
  11  #1f77b4
  12  #1f77b4
  13  #1f77b4
  14  #1f77b4
  15  #1f77b4
  16  #1f77b4
  17  #1f77b4
  18  #1f77b4
  19  #1f77b4
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var c20 = d3.scale.category20(),
    log1 = d3.select("#log1"),
    log2 = d3.select("#log2");
  
  log1.text(c20(1)); // "#aec7e8"
  log2.text(d3.scale.category20()(1)); // "#1f77b4"
  
  d3.select("#t1").selectAll(".logs")
    .data(d3.range(20).map(d3.scale.category20()))
    .enter().append("tr").selectAll("td").data(function(d) {
      return [d]
    })
    .enter().append("td")
    .attr("class", "logs")
    .text(function(d, i, j) {
      return [j, d].join("\t")
    })
  
  d3.select("#t2").selectAll(".logs")
    .data(d3.range(20).map(function(d, i) {
      return d3.scale.category20()(i);
    }))
    .enter().append("tr").selectAll("td").data(function(d) {
      return [d]
    })
    .enter().append("td")
    .attr("class", "logs")
    .text(function(d, i, j) {
      return [j, d].join("\t")
    })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#log div {
    display: inline-block;
    margin: 0 0 10px 10px;
    background: #ccc;
  }
  #t1,
  #t2 {
    background: #ccc;
    display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="log"&gt;
    &lt;div id="log1"&gt;&lt;/div&gt;
    &lt;div id="log2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="t1"&gt;&lt;/div&gt;
  &lt;div id="t2"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Just to explain, the reason I wanted to use method 2 above was because I needed to convert the hex strings into properly formatted hex numbers so I had to process the domain values on the way through.  The actual use case is this:</p>
  
  <pre><code>var col = d3.range(20).map(function(c){
          return d3.scale.category20()(c).replace("#", "0x")
      });  
  </code></pre>
  
  <p>which doesn't work (and I still don't get why not), which is why I had to do this:</p>
  
  <pre><code>var c20 = d3.scale.category20(),
      col = d3.range(20).map(function(c){
          return c20(c).replace("#", "0x")
      });
  </code></pre>