Создание панели мониторинга DC с наложением BubbleChart на карту - лучший пример?

Я работаю над визуализацией, похожей на этот пример, связанной с домашней страницей примера библиотеки dc.js. На этой странице есть хороший пример начального кода, но у меня есть конкретный вопрос о рисовании пузырьковой диаграммы на карте.

В приведенном выше примере, кажется, автор вручную назначает путь для отображения форм канадской провинции. Затем код присваивает bubbleOverlay график переменной под названием caChart, который будет содержать пузырьки, которые нарисованы в определенных координатах по канадской карте. Однако далее в коде это выглядит так, как будто код вручную назначает (x, y) координаты на веб-странице для каждого пузырька, на котором нужно нарисовать, вместо того, чтобы назначать их местоположение программно (см. Комментарии):

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);

У меня есть данные с метками времени в координатах широты, которые я хотел бы нанести на аналогичную карту Соединенных Штатов. Данные примерно выглядят примерно так:

device_id, timestamp, lat, lon
1, 2014-7-21, 40.7127837, -74.00594130000002
2, 2014-7-22, 40.8516701, -93.2599318

Есть ли способ прочитать эти координаты в измерении перекрестного фильтра и программно построить эти координаты на похожем изображении базовой карты без необходимости назначать их вручную? Любая помощь здесь (включая указатели на рабочие примеры) будет принята с благодарностью.

Источник

1 ответ

Вы можете вообще обойти пузырьковое наложение и использовать

mapChart
.on("renderlet", drawSomething)

в методе drawSomething вы можете программно рисовать свои пузыри, как я обрисовал здесь: /questions/38643037/geochoroplethchart-karta-kotoraya-otobrazhaet-goroda-dostoprimechatelnosti-s-tegami/38643038#38643038

Источник
Другие вопросы по тегам