title: d3.js not reading JSON (d3.js + dc.js + crossfilter)
body: <p>I am trying to visualize some data with d3.js + dc.js + crossfilter.
  I am using a JSON file where data are stored.
  But it looks like d3 is not reading the data.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>This is the error: d3.js:8756 Error:  attribute d: Expected number, "Mundefined,6V0Hun…".</p>
  
  <p>Here the code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
  
  &lt;link href="frameworks/dc.min.css" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Work+Sans" 
  rel="stylesheet"&gt;
  &lt;link rel="stylesheet" type="text/css" href="index.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-1.12.4.js" 
  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" 
  crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" 
  src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/ 
  crossfilter.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" 
  src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js" 
  charset="utf-8"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" 
  src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" 
  src="https://rawgit.com/crossfilter/reductio/master/reductio.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" 
  src="https://npmcdn.com/universe@0.8.1/universe.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="chart1"&gt;&lt;/div&gt;
  &lt;div id="chart2"&gt;&lt;/div&gt;
  &lt;div id="chart3"&gt;&lt;/div&gt;
  &lt;script type="text/javascript" src="index_json.js"&gt;&lt;/script&gt;
  
  
  
  &lt;/body&gt;
  &lt;footer&gt;    
  
  
  
  &lt;/footer&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>window.onload=function(){
  
  var colorScale = 
  
  d3.scale.ordinal().domain(["name","total","category"]) 
  .range(["#006699","#33F5B7", "#6CD4FF", "4DE6D8" ]);
  
  
  var data; 
  d3.json("./pata.json", function(data) {
  
  console.log(data[1]);
  var ndx = crossfilter(data);
  
  
  var nameDim = ndx.dimension(function (d) {
  return d.nome; 
  });  
  var croccDim = ndx.dimension(function (d) {
  return d.croccantezza; 
  });  
  var gustoDim = ndx.dimension(function (d) {
  return d.gusto; 
  });  
  var chimDim = ndx.dimension(function (d) {
  return d.chimichevolezza; 
  });  
  var dipDim = ndx.dimension(function (d) {
  return d.rischio_dipendenza; 
  });  
  
  
  var nameSumGroup = nameDim.group().reduceSum(function(data){ return 
  d.total; });
  var croccGroup = croccDim.group();
  var gustoGroup = gustoDim.group();
  var chimGroup = chimDim.group();
  var dipGroup = dipDim.group();var chart1 = dc.barChart("#chart1");
  chart1
  
  .width(400).height(200)
  .dimension(croccDim)
  .group(croccGroup)
  .brushOn(true)
  .yAxisLabel("Quantity of Records")
  .margins({top: 10, right: 50, bottom: 30, left: 60})
  .x(d3.scale.ordinal())
  .xUnits(dc.units.ordinal)
  .colors(colorScale);
  
  
  
  
  var chart2 = dc.barChart("#chart2");
  chart2
  
  .width(400).height(200)
  .dimension(gustoDim)
  .group(gustoGroup)
  .brushOn(true)
  .yAxisLabel("Sum of Totals")
  .margins({top: 10, right: 50, bottom: 30, left: 60})
  .x(d3.scale.ordinal())
  .xUnits(dc.units.ordinal)
  .colors(colorScale);
  
  
  
  var catChart = dc.pieChart("#chart3");
  catChart
  .width(200).height(200)
  .radius(80)
  .innerRadius(20)
  .dimension(dipDim)
  .group(dipGroup)
  .colors(colorScale);
  
  
  dc.renderAll();
  
  });
  
  }
  </code></pre>
  
  <p>JSON</p>
  
  <pre><code>{"Patatine":[
  
  {"nome":"Fonzies", "croccantezza":"9", "gusto":7, 
  "rischio_dipendenza":10, "chimichevolezza":5},
  {"nome":"Yonkers", "croccantezza":"6", "gusto":10, 
  "rischio_dipendenza":9, "chimichevolezza":9},
  {"nome":"SanCarlo1933", "croccantezza":"10", "gusto":7, 
  "rischio_dipendenza":8, "chimichevolezza":3},
  {"nome":"Pringles", "croccantezza":"7", "gusto":8, 
  "rischio_dipendenza":7, "chimichevolezza":9},
  {"nome":"Dixi", "croccantezza":"6", "gusto":8, 
  "rischio_dipendenza":10, "chimichevolezza":6},
  {"nome":"BBacon", "croccantezza":"7", "gusto":10, 
  "rischio_dipendenza":10, "chimichevolezza":9},
  {"nome":"Virtual", "croccantezza":"8", "gusto":9, 
  "rischio_dipendenza":8, "chimichevolezza":8}
  
  
  ]}
  </code></pre>
  
  <p>JS fiddle: <a href="https://jsfiddle.net/3u40ox7u/4/" rel="nofollow noreferrer">https://jsfiddle.net/3u40ox7u/4/</a>
  Anyone have any suggestion?</p>