title: how to set bubble color in D3 based on ordinal values defined
body: <p>I am working on a chart similar to <a href="http://bost.ocks.org/mike/nations/" rel="nofollow noreferrer">http://bost.ocks.org/mike/nations/</a>:</p>
  
  <p><img src="https://i.stack.imgur.com/SLEej.gif" alt="enter image description here"></p>
  
  <p>In this i want to define the colors and set it for each circles based on the region value read from json.</p>
  
  <p>The code is:</p>
  
  <pre><code> colorScale = d3.scale.ordinal()
         .range(["#7479BC","#7C2833","#E7AC37","BDE7AE","E17250","ECF809","FC6E61"]);//Ffb400
  
  
  d3.json(data, function(d) {
  
     //code ...
  
  var dot = svg.append("g")
        .attr("class", "dots")
      .selectAll(".dot")
        .data(interpolateData(2000))
      .enter().append("circle")
        .attr("class", "dot")
        //.style("fill", function(d) { return colorScale(color(d)); })
        .style("fill", function(d) { return  color(d.region); })
        .call(position)
        .sort(order);
  </code></pre>
  
  <p>})</p>
  
  <p>My json file is </p>
  
  <pre><code>[
  {
  
      "name":"Search&amp;Navigator",
      "region":"IP&amp;Science",
      "checkins":[[2000,100],[2001,200],[2002,300],[2003,275],[2004,222],[2005,280],[2006,281],[2007,400],[2008,55],[2009,300]],
      "teamsize":[[2000,10],[2001,7],[2002,7],[2003,12],[2004,5],[2005,3],[2006,10],[2007,12],[2008,12],[2009,10]],
      "Checkintimes":[[2000,40],[2001,50],[2002,60],[2003,50],[2004,40],[2005,30],[2006,30],[2007,35],[2008,30],[2009,30]]
  },
  
  {
  
      "name":"Cobalt",
      "region":"CORP",
      "checkins":[[2000,121],[2001,339],[2002,124],[2003,255],[2004,325],[2005,460],[2006,177],[2007,221],[2008,122],[2009,120]],
      "teamsize":[[2000,2],[2001,2],[2002,2],[2003,2],[2004,2],[2005,2],[2006,2],[2007,2],[2008,2],[2009,3]],
      "Checkintimes":[[2000,20],[2001,40],[2002,60],[2003,50],[2004,40],[2005,30],[2006,35],[2007,30],[2008,30],[2009,30]]
  },
  
      "name":"Test",
      "region":"CORP",
      "checkins":[[2000,121],[2001,339],[2002,124],[2003,255],[2004,325],[2005,460],[2006,177],[2007,221],[2008,122],[2009,120]],
      "teamsize":[[2000,2],[2001,2],[2002,2],[2003,2],[2004,2],[2005,2],[2006,2],[2007,2],[2008,2],[2009,3]],
      "Checkintimes":[[2000,20],[2001,40],[2002,60],[2003,50],[2004,40],[2005,30],[2006,35],[2007,30],[2008,30],[2009,30]]
  }
  ]
  </code></pre>
  
  <p>so based on the region value i would like to set the appropriate color. So All "CORP" should have the same color different from "IP&amp;Science". currently it is setting all colors as black. </p>