dc.js and crossfilter - not reading json at all

Question

I have the problem of trying to import a geojson (this seems to work) but then passing it onto crossfilter - no data seems to be loaded into the crossfilter object.

I made a jsfiddle here: https://jsfiddle.net/Svarto/pLyhg9Lb/

When I try to console.log(ndx), i.e. the crossfilter, I only get the crossfilter object with nothing loaded (same when I try to console.log any sort of group:

I would have expected some sort of data when writing the crossfilter with loaded data to console. The problem gets evident when I try to draw a histogram with the data - only 2 bars that are not what I expected.

The code is this:

d3.json("https://dl.dropboxusercontent.com/s/7417jc3ld25i0a4/srealitky_geojson.json?dl=1", function(err,json){

var h = 300;
            var w = 350;

            var ndx = crossfilter();
            console.log(json.features);
            ndx.add(json.features);
            console.log(ndx);

            var all = ndx.groupAll();


            var yieldDimension = ndx.dimension(function(d){
                return d.properties.yields
            });


            var yieldGroup = yieldDimension.group().reduceCount();
            console.log(yieldGroup);

            var priceDimension = ndx.dimension(function(d){
                return d.properties.price
            });

            var priceGroup = priceDimension.group().reduceCount();

            var barChart = dc.barChart("#yieldChart");

            barChart.width(350)
            .height(300)
            .x(d3.scale.linear().domain([0,30]))
            .brushOn(false)
            .dimension(yieldDimension)
            .group(yieldGroup);

            dc.renderAll();

  }

Answer 1

As pointed out by @Nilo above, the problem is not the reading of json data but the setup of your coordinates.

You probably want to bin your data by rounding to, say, a precision of 0.01:

        var yieldGroup = yieldDimension.group(function(yields) {
            return Math.floor(yields*100)/100;
        }).reduceCount();

Then clean up the margins, add elasticX and elasticY, and specify the xUnits to match, and we get a nice histogram (with a normal-ish distribution):

     barChart
        .margins({left: 50, top: 5, right: 0, bottom: 20})
        .x(d3.scale.linear())
        .elasticX(true).elasticY(true)
        .xUnits(dc.units.fp.precision(0.01))

Fork of your fiddle.

With 0.001 precision.

See the documentation for coordinateGridMixin for more details.