Geochoroplethchart Map That Displays Cities / Points Of Interest With Tags

I've implemented an infographic / map using crossfilter and d3.js. What I would like is to add the functionality of rendering different data entries as points of interest on the m

Solution 1:

You can use

.on("renderlet", drawAdditionalStuffInMap)

to draw additional things in the map, the function would look like this:

functiondrawAdditionalStuffInMap(_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 calculateAdditionalDataPointsvar 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 above code requires you to use the projection of the map as the proj function and that all data points have the longitude and latitude stored as long and lat inside them. It draws circles of radius 100 at the currently selected Datapoints. If you dont support zooming and panning on your map you can calculate d.location once for all data points outside of this function.