Crossfilter with DC.js Choropleth map

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.

---

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.

链接地址: http://www.djcxy.com/p/32704.html

上一篇: Crossfilter分组

下一篇: 带有DC.js等值线图的Crossfilter