I am working on a visualization similar to this example related to the dc.js library home page. There is a decent start code example on the page, but I have a specific question about drawing a bubble chart over a map.
In the above example, it seems that the author manually assigns a path to display the forms of the Canadian province. The code then assigns the bubbleOverlay diagram a variable called caChart , which will contain the bubbles that are drawn in certain coordinates on the map of Canada. However, the code below looks like code that manually assigns (x, y) the coordinates on the web page for each bubble that needs to be drawn, instead of assigning them programmatically (see Comments):
caChart.width(600) .height(450) .dimension(cities) .group(totalCrimeRateByCity) .radiusValueAccessor(function(p) { return p.value.avgTotalCrimeRate; }) .r(d3.scale.linear().domain([0, 200000])) .colors(["#ff7373","#ff4040","#ff0000","#bf3030","#a60000"]) .colorDomain([13, 30]) .colorAccessor(function(p) { return p.value.violentCrimeRatio; }) .title(function(d) { return "City: " + d.key + "\nTotal crime per 100k population: " + numberFormat(d.value.avgTotalCrimeRate) + "\nViolent crime per 100k population: " + numberFormat(d.value.avgViolentCrimeRate) + "\nViolent/Total crime ratio: " + numberFormat(d.value.violentCrimeRatio) + "%"; }) // These points appear to be assigned manually .point("Toronto", 364, 400) .point("Ottawa", 395.5, 383) .point("Vancouver", 40.5, 316) .point("Montreal", 417, 370) .point("Edmonton", 120, 299) .point("Saskatoon", 163, 322) .point("Winnipeg", 229, 345) .point("Calgary", 119, 329) .point("Quebec", 431, 351) .point("Halifax", 496, 367) .point("St. John's", 553, 323) .point("Yukon", 44, 176) .point("Northwest Territories", 125, 195) .point("Nunavut", 273, 188);
I have timestamp data in lat-long coordinates that I would like to build on a similar map of the United States. The data looks something like this:
device_id, timestamp, lat, lon 1, 2014-7-21, 40.7127837, -74.00594130000002 2, 2014-7-22, 40.8516701, -93.2599318
Is there a way to read these coordinates in relation to the size of the cross filter and programmatically build these coordinates compared to a similar image of the base map without having to manually assign them? Any help here (including pointers to working examples) would be appreciated.