Building DC Dashboard with BubbleChart Overlay on Map - Better Example?

I'm working on a visualization similar to this example, linked-to by the dc.js library example homepage. The page has some decent example starter code to go by, however I have a particular question about drawing a bubble chart over a map.

In the above example, it appears the author manually assigns the path to display the Canadian province shapes. The code then assigns a bubbleOverlay chart to a variable called caChart, which will contain the bubbles that are drawn at specific coordinates over the Canadian map. However, further down in the code it looks like the code manually assigns (x, y) coordinates on the webpage for each bubble to be drawn at instead of assigning their locations 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 time-stamped data at lat-long coordinates that I would like to plot over a similar map of the United States. The data roughly look something like:

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 to a crossfilter dimension, and programmatically plot these coordinates over a similar underlying map image without having to manually assign them? Any help here (including pointers to working examples) would be appreciated.

Recommended topics

Hot tags