Crossfilter with DC.js Choropleth map

Question

With D3 alone, I am able to get the result I want, but with DC.js I am facing some issues, and my guess is, it is because of my lack of knowledge in working with Crossfilter.

My CSV data looks like so:

ccgcode,ccgname,metric,male,female
06M,Great Yarmouth And Waveney,3,50,70
05G,North Staffordshire,3,40,60
... etc

My javascript is as follows:

'use strict'

var numberFormat = d3.format(".2f");
var ccgMap       = dc.geoChoroplethChart('.map-wrap');
// var sexPieChart  = dc.pieChart('.pie-chart');

d3.csv('../data/metricdata.csv', function (data) {
    var data = crossfilter(data);

    var ccgs = data.dimension(function (d) {
        return d['ccgcode'];
    });

    var ccgMetric = ccgs.group();

    d3.json("../data/ccg.json", function (map) {
        ccgMap.width(800)
            .height(800)
            .dimension(ccgs)
            .group(ccgMetric)
            .colors(d3.scale.quantize().range(["#7cbd30", "#0066cc", "#ee2e11"]))
            .colorDomain([0, 200])
            .colorCalculator(function (d) { return d ? ccgMap.colors()(d) : '#ccc'; })
            .overlayGeoJson(topojson.feature(map, map.objects.ccg).features, "CCGcode", function (d) {
                return d.properties.CCGcode;
            });

        dc.renderAll();
    });
});

Most of that code, I got from here. so I am aware I'll face some issues later when I get to colouring ..etc but right now I can't even get the map showing!

I simply get a blank page! I can see that the SVG is being drawn onto the page, but it has no path information!

What am I doing wrong? All examples I see with Crossfilter, have very fine granular data, which is great, but what is one to do in my situation where the DBA has already grouped the granular data into CCG Code groups.

If you're asking why bother with Crossfilter at all, it is because I want to use that later (by creating a sex dimension) to drive a female/male pie chart when a particular CCG (just an area of a map) is clicked.

If you've got no path information, then I assume your map is not getting drawn. That's an issue with the overlayGeoJSON call or your map data. If you put together a working example on JSFiddle or Codepen or a similar service, it will be easier to help you. — Ethan Jewett
There was some XHR issues, I've fixed those now. So you should be seeing what I'm seeing, a blank page (only h1 showing) — J86

J86 J86 · Accepted Answer · 2016-04-27T12:55:46

OK I've got the map to show, here is what I did:

Apparently dc.geoChoroplethChart() only works with GeoJSON, not TopoJSON which is what I had. I converted back using this tool.
Gave the code a .projection() to use (like here), as the default is d3.geo.albersUsa() which doesn't work for UK (didn't for me)

Much thanks goes to Xavier in this thread.

Crossfilter with DC.js Choropleth map

1 Answers