dc.js and dc.leaflet.js; wrong type of map returned - leaflet

Question

I'm trying to make a dashboard using dc.js. It has a few charts and a choroplethChart. It all worked fine, but I needed to add leaflet to the map. I've followed this sample and used dc.leaflet.js library, but instead of choroplethChart it returns Markers (see picture)
(this is how it looked before using leaflet)
The code is below and this is where geojson resides:
var usChart = dc_leaflet.choroplethChart("#us-chart");
usChart.width(1000)
.height(450)
.dimension(stateDim)
.group(totalDemandByStation)
.center([ 51.4963, -0.143 ])
.zoom(11)
.geojson(statesJson)
.colors(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF", "#0061B5"])
.colorDomain([0, max_state])
.colors(['#fff7ec','#fee8c8','#fdd49e','#fdbb84','#fc8d59','#ef6548','#d7301f','#b30000','#7f0000'])
.colorAccessor(function(d,i) {
return d.value;
})
.featureKeyAccessor(function(feature) {
return feature.properties.name;
})
.renderPopup(true)
.popup(function(d,feature) {
return feature.properties.name+" : "+d.value;
})
.legend(dc_leaflet.legend().position('bottomright'));
//https://github.com/dc-js/dc.js/issues/419
usChart.on("preRender", function(chart) {
chart.colorDomain(d3.extent(chart.data(), chart.valueAccessor()));
})
usChart.on("preRedraw", function(chart) {
chart.colorDomain(d3.extent(chart.data(), chart.valueAccessor()));
})

Answer 1

I'm not an expert here, but the choropleth is expecting map data rather than point data. The features in your geojson are points:
{
"crs": {
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
},
"type": "name"
},
"features": [
{
"geometry": {
"coordinates": [
-0.013071299999987,
51.510716
],
"type": "Point"
},
"properties": {
"id": "940GZZDLALL",
"labelX": 30,
"lines": [
{
"name": "DLR"
}
],
"name": "All Saints",
"tfl_intid": 850
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
0.061052699999989,
51.51427850000001
],
"type": "Point"
},
"properties": {
"id": "940GZZDLBEC",
"labelX": -30,
"lines": [
{
"name": "DLR"
}
],
"name": "Beckton",
"tfl_intid": 895
},
"type": "Feature"
},
...
To draw a choropleth, Leaflet will need features whose types are Polygon.
So my guess is that Leaflet is punting and drawing markers