1

I am new to crossfilter and am trying to "count" the number of elements at each location (LatLng) and then use this as the radius for my d3 circles:

d3.tsv("DH_Doigv2.tsv", function (data) {
var ndx = crossfilter(data);
var all = ndx.groupAll();
dc.dataCount(".dc-data-count")
.dimension(ndx)
.group(all);
data.forEach(function (d) {
  d.year = +d.Date
  d.id = d.Item;
  d.LatLng = new L.LatLng(+d.SoundLat, +d.SoundLon);
});

var stateCount = ndx.dimension(function (d) {return d.LatLng;});
var stateCountGroup = stateCount.group();
var dataTablesm = dc.dataTable("#data-table-sm");
var allDim = ndx.dimension(function(d) {return d;});

var feature = g.selectAll("circle")
 .data(data)
 .enter().append("circle")
 .style("stroke", "black")
 .style("opacity", .6)
 .style("fill", "red")
 .attr("r", function(d) {
   console.log(stateCountGroup.all().value);
   return stateCountGroup.all()[d].value*5; })
 .attr("transform", function(d){
   //console.log(d.values[0].LatLng, d.values.length);
   var coor = map.latLngToLayerPoint(d.LatLng);
   return "translate(" +
       coor.x + "," +
       coor.y + ")";
 })

But I am getting an "undefined" message as well as "TypeError: stateCountGroup.all(...)[d] is undefined" in the console. This is supposed to be a d3 layer over a Leaflet map. Ultimately, I'd like to be able to click on the circle and have another area display only those particular items (jpeg) like this: http://photogrammar.yale.edu/labs/crossfilter/california/ although I am not using a chloropleth rather I'm using a Leaflet map like this: https://github.com/austinlyons/dcjs-leaflet-untappd Where he has the data table driving everything, I'd like to have the map driving everything.

Related to this question: Not all d3 points are showing in correct position on leaflet map

Community
  • 1
  • 1
mutanthumb
  • 161
  • 1
  • 13
  • 1
    You probably want to join `stateCountGroup.all()` instead of the raw `data` and use `d` instead of trying to index by `d`. Another option is to use [dc.leaflet.js](https://github.com/dc-js/dc.leaflet.js) which has a [bubbleChart](https://github.com/dc-js/dc.leaflet.js/blob/master/src/bubbleChart.js) (unfortunately undocumented but it follows the same patterns as most dc stuff). – Gordon Jan 31 '17 at 15:39
  • That works except now, `.on("click", click)` only passes the `stateCountGroup` info (which is lat and lng) how can I have it pass more fields that would be included in `data`? – mutanthumb Jan 31 '17 at 16:36
  • Please see this answer: http://stackoverflow.com/questions/41828806/dc-js-leaflet-marker-popup-showing-fields-from-input-data#41851285 – Gordon Jan 31 '17 at 16:46
  • Actually, that's not entirely relevant, because you are aggregating by location, but the part about passing more fields into your aggregation still holds. You'll have to be careful how you aggregate those fields, though - if you have multiple data points at the same location, will those other fields all have the same value? Or do they also need to be reduced somehow? – Gordon Jan 31 '17 at 18:18
  • Thanks Gordon, I am going to open a new question about "linking" my map events with my other chart. – mutanthumb Jan 31 '17 at 20:05
  • Okay, but that's what dc.leaflet.js does automatically - if you want to do it yourself then here's the previous question: http://stackoverflow.com/questions/25336528/dc-js-listening-for-chart-group-render – Gordon Jan 31 '17 at 20:26

0 Answers0