Unclear about how dc.js events are working in this example - d3.js

Question

I am trying to create something similar to this: http://photogrammar.yale.edu/labs/crossfilter/california/ But I am unclear about how clicking on a county is updating the dataTablesm. My version is using a leaflet map with circles created in d3 for markers. I'd like to have it so that when a circle is clicked the dataTablesm only shows those items associated that location. Here is my plnk. In the photogrammar example I am not seeing any references to clicking or updating or rendering.
var feature = g.selectAll("circle")
.data(stateCountGroup.all())
.enter().append("circle")
.style("stroke", "black")
.style("opacity", .6)
.style("fill", "red")
.attr("r", function(d) {
//console.log(d.value);
return d.value*5; })
//.on("click", click)
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(d.value + " Items")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
dataTablesm
.dimension(yearDimension)
.group(function(d) { return ""
})
.size(100)
.columns([
function(d) { return '<a target="_blank" href="https://arc.lib.montana.edu /ivan-doig/item.php?id=' + d.Item+ '"><img src="https://arc.lib.montana.edu/ivan-doig/' + d.Thumb + '" /></a><div class="byline">' + d.Title + '</div>'; },
]);
map.on("viewreset", update);
update();
function update() {
feature.attr("transform", function(d){
//console.log(d.key);
var coor = map.latLngToLayerPoint(d.key);
return "translate(" +
coor.x + "," +
coor.y + ")";
});
}
//});
// register handlers
//d3.selectAll('a#all').on('click', function () {
//dc.filterAll();
//dc.renderAll();
//});
dc.renderAll();
//dc.redrawAll();