0

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();
Gordon
  • 19,811
  • 4
  • 36
  • 74
mutanthumb
  • 161
  • 1
  • 13
  • Possible duplicate of [dc.js - Listening for chart group render](http://stackoverflow.com/questions/25336528/dc-js-listening-for-chart-group-render) – Gordon Feb 01 '17 at 01:21
  • Again, unless you have a good reason to do it yourself, I'd suggest using dc.leaflet.js since it already handles interaction, transitions and so on. – Gordon Feb 01 '17 at 01:26
  • I see what you're talking about now: https://github.com/yurukov/dc.leaflet.js Thanks for your persistence Gordon, I was just trying to make sense of the Photographer code. I'll shift over to dc.leaflet.js – mutanthumb Feb 01 '17 at 02:17
  • Yeah, and [this fork](https://github.com/dc-js/dc.leaflet.js) has the `bubbleChart` – Gordon Feb 01 '17 at 02:20

0 Answers0