title: D3 calendar view using json
body: <p>I want do this calendar in d3js but I want to make it work with json.</p>
  
  <p><a href="http://bl.ocks.org/mbostock/4063318" rel="nofollow">http://bl.ocks.org/mbostock/4063318</a></p>
  
  <p>I have this json:</p>
  
  <pre><code>[{
   "category": "business",
   "date": "01/10/2011",
   "city": "New York"
   },
   {
   "category": "holidays",
   "date": "02/10/2011",
   "city": "New York"
   },
   {
   "category": "business",
   "date": "03/10/2011",
   "city": "New York"
   },
   {
   "category": "family",
   "date": "03/10/2011",
   "city": "New York"
   },
   {
   "category": "holidays",
   "date": "01/10/2011",
   "city": "San Francisco"
   },
   {
   "category": "family",
   "date": "02/10/2011",
   "city": "San Francisco"
   },
   {
   "category": "holidays",
   "date": "03/10/2011",
   "city": "San Francisco"
   },
   {
   "category": "family",
   "date": "01/10/2011",
   "city": "Austin"
   },
   {
   "category": "holidays",
   "date": "02/10/2011",
   "city": "Austin"
   },
   {
   "category": "family",
   "date": "03/10/2011",
   "city": "Austin"
   }
   ]
  </code></pre>
  
  <p>And I replace this code of the original code of link.</p>
  
  <pre><code>var color = d3.scale.quantize()
  .domain([-.05, .05])
  .range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));
  </code></pre>
  
  <p>by</p>
  
  <pre><code>var color = d3.scale.category10();
  </code></pre>
  
  <p>and</p>
  
  <pre><code>d3.csv("dji.csv", function(error, csv) {
  var data = d3.nest()
  .key(function(d) { return d.Date; })
  .rollup(function(d) { return (d[0].Close - d[0].Open) / d[0].Open; })
  .map(csv);
  
  rect.filter(function(d) { return d in data; })
    .attr("class", function(d) { return "day " + color(data[d]); })
  .select("title")
    .text(function(d) { return d + ": " + percent(data[d]); });
   });
  </code></pre>
  
  <p>by </p>
  
  <pre><code>d3.json("data3.json", function(error, data) {
  
  alert(data);
  rect.filter(function(d) { return d in data; })
      .attr("class", function(d) { return "day " + color(data); })
      .select("title")
      .text(function(d) { return d + ": " + d.city; });
  });
  </code></pre>
  
  <p>But this does not show the text and also does not paint the color. What is the problem?</p>