GeoCoroplethChart showing cities / points of interest with tags

Question

I implemented an infographic / map using crossfilter and d3.js.

I would like to add the rendering functionality of various data records as points of interest on the map:

For example, there are cities in Mexico and data showing a metric of tequila consumption.

What I would like to do is, for example, the consumption of tequila in different cities of Europe.

How can I overlay such information on my map of Europe .

The fact is that it is very clear how to do this with d3.js , but it is not clear how to do this with a card that works with dc.js , i.e. crossfilter.

All my code can be found here .

This is the part most closely associated with the card itself:

//This is the data for the Map d3.json("data/europe.json", function (error, eu) { console.log('map', eu) usChart .width(590) .height(500) .projection(projection .scale((1200 + 1) / 2 ) .translate([660 / 4, 3360 / 4]) .precision(.1)) .dimension(countries) .group(countriesJobsdSum) .filterHandler( function(dimension, filter) { dimension.filter( function(d) {return usChart.filter() != null ? d.indexOf(usChart.filter()) >= 0 : true;}); // perform filtering return filter; // return the actual filter value }) .colors(d3.scale.quantize().range( ["#8c857d", "#d982ab", "#d9525e", "#a63f52", "#8c6976", "#55b1b1", "#637e9e"]) ) .colorDomain([0, 200]) .colorCalculator(function (d) { return d ? usChart.colors()(d) : '#ccc'; }) .overlayGeoJson(eu.features, "countries", function (d) { return d.properties.name; //return d.properties.Country; }) .transitionDuration(0) .title(function (d) { return "Country: " + d.key + "\nNumber of Jobs: " + numberFormat(d.value ? d.value : 0) ; }); 

Answer 1

you can use

 .on("renderlet", drawAdditionalStuffInMap) 

to draw additional objects on the map, the function will look like this:

 function drawAdditionalStuffInMap(_chart, selection) { var svg = _chart.svg(); svg.selectAll("g.additionalStuff").remove(); var group = svg.selectAll("g.additionalStuff"); if (group.empty()) { group = svg.append("g").classed("additionalStuff", true); } //you need to implement calculateAdditionalDataPoints var additionalData = calculateAdditionalDataPoints(); var additionalNodes = group.selectAll("circle").data(additionalData, function(x) { return x.id; }); _chart.dimension().top(Infinity).map(function(d) { d.location = proj([d.long, d.lat]); return d; }); additionalNodes.enter() .append("circle") .attr("x", 0) .attr("y", 0) .attr("r", 100) .attr("transform", function(d){ return "translate(" + d.location[0] + "," + d.location[1] + ")"; }); additionalNodes.exit().remove(); } 

The code above requires that you use the map projection as a proj function and that all data points have longitude and latitude, stored both long and lat inside them. He draws circles of radius 100 on the currently selected Datapoints. If you do not support zooming and panning on the map, you can calculate d.location once for all data points outside this function.